ArcGIS JSAPI 学习教程 - 要素图层(FeatureLayer)分类、分组设置可视化样式(ClassBreaksRenderer)
本文主要介绍一下通过ClassBreaksRenderer创建自定义渲染渲染。
主要应用于给不同数据设置不同样式,用于可视化展示分类数据。详见代码。

本文包括 完整代码以及在线示例。
完整代码
html
<!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 JavaScript
4.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.attributes
let 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 layer
colorRendererCreator.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>

在线示例
ArcGIS Maps SDK for JavaScript 在线示例:要素图层分类、分组设置可视化样式