leaflet 加載海量點位，點擊marker 查看詳情功能

在開發有地圖需要加載大量點位的時候，就不能使用L.marker 方法來 addTo(map) ,這樣會導致地圖特別卡，下面我們用一個插件

Leaflet.Canvas-Markers  .

github地址:https://github.com/eJuke/Leaflet.Canvas-Markers   裏面有詳情的api調用方法。 

接下來我們在項目裏面使用

1.加載方式

2種方法加載 

cnpm i  leaflet-canvas-marker  -S       

或者直接下載Leaflet.Canvas-Markers  在項目裏面直接引入

2.使用

我是使用的cnpm 安裝的所以在項目裏面直接使用import 引入

import 'leaflet-canvas-marker';

項目使用的天地圖，具體使用方法可以查找案例，或者使用leaftlet 官方使用的 openstreetmap.

首先聲明 

let ciLayer = null;

然後在initMap 初始化地圖的時候調用，通過github 裏面的api 可以知道addOnClickListener 是查看點擊了哪個marker 其中data可以取到定義的數據

    ciLayer = L.canvasIconLayer({}).addTo(map);
    ciLayer.addOnClickListener(function(e, data) {
      markerIconShow(data[0].data);
    
    });

接下來 我們隨意定義幾個點位增加到地圖上,其中 使用再定義一個addMarker 來定義一些marker的樣式大小等屬性

let listIcon=[
      {id:100,locationName:"測試路",goTime:"8:41",stopTime:"1h19min",lat:36.95903,lng:118.099474},
      {id:110,locationName:"測試2",goTime:"9:41",stopTime:"1h19min",lat:36.95891,lng:118.105649},
      {id:120,locationName:"測試3",goTime:"9:41",stopTime:"1h19min",lat:36.954315,lng:118.099383},
      {id:130,locationName:"測試4",goTime:"10:41",stopTime:"1h19min",lat:36.95903,lng:118.099474}
  
  ]

 addMarker(listIcon)

addMarker方法展示

 重點是   ciLayer.addLayers(_markers),將構建好的marker添加到海量點位插件裏面，其中用到的 iconTemplate 就是圖片地址  "xxx.png"

  //添加標註
  const addMarker = data => {
    let arr = data,
      _markers = [],
      type = markerType;
    if (map) {
      arr.forEach((elem, index) => {
        if (type === "icon") {
          let iconHtml = ``;
          iconHtml = iconTemplate(elem.type);
          let Opts = ``;
          Opts = L.divIcon({
            iconUrl: iconHtml,
            iconSize: [24, 24],
            iconAnchor: [12, 12],
            className: `${
              elem.state
                ? `device device-${index} marker-status-${elem.type} `
                : `device  marker-status-${elem.type}  unnormal `
            }`
          });
          let marker = L.marker([elem.lat, elem.lng], { icon: Opts });
          marker.data = elem;
          marker.bindTooltip(`<span>${elem.title}</span>`, {
            offset: [10, -10],
            direction: "right"
          });
          markers.push(marker);
          _markers.push(marker);
        }
      });
      ciLayer.addLayers(_markers);
    }
  };

markerIconShow方法展示

此方法主要是用於在點擊了之後可以查看點擊的詳情，彈出框向用戶展示.注意:若不是純文本，裏面有功能按鈕需要使用L.popup 來綁定彈框方法，若使用bindPopup會導致彈框點擊第二次點擊事件無效的BUG。

其次，再L.popup裏面使用addEventListener  來點擊按鈕 要給一個setTimeout 否則會導致 'addEventListener of null'

 const markerIconShow = data => {
 
  let marker = data;
   
      ajax({
        url: "/api/task/local_detail",
        data: { type: marker.data.type, id: marker.data.id }
      }).then(res => {
        let infoTem = ``;
        infoTem = infoTemplate(res.data, marker.data.type);
        let markerCenter = [marker.data.lat, marker.data.lng];
        // marker.bindPopup(infoTem,{className:"marker-popup"}).openPopup()
        let arr = [];
        let popup = L.popup({
          className: "marker-popup"
        })
          .setLatLng(markerCenter)
          .setContent(infoTem)
          .addTo(map);
        arr.push(popup);
        map.flyTo(markerCenter, 11);
        }
        if (document.getElementById("path-click")) {
          setTimeout(() => {
            document
              .getElementById("path-click")
              .addEventListener("click", function(e) {
                let id = e.target.dataset.id,
                  type = e.target.dataset.type;
                map.closePopup();
                mapRemove(arr);
                pathOut();
                setOutStatus(false);
                pathFun(id, type);
              });
          }, 100);
        }
      });
    }
  };

至此 使用海量點位插件 可以實現加載大量點位，對點位的操作功能