supermap javascript 点聚合

不念不忘少年蓝@ 2023-10-18 22:33 92阅读 0赞

**1.html引入文件**

supermap较早版本可能没有 mapbox-gl-enhance 对应的js文件，这里提供github地址： [https://github.com/zhangliqingyun/MapboxGl-Js/blob/master/js/web/mapbox-gl-enhance.js][https_github.com_zhangliqingyun_MapboxGl-Js_blob_master_js_web_mapbox-gl-enhance.js]

在include\_mapboxgl.js中添加：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70][]

**2.在创建地图时要添加glyphs属性值，否则前端报错，聚合数量不显示：**

"glyphs": host + "/iserver/services/map-china400/rest/maps/China/tileFeature/sdffonts/\{fontstack\}/\{range\}.pbf", //此属相为聚合显示需要

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1][]

**3.组数聚合数据：**

**4.清除上次的图层信息：**

**5.添加数据和图层：**

map.addSource(sourceId, {   //添加数据源
                type: "geojson",
                data: pointListJson,  
                cluster: true,          //聚合展示   
                clusterMaxZoom: 14, 
                clusterRadius: 100 
            });
    
            map.addLayer({              //添加聚合图层
                id: type+"Clusters",
                type: "circle",
                source: sourceId,
                filter: ["has", "point_count"],
                paint: {
                    "circle-color": [
                        "step",
                        ["get", "point_count"],
                        "#51bbd6",
                        100,
                        "#f1f075",
                        750,
                        "#f28cb1"
                    ],
                    "circle-radius": [
                        "step",
                        ["get", "point_count"],
                        20,
                        100,
                        30,
                        750,
                        40
                    ]
                }
            });
     
            map.addLayer({        //添加数量图层
                id: type+"ClusterCount",  
                type: "symbol",
                source: sourceId,
                filter: ["has", "point_count"],
                layout: {
                    "text-field": "{point_count_abbreviated}",
                    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                    "text-size": 14
                }
            });
    
            map.addLayer({        //添加单点图层
                id: type+"UnclusteredPoint",
                type: "symbol",   
                source: sourceId,
                filter: ["!", ["has", "point_count"]],
                layout: {
                    "icon-image": "bridgePointSupermap",
                    "icon-size": 0.8,           
                    "icon-offset": [0, -15] //设置偏移量              
                }   
            });

**6.添加聚合图层鼠标监听：**

//点击聚合图层鼠标监听
        function addMouseListenerForClustersPointList(id,sourceId){
             map.on('click', id, function (e) {           //点击 聚合图层的方法  
                 var features = map.queryRenderedFeatures(e.point, {
                     layers: [id]
                 });
                 var clusterId = features[0].properties.cluster_id;
                 map.getSource(sourceId).getClusterExpansionZoom(clusterId, function (
                     err, zoom) {
                     if (err)
                         return;
                     map.easeTo({
                         center: features[0].geometry.coordinates,
                         zoom: zoom
                     });
                 });
             });  
    
             map.on('mouseenter', id, function () {
                 map.getCanvas().style.cursor = 'pointer';
             });
             map.on('mouseleave', id, function () {
                 map.getCanvas().style.cursor = '';
             });
             
             map.on('mousemove', id, function (e) {     
                 map.getCanvas().style.cursor = 'pointer';
              }); 
        }

**7.添加聚合分解为单点时的鼠标监听：**

//添加单点图层鼠标监听
        function addMouseListenerForClustersPoint(id){
             map.on('mouseenter', id, function (e) {   //根据id绑定鼠标进入事件
                  popupNoCloseSupermap.remove();
                 popupNoCloseSupermap.setLngLat(e.lngLat).setHTML(e.features[0].properties.MOVETIP).addTo(map);
                map.getCanvas().style.cursor = 'pointer';          
             });                   
           
             map.on('mousemove', id, function (e) {   
                   popupNoCloseSupermap.remove();
                   popupNoCloseSupermap.setLngLat(e.lngLat).setHTML(e.features[0].properties.MOVETIP).addTo(map);
                map.getCanvas().style.cursor = 'pointer';
             });  
           
             map.on('mouseout', id, function () {
                  map.getCanvas().style.cursor = '';  
                   popupNoCloseSupermap.remove(); 
             })   
                
             map.on('click', id, function (e) {       //根据id绑定鼠标点击事件         
                   removePopupSupermap();       
                   var popContentTemp = popTitle+e.features[0].properties.CAPITAL;
                  popupSupermap.setLngLat(e.lngLat).setHTML(popContentTemp).addTo(map);
                map.getCanvas().style.cursor = 'pointer';                  
             });            
        }

[https_github.com_zhangliqingyun_MapboxGl-Js_blob_master_js_web_mapbox-gl-enhance.js]: https://github.com/zhangliqingyun/MapboxGl-Js/blob/master/js/web/mapbox-gl-enhance.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190729152401375.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/20190729152632534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70