uniapp+h5+leaflet实现点聚合

接上篇，在天地图上实现点聚合

1. 需要的文件

import 'static/leaflet/MarkerCluster.css';

import 'static/leaflet/MarkerCluster.Default.css';

import 'static/leaflet/leaflet.markercluster';

2.

createClusterLayer(data) {

       var styleFunction = L.icon({

              iconUrl: ‘’,//图片路径

              iconSize: [24, 28],

              iconAnchor: [12, 14],

       });

const markerClusterLayer = window.L.markerClusterGroup({

       showCoverageOnHover: false, //为true时,当鼠标悬停在点上时,它会显示它聚合的边界

       zoomToBoundsOnClick: true, //为true时,当鼠标点击某个点时，会缩放到它的边界范围

       chunkedLoading: true,

       maxClusterRadius: 160, // 聚类从中心标记覆盖的最大半径（以像素为单位）,默认值 80

}).addTo(this.map);

 // 加载待聚合的geojson点数据                  

       let markerList = L.geoJSON(data, {

              pointToLayer: function(feature, latlng) {

                     return L.marker(latlng, {

                            icon: styleFunction

                     });

              },

              onEachFeature: (feature, lay) => {

                     lay.on('click', () => {

                            this.$ownerInstance.callMethod('markertap', feature.properties);

                     })

              }

       });

    // 添加聚合标记点列表

       markerClusterLayer.addLayers(markerList);

       markerClusterLayer.addTo(this.map);

}

聚合后的样式，可以自定义css样式实现。