leaflet大量点数据的聚合效果_leaflet 海量数据

贴个群号

WebGIS学习交流群461555818，欢迎大家。

引入

npm install leaflet.markercluster

import 'leaflet.markercluster'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
1
2
3
4
5

使用

    // 增加聚合点功能
    addToMap(data, map) {
      this.testLayer = L.markerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });
      data.forEach(e=>{
          if(e.lttd){
            let popup = L.popup()
                          .setLatLng(L.latLng(e.lttd, e.lgtd))
                          .setContent(self.loadNormalPopup(e,{lat:e.lttd,lng:e.lgtd},'tpz'))
            var m = L.marker(L.latLng(e.lttd, e.lgtd), { icon: self.getIconYinhuandian(tpz)}).bindPopup(popup);
            self.testLayer.addLayer(m);
          }
      })
      map.addLayer(this.testLayer);
      map.setZoom(map.getZoom() + 0.000001);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15