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

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

相关推荐
杨超越luckly7 小时前
HTML应用指南:利用POST请求获取中国一汽红旗门店位置信息
前端·arcgis·html·数据可视化·门店数据
GIS小小研究僧12 小时前
GIS与农业 考公考编面试 几个参考题
arcgis·conda·gis·qgis·rs
杨超越luckly1 天前
HTML应用指南:利用GET请求获取全国沃尔沃门店位置信息
前端·arcgis·html·数据可视化·门店数据
小小弯_Shelby3 天前
arcgis api for javascript 修改地图图层要素默认的高亮效果
arcgis
ZHSH.3 天前
基于ArcGIS的作物适宜区分析案例 | 当GIS化身农科月老
arcgis·适宜性评价
装疯迷窍_A4 天前
ARCGIS国土超级工具集1.7更新说明
arcgis·插件·尖锐角·批量分割矢量·勘测定界
孙同学的一个笔记本4 天前
ArcGIS Pro 修改单个波段的值并组合输出新的影像数据
arcgis·arcgis pro·波段处理·栅格计算器
细节控菜鸡4 天前
【2025最新】ArcGIS for JavaScript 快速实现热力图渲染
开发语言·javascript·arcgis
ZHSH.4 天前
基于ArcGIS的生态敏感性分析案例 | 绿水青山就是金山银山
arcgis