使用ClusterLayer进行分类聚合（聚簇）

最新推荐文章于 2025-04-15 15:29:40 发布

原创最新推荐文章于 2025-04-15 15:29:40 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

arcgis 同时被 3 个专栏收录

1 篇文章

订阅专栏

点聚合

1 篇文章

订阅专栏

点聚簇

1 篇文章

订阅专栏

这篇博客介绍了如何利用ClusterLayer进行地理数据的分类聚合。通过在地图上添加ClusterLayer，并根据数据类型设置不同的id和data属性，实现了对不同类型数据的可视化呈现。实际应用中，这种技术可以有效地组织大量地理位置信息，提高地图的可读性。

使用ClusterLayer进行分类聚合（聚簇）很简单，就是根据有几个类型的数据就在map上添加几次ClusterLayer，区别主要是在ClusterLayer的id和data属性上。具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Cluster</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
    <style>
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
        #map{ margin: 0; padding: 0; }
    </style>

    <script>
        // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
        // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
        var dojoConfig = {
            paths: {
                extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
            }
        };
    </script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://js.arcgis.com/3.19/"></script>
    <script>
        var map;
        require([
            "dojo/parser",
            "dojo/ready",
            "esri/Color",
            "esri/map",
            "esri/graphic",
            "esri/geometry/Extent",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/renderers/ClassBreaksRenderer",
            "esri/SpatialReference",
            "esri/geometry/Point",
            "esri/geometry/webMercatorUtils",
            "extras/ClusterLayer",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!",
            "esri/dijit/Basemap",
            "esri/dijit/BasemapLayer"
        ], function(
            parser, ready, Color, Map, Graphic, Extent,
            SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol,
            ClassBreaksRenderer, SpatialReference, Point, webMercatorUtils,
            ClusterLayer,Basemap,BasemapLayer
        ) {
            ready(function() {
                parser.parse();

                var provinceLayer = new BasemapLayer({
                    url:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
                });
                var provincebasemap = new Basemap({
                    layers: [provinceLayer]
                });
                map = new Map("map", {
                    basemap:provincebasemap,// "osm",
                    center: [119.3, 26.05],
                    zoom: 12
                });

                map.on("load", function() {
                    addCluster_1();
                    addCluster_2();
                });

                function corrdinateFn(p) {
                    var wgs = new SpatialReference({"wkid": 4326});
                    var latlng = new  Point(parseFloat(p.x), parseFloat(p.y), wgs);
                    var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
                    return {
                        "x": webMercator.x,
                        "y": webMercator.y,
                        "attributes": p.attributes
                    };
                }

                var picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/";

                function addCluster_1() {
                    var datas = new Array();
                    var corrdinates = new Array();
                    corrdinates.push({x:119.32,y:26.05,attributes:{}});
                    corrdinates.push({x:119.326,y:26.057,attributes:{}});
                    corrdinates.push({x:119.328,y:26.06,attributes:{}});
                    corrdinates.push({x:119.33,y:26.04,attributes:{}});
                    corrdinates.push({x:118.93,y:25.87,attributes:{}});
                    $.each(corrdinates,function (i,e) {
                        datas.push(corrdinateFn(e));
                    });

                    var clusterLayer = new ClusterLayer({
                        "data": datas,
                        "distance": 100,
                        "id": "cluster1",
                        "labelColor": "#fff",
                        "labelOffset": 10,
                        "resolution": map.extent.getWidth() / map.width,
                        "singleColor": "#888"
                    });
                    var defaultSym = new SimpleMarkerSymbol().setSize(4);
                    var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
                    var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 32, 32).setOffset(0, 15);
                    var yellow = new PictureMarkerSymbol(picBaseUrl + "YellowPin1LargeB.png", 64, 64).setOffset(0, 15);
                    var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
                    renderer.addBreak(0, 1, green);
                    renderer.addBreak(1, 2, yellow);
                    renderer.addBreak(2, 1001, red);
                    clusterLayer.setRenderer(renderer);
                    map.addLayer(clusterLayer);
                }

                function addCluster_2() {
                    var datas = new Array();
                    var corrdinates = new Array();
                    corrdinates.push({x:118.17,y:26.65,attributes:{}});
                    corrdinates.push({x:119.33,y:26.05,attributes:{}});
                    corrdinates.push({x:119.34,y:26.05,attributes:{}});
                    corrdinates.push({x:119.337,y:26.06,attributes:{}});
                    $.each(corrdinates,function (i,e) {
                        datas.push(corrdinateFn(e));
                    });

                    var clusterLayer = new ClusterLayer({
                        "data": datas,
                        "distance": 100,
                        "id": "cluster2",
                        "labelColor": "#fff",
                        "labelOffset": 10,
                        "resolution": map.extent.getWidth() / map.width,
                        "singleColor": "#888"
                    });
                    var defaultSym = new SimpleMarkerSymbol().setSize(4);
                    var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
                    var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
                    var orange = new PictureMarkerSymbol(picBaseUrl + "OrangePin1LargeB.png", 64, 64).setOffset(0, 15);
                    var black = new PictureMarkerSymbol(picBaseUrl + "BlackPin1LargeB.png", 72, 72).setOffset(0, 15);
                    renderer.addBreak(0, 1, blue);
                    renderer.addBreak(1, 2, orange);
                    renderer.addBreak(2, 1001, black);
                    clusterLayer.setRenderer(renderer);
                    map.addLayer(clusterLayer);
                }
            });
        });
    </script>
</head>

<body>
<div data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline',gutters:false"
     style="width: 100%; height: 100%; margin: 0;">
    <div id="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'">
    </div>
</div>
</body>
</html>

实际效果如下：