arcgis js 多点聚合，重写聚合方法

悠悠 2023-10-18 22:35 36阅读 0赞

官网聚合截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70][]

重写聚合截图（单点时弹出提示，多点时放大地图展开聚合点）：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1][]

1.**引入需要的css、js文件，github地址**：https://github.com/zhangliqingyun/arcgis-javascript/tree/master/arcgis/3.29

2.**页面定义div：**

<div id='map' style="width:100%;height:100%;display:block;position: absolute;"></div>

3.**html页面定义ClusterLayer.js的引入路径，此文件需要单独引用（也可以直接在require中写路径引用）：**

4.**加载地图连接：**

5.**组织聚合点添加监听：**

//画点集合的方法
        function drawPointListSupermap(data,type){ 
             require(["esri/layers/ArcGISTiledMapServiceLayer","dojo/parser", "dojo/ready","dojo/_base/array","esri/Color","dojo/dom-style",  "dojo/query","esri/map", "esri/request","esri/graphic","esri/geometry/Extent","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleFillSymbol","esri/symbols/PictureMarkerSymbol","esri/renderers/ClassBreaksRenderer","esri/layers/GraphicsLayer","esri/SpatialReference","esri/dijit/PopupTemplate","esri/geometry/Point","esri/geometry/webMercatorUtils","/dist/arcgis/3.29/js/ClusterLayer.js",     "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
                 ], function(ArcGISTiledMapServiceLayer,parser, ready, arrayUtils, Color, domStyle, query,Map, esriRequest, Graphic, Extent,SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils,ClusterLayer     
                 ) {     
                    cleanLayer();                 //清除图层
                    var popupTemplate = new PopupTemplate({    //弹出提示信息
                        "title": "",
                        "fieldInfos": [{
                          "fieldName": "windowContent",
                           visible: true
                        }]        
                     });    
                     domStyle.set(query("a.action.zoomTo")[0], "display", "none");
                     var photoInfo = {};
                     var wgs = new SpatialReference({"wkid": 4326});
                     var pictureMarkerSymbol = new PictureMarkerSymbol("/common/images/22.png", 32, 32).setOffset(0, 15);  //点击聚合图标时默认的显示图标
                     if("bridge" == type){         //添加桥梁集合到图层中
                        addBridgeListToLayer(data);
                     }else if("tunnel" == type){   //添加隧道集合到图层中
                        addTunnelListToLayer(data);   
                     }
                     map.infoWindow.hide();                   //隐藏弹出提示框        
                     
                     var clusterLayer = new ClusterLayer({    //创建layer
                          "data": photoInfo.data,             //聚合值   
                          "distance": 25,                     //几公里开始聚合         
                          "id": "clusters",
                          "labelColor": "#fff",               //数量标签颜色
                          "labelOffset": 10,                  //变迁偏移
                          "resolution": map.extent.getWidth() / map.width,    //像素
                          "singleColor": "#888",          
                          "singleTemplate": popupTemplate,    //提示框
                          "singleSymbol":pictureMarkerSymbol  //
                     });        
                      
                     var renderer = new ClassBreaksRenderer(pictureMarkerSymbol, "clusterCount");  
                     var blue = new PictureMarkerSymbol("/common/images/22.png", 32, 32).setOffset(0, 15);
                     var green = new PictureMarkerSymbol("/common/images/21.png", 64, 64).setOffset(0, 15);
                     var red = new PictureMarkerSymbol("/common/images/23.png", 72, 72).setOffset(0, 15);
                     renderer.addBreak(0, 5, blue);        //从0-5使用  blue标识 聚合的图标 
                     renderer.addBreak(5, 10, green);      //从5-10使用  green标识聚合的图标  
                     renderer.addBreak(10, 10000, red);    //从10-10000使用  red标识聚合的图标
                     clusterLayer.setRenderer(renderer);   //把限制标识添加到layer中  
                     map.addLayer(clusterLayer);           //把layer添加到map中       
                     map.on("click", cleanUp);             //点击地图时，清除弹出提示框
                     map.on("key-down", function(e) {
                          if (e.keyCode === 27) {
                            cleanUp();
                          }   
                     });   
                     clusterLayer.on("mouse-over",popupLayerOver);//鼠标放到提示层的方法
                     clusterLayer.on("mouse-out",popupLayerOut);  //鼠标移开提示层的方法
                     position();                                //定位放大地图        
                     
                     //清理图层   
                     function cleanLayer(){    
                         cleanAllLayerExceptionLine();          //清理所有图层，除了线之外，展示路线上桥梁、隧道时不清除路线 
                     }              
                     
                     //添加隧道集合到图层中
                     function addTunnelListToLayer(data){
                         photoInfo.data = arrayUtils.map(data, function(p) {    //遍历结果数组集合
                             var latlng = new  Point(parseFloat(p.jd), parseFloat(p.wd), wgs);     //创建点
                             var webMercator = webMercatorUtils.geographicToWebMercator(latlng);     //根据经纬度点得到屏幕像素值
                             var tunnelNameTemp = "<li>隧道名称：<span style='color:#1D9DE1;cursor: pointer;' title='详细信息' onclick='intoDetailInfo(\""+p.id+"\",\"tunnelInfo\",\"隧道\")'>"+p.tunnelName+"</span></li>"; 
                             var attributes = {                      //组织提示信息
                               "windowContent": "<ul style='margin-left:10px;margin-right:10px;font-size:14px;margin-top:5px;margin-bottom:10px'>"+tunnelNameTemp+"<li>隧道编码："+p.tunnelCode+"</li><li>隧道全长："+p.tunnelLength+"</li><li>隧道全宽："+p.tunnelWidth+"</li><li>隧道净高："+p.tunnelHeight+"</li><li>隧道类型："+getDictName("sdfl",p.lengthCategoryCode)+"|"+p.evaluateLevel+"</li><li>中心桩号："+stakeTransformation(p.centerStake)+"</li><li>管养单位："+p.manageUnit+"</li></ul>"
                             };
                             return {                                 //组织好的数据存到数组中
                               "x": webMercator.x,
                               "y": webMercator.y,
                               "attributes": attributes
                             };
                         });          
                     }
                     
                     //添加桥梁集合到图层中
                     function addBridgeListToLayer(data){
                         photoInfo.data = arrayUtils.map(data, function(p) {    //遍历结果数组集合
                             var latlng = new  Point(parseFloat(p.jd), parseFloat(p.wd), wgs);     //创建点
                             var webMercator = webMercatorUtils.geographicToWebMercator(latlng);     //根据经纬度点得到屏幕像素值
                             var bridgeUameTemp = "<li>桥梁名称：<span style='color:#1D9DE1;cursor: pointer;' title='详细信息' onclick='intoDetailInfo(\""+p.id+"\",\"bridgeInfo\",\"桥梁\")'>"+p.bridgeName+"</span></li>"; 
                             var attributes = {                      //组织提示信息
                               "windowContent": "<ul style='margin-left:10px;margin-right:10px;font-size:14px;margin-top:5px;margin-bottom:10px'>"+bridgeUameTemp+"<li>桥梁编码："+p.bridgeCode+"</li><li>桥梁全长："+p.bridgeTotalLength+"</li><li>桥梁全宽："+p.bridgeTotalWidth+"</li><li>桥梁类型："+getDictName("qlkj",p.spanCategoryCode)+"|"+getDictName("jszkpddj_qs",p.evaluateLevelCode)+"</li><li>中心桩号："+stakeTransformation(p.centerStake)+"</li><li>桥墩类型："+getDictName("cbms_qdlx",p.pierTypeCode)+"</li><li>桥梁结构："+getBridgeStructureType(p.mainUpperStructureCode)+"</li><li>设计荷载："+getDictName("cbms_sjhzdj",p.designLoadCode)+"</li></ul>"
                             };
                             return {                                 //组织好的数据存到数组中
                               "x": webMercator.x,
                               "y": webMercator.y,
                               "attributes": attributes
                             };
                         });  
                     }    
                    
                     //定位放大地图
                     function position(){       
                        var latitude = parseFloat(data[0].jd);
                        var longitude = parseFloat(data[0].wd);       
                        var point = new Point(latitude, longitude, map.spatialReference);        
                        map.setScale(5000000);         //缩放比例 （比例尺）                                                
                        map.centerAndZoom(point);     //定位                   
                     }              
                     
                     //清除展示的图标和隐藏弹出框
                     function cleanUp() {     
                       map.infoWindow.hide();  
                       clusterLayer.clearSingles();    
                     }    
    
                     function error(err) {
                       console.log("something failed: ", err);
                     }   
                     
                     //鼠标放到提示层的方法
                     function popupLayerOver(e){        
                        map.setMapCursor("pointer");    
                     }  
                    
                     //鼠标移开提示层的方法    
                     function popupLayerOut(e){
                        map.setMapCursor("default");   
                     }  
                });    
        }

