leaflet 批量加载、清除marker

leaflet 批量加载、清除marker

1、拿到原始数据循环遍历
2、获取每个marker添加到地图上

var polygon = L.marker(item.center,{ //item.center---每个点的中心坐标
  icon: L.divIcon({
     iconAnchor: [0, 0],
     iconSize: [28,28],
     html: `<div>.....</div>`, //html
     className: 'marker_all_style',//样式class定义
   })
 }).addTo(window.map);

3、添加到地图后，数据动态获取，动态加载marker，地图上已有的marker清除后重新绘制新的，保证与数据同步

//清空地图上已存在的marker
if (that.layerGroup !== null) {
	that.layerGroup.clearLayers(); //批量移除图层
}
layers.push(polygon);
//在此对layerGroup赋值
that.layerGroup = L.layerGroup(layers); //L.layerGroup----存储标记marker，整体进行处理
window.map.addLayer(that.layerGroup);

完整代码

// 地图上添加marker
 function getSmartSignList(val) { //val---原始数据
      let that = this;
      // 清空地图上已存在
      if (that.layerGroup !== null) {
        that.layerGroup.clearLayers();
      }
      if (val.rows || val.data) {
        var layers = [];
        var polygon = null;
        (val.rows || val.data).map((item, index) => {
          let center;
            if (
            (item.reDevicePosition &&
            item.reDevicePosition.indexOf(",") != -1)
          ) {
            center = item.reDevicePosition.split(",");
          }
          item.center = [Number(center[1]), Number(center[0])]; //获取mraker中心坐标
          var polygon = L.marker(item.center,{
		    icon: L.divIcon({
		      iconAnchor: [0, 0],
		      iconSize: [28,28],
		      html: `<div>.....</div>`, //html
		      className: 'marker_all_style',//样式class定义
		    })
		  });
          polygon.on('click', function() {
          // .........点击marker的操作
          });
          polygon.on("mouseover", e => {
           // .........鼠标移入marker的操作
          })
          polygon.on("mouseout", e => {
             // .........鼠标移出marker的操作
          })
          layers.push(polygon);
          polygon.addTo(window.map);
        //在此对layerGroup赋值
        that.layerGroup = L.layerGroup(layers);
        window.map.addLayer(that.layerGroup);
      }
    },