leaflet大量点数据的聚合效果

有玉微凉，是为樱琅

已于 2024-01-15 17:29:29 修改

阅读量731

点赞数

CC 4.0 BY-SA版权

分类专栏： mapbox+leaflet 文章标签： javascript 前端 html

于 2023-04-07 15:56:30 首次发布

本文链接：https://blog.youkuaiyun.com/Sakura1998gis/article/details/130014330

mapbox+leaflet 专栏收录该内容

64 篇文章

订阅专栏

贴个群号

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

引入

npm install leaflet.markercluster

import 'leaflet.markercluster'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'

使用

    // 增加聚合点功能
    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);
    },