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);
        }
      });
    }
  };

至此 使用海量点位插件 可以实现加载大量点位，对点位的操作功能