基于arcgis js api 4.x开发点聚合效果

L.傲骨雄风
于 2024-01-18 09:48:46 发布
阅读量1k
点赞数 8
文章标签： arcgis javascript 开发语言
本文链接：https://blog.csdn.net/xlp789/article/details/135666361
版权
本文介绍了如何使用ArcGISAPI4.23创建一个定制地图视图，展示带有动态聚合功能的巡检点数据，包括独特值渲染器和热力图渲染。通过Ajax获取数据并实现图形层、聚合开关功能以及图例展示。
摘要由CSDN通过智能技术生成
一、代码
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Build a custom layer view using deck.gl | Sample | ArcGIS API for
        JavaScript 4.23
    </title>

    <link rel="stylesheet" href="http://localhost/arcgis_js_api_424/4.24/esri/css/main.css" />
    <script src="http://localhost/arcgis_js_api_424/4.24/init.js"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #infoDiv {
            padding: 10px;
        }
    </style>

    <script>
        require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer",
            "esri/widgets/Editor",
            "esri/layers/TileLayer", "esri/layers/WMTSLayer", "esri/layers/WebTileLayer",
            "esri/geometry/Extent", "esri/geometry/Point",
            "esri/widgets/Sketch/SketchViewModel",
            "esri/layers/FeatureLayer", "esri/geometry/SpatialReference",
            "esri/symbols/SimpleFillSymbol", "esri/geometry/Polygon", "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/renderers/HeatmapRenderer", "esri/renderers/UniqueValueRenderer", "esri/Color",
            "esri/layers/support/LabelClass", "esri/widgets/Legend", "esri/widgets/Expand",
        ], (
            Map,
            MapView, Graphic, GraphicsLayer, Editor,
            TileLayer, WMTSLayer, WebTileLayer, Extent, Point, SketchViewModel,
            FeatureLayer, SpatialReference, SimpleFillSymbol, Polygon, SimpleMarkerSymbol,
            SimpleLineSymbol, HeatmapRenderer,  
            UniqueValueRenderer, Color, LabelClass, Legend, Expand
        ) => {
            $.ajax({
                url: "./data/point.json",
                type: "get",
                dataType: "json",
                success: function (data) {
                    map = new Map({
                        //  basemap: "streets-vector"
                    });

                    console.log(data)
                    const view = new MapView({
                        container: "viewDiv",
                        map: map,
                        // center: [113.55, 34.78],
                        //zoom:12,
                        spspatialReference: {
                            wkid: 4547
                        },
                        extent: new Extent({
                            xmin: 344577.88,
                            ymin: 2380651.49,
                            xmax: 655422.12,
                            ymax: 5036050.38,
                            spatialReference: new SpatialReference({ wkid: 4547 })
                        })
                    });
                    var features = data.features;
                    let symbol = {
                        type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                        style: "square",
                        color: "blue",
                        size: "18px",  
                        outline: {  // autocasts as new SimpleLineSymbol()
                            color: [255, 255, 0],
                            width: 3  // points
                        }
                    };
                    var graphicList = [];
                    for (var i = 0; i < 50000; i++) {
                        var feature = features[i];
                        if (i < 30000) {
                            graphicList.push(new Graphic({
                                geometry: new Point({
                                    x: feature.geometry.coordinates[0],
                                    y: feature.geometry.coordinates[1],
                                    spatialReference: {
                                        wkid: 4547
                                    }
                                }),
                                symbol: symbol,
                                attributes: { "ObjectID": i + 1, "PatrolStatus": "已巡","Rate":1.0 }
                            }));
                        }
                        if (i >= 30000) {
                            graphicList.push(new Graphic({
                                geometry: new Point({
                                    x: feature.geometry.coordinates[0],
                                    y: feature.geometry.coordinates[1],
                                    spatialReference: {
                                        wkid: 4547
                                    }
                                }),
                                symbol: symbol,
                                attributes: { "ObjectID": i + 1, "PatrolStatus": "未巡", "Rate": 0.0 }
                            }))
                        };
                    }


                    var renderer = {
                        type: "unique-value",
                        field: "PatrolStatus",
                        defaultSymbol: null,
                        uniqueValueInfos: [{
                            value: "已巡",
                            symbol: {
                                type: "simple-marker",  
                                style: "circle",
                                color: "rgb(182,232,105)",
                                size: "12px",  
                                outline: {  
                                    color: "rgb(140,203,23)",
                                    width: "4px",
                                }
                            }
                        }, {
                            value: "未巡",
                            symbol: {
                                type: "simple-marker", 
                                style: "circle",
                                color: "rgb(195,195,195)",
                                size: "12px",
                                outline: {  
                                    color: "rgb(164,164,164)",
                                    width: "4px",
                                }
                            }
                        }]
                    }

                    const clusterConfig = {
                        type: "cluster",
                        clusterRadius: 40,
                        maxScale: 5000,
                        popupTemplate: {
                            title: "巡检点聚类信息",
                            content: "此聚类表示 {cluster_count} 个巡检点",
                            fieldInfos: [{
                                fieldName: "cluster_count",
                                format: {
                                    places: 0,
                                    digitSeparator: true
                                }
                            }],
                            labelingInfo: [{
                                deconflictionStrategy: "none",
                                labelExpressionInfo: {
                                    expression: "Text($feature.cluster_count, '#,###')"
                                },
                                symbol: {
                                    type: "text",
                                    color: "#004a5d",
                                    font: {
                                        weight: "bold",
                                        family: "Noto Sans",
                                        size: "12px"
                                    }
                                },
                                labelPlacement: "center-center",
                            }],
                           
                            //clusterMinSize: "24px",
                            //clusterMaxSize: "60px",

                        }
                    };
                    let featureLayer = new FeatureLayer({
                        fields: [
                            {
                                name: "ObjectID",
                                alias: "ObjectID",
                                type: "oid"
                            },
                            {
                                name: "PatrolStatus",
                                alias: "巡检状态",//用于图例上显示中文
                                type: "string"
                            },
                            {
                                name: "Rate",
                                alias: "Rate",
                                type: "double"
                            }
                        ],
                        outFields: ["*"],
                        opacity: 1,
                        source: graphicList,
                        featureReduction: clusterConfig,
                        renderer: renderer,
                        popupTemplate: {
                            title: "巡检点信息",
                            content: [
                                {
                                    type: "fields",
                                    fieldInfos: [
                                        {
                                            fieldName: "ObjectID",
                                            label: "巡检ID"
                                        },
                                        {
                                            fieldName: "PatrolStatus",
                                            label: "巡检状态"
                                        },
                                       
                                    ]
                                }
                            ]
                        }

                    });

                    map.add(featureLayer);



                    const legend = new Legend({
                        view: view,
                        container: "legendDiv"
                    });
                    const infoDiv = document.getElementById("infoDiv");
                    view.ui.add(new Expand({
                        view: view,
                        content: infoDiv,
                        expandIcon: "list-bullet",
                        expanded: false
                    }), "top-left");
                    const toggleButton = document.getElementById("cluster");
                    toggleButton.addEventListener("click", () => {
                        let fr = featureLayer.featureReduction;
                        featureLayer.featureReduction = fr && fr.type === "cluster" ? null : clusterConfig;
                        toggleButton.innerText = toggleButton.innerText === "开启聚合" ? "取消聚合" : "开启聚合";
                    });

                }
            })
        });

    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="infoDiv" class="esri-widget">
        <button id="cluster" class="esri-button">取消聚合</button>
        <div id="legendDiv"></div>
    </div>
</body>
</html>
二、效果
1.开启聚合
2.取消聚合