6.**官网默认的聚合点击样式为：点击后画出所有的marker，弹出提示框有上下选择的按钮，现在修改ClusterLayer.js的onClick为：点击时判断是否聚合数据大于1，大于1则设置比例尺放大地图，为1则弹出提示框**

onClick: function(e) {  
                    var singles = [];      //用于存放展开的小marker集合
                    for ( var i = 0, il = this._clusterData.length; i < il; i++) {  
                        if ( e.graphic.attributes.clusterId == this._clusterData[i].attributes.clusterId ) {  //匹配点击marker及它包含的子类
                            singles.push(this._clusterData[i]);  
                        }  
                    } 
                    if(singles.length > 1){               //点击marker包含数量大于1，进行放大展示（singles的长度肯定大于等于1，包含它自己长度就是1，所以可以这样判断）
                        var currentScale = this._map.getScale(); //当前地图放大比例值
                        var expandScale = currentScale - 1500000;  //缩小放大比例         
                        if(expandScale > 0){    
                            this._map.setScale(expandScale);     //缩放比例 （比例尺）             
                        }else{
                            this._map.setScale(50000);           //缩放比例 （比例尺）                       
                        }    
                        this._map.centerAndZoom(e.mapPoint);     //定位      
                    }else{                                //点击maker包含数量为1，提示marker信息
                        e.stopPropagation();              //关闭蔓延，这样弹出窗口才不会出现闪现的情况            
                        this._map.infoWindow.setTitle("基本信息");    
                        this._map.infoWindow.setContent(singles[0].attributes.windowContent);               
                        this._map.infoWindow.show(e.mapPoint,InfoWindow.ANCHOR_UPPERLEFT);
                    }                 
                },

7.**添加完聚合后再点击其他非聚合模块，弹出窗口存在闪现的情况，可以添加 e.stopPropagation()解决：**

//点击提示层的方法   
                 function popupLayerClick(e){ 
                    e.stopPropagation();   //关闭蔓延，这样弹出窗口才不会出现闪现的情况          
                    var graphic = e.graphic;              
                    map.infoWindow.setTitle("基本信息");              
                    map.infoWindow.setContent(popContent);         
                    map.infoWindow.show(e.mapPoint,InfoWindow.ANCHOR_UPPERLEFT);      
                 }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190730135715607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190730135915317.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70