leaflet加载大数据（过万）

贴个群号

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

使用插件Leaflet.Canvas-Markers

引入插件

import "../../../../common/js/leaflet.canvas-markers.js"

使用

addMoreMarkerToMap(data, map) {
      const self = this;
      // 创建图层，添加到 map
      this.testLayer = L.canvasIconLayer({}).addTo(map);
      // 添加marker 与 popup
      data.forEach(e => {
        if (e.lgtd != null) {
          let popup = L.popup({ autoClose: false, closeButton: false })
            .setLatLng([e.lttd, e.lgtd])
            .setContent(
              `<div  class="popupCon"><div class="popupName" style="">站点ID</div><div class="popupValue" style="color:#000000!important;background:yellow!important;";>${e.stcd}</div></div>`
            );
          let marker = L.marker([e.lttd, e.lgtd], {
            icon: icon
          }).bindPopup(popup);
          // 把 Marker 添加到图层
          self.testLayer .addLayer(marker);
        }
      });
 }     

一般加载完之后，可能数据量太大，初始化的时候会与地图不重合，位置不对，这时候我们需要强制刷新一下

map.setZoom(map.getZoom() + 0.000001);