【Leaflet】地图加载海量覆盖点

地图需要加载大量点位的时候，使用L.marker 方法来 addTo(map) ,会导致地图特别卡。

leaflet-canvas-marker 可以加载海量覆盖点。

1.加载方式

npm i  leaflet-canvas-marker  -s    

或者直接下载Leaflet.Canvas-Markers  在项目里面直接引入 https://github.com/eJuke/Leaflet.Canvas-Markers

2.使用

第一种加载方式：在项目里面直接使用import 引入

import 'leaflet-canvas-marker';

第二种方式：

<script type="text/javascript" src='<%= BASE_URL %>lib/leaflet/plugins/leaflet.canvas-markers.js'></script>

初始化地图

initLeaflet () {
      if (this.map) {
        this.map.remove()
      }
      this.map = this.initLeafletMap('grid_map')
    },

initLeafletMap = (id, zoom = 16) => {
    let normalMap = window.L.tileLayer.chinaProvider('Baidu.Normal.Map', {
        maxZoom: 18,
        minZoom: 10
    });
    let normal = window.L.layerGroup([normalMap])
    let map = window.L.map(id, {
        crs: window.L.CRS.Baidu,
        center: [36.717672, 119.160414],
        zoom: zoom,
        layers: [normal],
        zoomControl: true,
        trackResize: true
    });
    //初始化绘制插件
    window.L.PM.initialize();
    //中文
    map.pm.setLang('zh')

    // 比例尺
    window.L.control.scale({maxWidth:200,metric:true,imperial:false}).addTo(map)
    return map
},

加载海量点

loadMarkers () {
      // 清除海量点
      if (this.ciLayer) {
        this.map.removeLayer(this.ciLayer)
      }
      let params = {
        highLat: mapDrag(this.map)[0],
        highLng: mapDrag(this.map)[1],
        lowLat: mapDrag(this.map)[2],
        lowLng: mapDrag(this.map)[3]
      }
      // 接口请求海量点
      getMarkerList(params).then(res => {
        if (res.code === 0) {
          let data = res.data
          // 使用canvas模式渲染marker
          this.ciLayer = window.L.canvasIconLayer({}).addTo(this.map)

          data.forEach(res => {
            let iconUrl = require(`@/assets/marker/ic_marker_color_${res.color}.png`)
            let icon = window.L.icon({
              iconUrl: iconUrl,
              iconSize: [16, 25],
              iconAnchor: [8, 12.5]
            })
    
            res.list.forEach(retail => {
              let marker = window.L.marker([retail.latitude, retail.longitude], {
                icon: icon
              }).bindPopup('<div class="dialog-marker-warp">\n' +
                  '                <p class="flex-row marker-grid-name">' + res.gridName + '</p>\n' +
                  '                <p class="marker-shop-name">' + retail.name + '</p>\n' +
                  '                <p class="marker-address">' + retail.address + '</p>\n' +
                  '                <div class="flex-row marker-license">' +
                  '                  <p>证号：</p>' +
                  '                  <p>' + retail.no +'</p>' +
                  '                </div>\n' +
                  '                <div class="flex-row marker-name">' +
                  '                  <p>负责人：</p>' +
                  '                  <p>' + retail.userName +'</p>' +
                  '                </div>\n' +
                  '                <div class="flex-row marker-phone">' +
                  '                  <p>电&emsp;话：</p>' +
                  '                  <p>' + retail.userPhone +'</p>' +
                  '                </div>\n' +
                  '        </div>')
              this.ciLayer.addLayer(marker)
            })
          })

          // 以下, this.map.removeLayer(this.ciLayer) 后,优化清空后再加载marker偏移
          let center = this.map.getCenter()
          this.map.panTo([center.lat, center.lng], {
            animate: true
          })
        }
      })
    },

海量点的点击事件

loadMarkers () {
      // 清除海量点
      if (this.ciLayer) {
        this.map.removeLayer(this.ciLayer)
      }
      let params = {
        highLat: mapDrag(this.map)[0],
        highLng: mapDrag(this.map)[1],
        lowLat: mapDrag(this.map)[2],
        lowLng: mapDrag(this.map)[3]
      }
      // 接口请求海量点
      getMarkerList(params).then(res => {
        if (res.code === 0) {
          let data = res.data
          // 使用canvas模式渲染marker
          this.ciLayer = window.L.canvasIconLayer({}).addTo(this.map)

          data.forEach(res => {
            let iconUrl = require(`@/assets/marker/ic_marker_color_${res.color}.png`)
            let icon = window.L.icon({
              iconUrl: iconUrl,
              iconSize: [16, 25],
              iconAnchor: [8, 12.5]
            })
    
            res.list.forEach(retail => {
              let marker = window.L.marker([retail.latitude, retail.longitude], {
                icon: icon
              })
              // marker.on('click', (res) => {}) 点击事件无效

              this.ciLayer.addLayer(marker)
            })
          })

          // 覆盖点点击事件
          this.ciLayer.addOnClickListener((_, data) => {
            this.markerIconShow(data[0].data)
          })
          
          // 以下, this.map.removeLayer(this.ciLayer) 后,优化清空后再加载marker偏移
          let center = this.map.getCenter()
          this.map.panTo([center.lat, center.lng], {
            animate: true
          })
        }
      })
    },