leaflet大量点数据的聚合效果

贴个群号

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);
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值