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 在线示例：要素图层分类、分组设置可视化样式