当前位置：首页 > news >正文

ArcGIS JSAPI 学习教程 - 要素图层（FeatureLayer）分类、分组设置可视化样式（ClassBreaksRenderer）

news 2025/10/22 8:00:37

ArcGIS JSAPI 学习教程 - 要素图层（FeatureLayer）分类、分组设置可视化样式（ClassBreaksRenderer）

- 完整代码
- 在线示例

本文主要介绍一下通过ClassBreaksRenderer创建自定义渲染渲染。

主要应用于给不同数据设置不同样式，用于可视化展示分类数据。详见代码。

在这里插入图片描述

本文包括完整代码以及在线示例。

完整代码


<!doctype html>
<html lang="en">
<head><meta charset="utf-8"/><meta name="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no"/><title>Generate a class breaks visualization | Sample | ArcGIS Maps SDK for JavaScript4.33</title><script type="module" src="https://openlayers.vip/arcgis_api/calcite-components/2.8.1/calcite.esm.js"></script><!-- 引入ArcGIS JS API样式和脚本 --><link rel="stylesheet" href="https://openlayers.vip/arcgis_api/4.33/esri/themes/light/main.css"/><script src="https://openlayers.vip/arcgis_api/4.33/init.js"></script><script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}#myCustomGroup {position: absolute;top: 16px;left: 64px;}</style>
</head><body><script type="module">const [Map,SceneView,FeatureLayer,colorRendererCreator,] = await $arcgis.import(["@arcgis/core/Map.js","@arcgis/core/views/SceneView.js","@arcgis/core/layers/FeatureLayer.js","@arcgis/core/smartMapping/renderers/color.js",]);const Legend = await $arcgis.import("@arcgis/core/widgets/Legend.js");// 添加图层数据const layer = new FeatureLayer({popupEnabled: true,outFields: ["*"],popupTemplate: {title: '图层弹窗Title',content: function (feature) {// 获取字段var attributes = feature.graphic.attributeslet html = '<div class="popup-template-content">'for (const key in attributes) {// 排除不要的属性if (['FID', 'OID_'].includes(key)) {continue}html += `<p class="field-row"><span class="dt">${key}:  </span><span class="db">${attributes[key]}</span></p>`}html += '</div>'return html},},url: 'https://gs3d.geosceneonline.cn/server/rest/services/Hosted/ShangHaiBuilding/FeatureServer/0',title: '模拟建筑',});const map = new Map({layers: [layer],});// 创建场景const view = new SceneView({container: "viewDiv",map: map,zoom: 15,center: [116.20926165518152, 39.96813090329214],});view.when(function () {view.extent = layer.fullExtent;let legend = new Legend({view: view});view.ui.add(legend, "bottom-right");})// 配置渲染样式let colorParams = {layer: layer,view: view,// 指定字段field: "SHAPE__Area",// 分类方法classificationMethod: "natural-breaks",// 表达式valueExpression: `$feature.SHAPE__Area`,// 主题theme: "high-to-low",// 类型的数量numClasses: 10,// 图例legendOptions: {title: "建筑面积",showLegend: true}};// 应用渲染样式function renderLayer() {// when the promise resolves, apply the renderer to the layercolorRendererCreator.createClassBreaksRenderer(colorParams)// colorRendererCreator.createContinuousRenderer(colorParams).then(function (response) {layer.renderer = response.renderer;});}renderLayer();const toggle = document.getElementById("renderNodeUI");toggle.addEventListener("calciteSwitchChange", (event) => {colorParams.symbolType ? colorParams.symbolType = null : colorParams.symbolType = '3d-volumetric';renderLayer();});</script>
<div id="viewDiv"></div>
<div id="myCustomGroup"><calcite-block open heading="立体建筑" id="renderNodeUI"><calcite-label layout="inline">关闭<calcite-switch id="renderNodeToggle"></calcite-switch>开启</calcite-label></calcite-block>
</div>
</body>
</html>