Leaflet问题

1. 地图二次加载残缺

重新渲染地图

this.map._onResize()

2. marker添加文字标记

 L.marker([32.28343201224245, 119.11634445190431]).bindTooltip(item.address, 
 {
       permanent: true, 
       direction: 'right'
   }).addTo(map);

})

1. 删除marker

试过多种方法，包括获取所有图层然后循环删除除了地图之外的所有图层。确实能够删除，但偶尔会出现图片加载不全问题/只有如下方式最可靠！
1）以组别添加

 var layers = []
 var layer = new L.marker(positions);
 layers.push(layer);
 globalData.markerGroup = L.layerGroup(layers);
 map.addLayer(globalData.markerGroup);

2）以组别方式删除

globalData.markerGroup.clearLayers();

4. marker添加属性值

var marker= L.marker(item.coordinate.split(',')).bindTooltip(item.address, 
{
    permanent: true, 
    direction: 'right',
})
Object.defineProperties(
    marker, {
    id: {
        value:item.id
    }
});
// marker点击事件
marker.on('click',(e)=>{
    const attr = e.target.id
    const markList = that.getValue('points')
    if (markList) {
        if (!markList.includes(attr)) {
            markList.push(attr)
            that.setValue({points: markList})
        }
    } else {
        const markList_2 = []
        markList_2.push(attr)
        that.setValue({points: markList_2})
    }
});

5.自定义地图图层切换样式

![效果](https://img-blog.csdnimg.cn/3948f99504394fefb8102479646c7b98.png#pic_center)

1）html

    <div :id="containerId" class="superMap-9136076486841527" tabindex="0" style="height: 835px; width: 100%; position : relative">
      <input type="checkbox" class="mapRadio" @click="changeLayer">
      <div class="mapChange" />
    div>

2）JS

createMap() {
      // 地图底图加载start
      // 影像图
      var yx_yz = this.mapLoad(this.mbtilesUrl)
      var yx_yq = this.mapLoad(this.url)
      var yxMap = L.layerGroup([yx_yz, yx_yq])
      // 矢量
      var sl_yq = this.mapLoad(this.sl_url)
      var slMap = L.layerGroup([sl_yq])
      var baseLayers = {
        '影像': yxMap,
        '矢量': slMap
      }
      // 地图底图加载start
      this.map = L.map(this.containerId, {
        center: [32.28119, 119.11477],
        minZoom: 13,
        zoom: 14,
        crs: L.CRS.EPSG3857,
        layers: [yxMap] // 默认图层展示
      })
      this.map.on('mousemove', (e) => {
        this.currentPosition = e.latlng.lat + ',' + e.latlng.lng
      })
      const defaultIcon = L.icon({
        iconUrl: icon,
        shadowUrl: iconShadow
      })
      L.Marker.prototype.options.icon = defaultIcon
      // 加载切换地图的功能（出现在页面右上角，可通过css隐藏）
      L.control.layers(baseLayers, null).addTo(this.map)
      // 保存切换地图功能的dom,为了保证保存的dom的正确性，尽量写详细
      // eslint-disable-next-line no-unused-vars
      for (const node of document.querySelectorAll('.leaflet-control-layers-base label')) {
        this.mapLayer[node.innerText.trim()] = node.querySelector('input')
      }
      this.map._onResize()// 刷新尺寸
      // 地图底图加载end
    }

	changeLayer(e) {
      if (e.target.checked) {
        this.changeMapType('矢量')
      } else {
        this.changeMapType('影像')
      }
    },
    mapLoad(url) {
      return L.supermap.tiledMapLayer(url, {
        cacheEnabled: true
      })
    },
    // 模拟点击
    changeMapType(value) {
      // this.mapType = value
      this.mapLayer[value].click()
    }

css

.superMap-9136076486841527 {
  .mapChange, .mapRadio{
    height: 100px;
    width: 100px;
    /*background-color: pink;*/
    background: url("~@/assets/images/mapBg1.png") no-repeat;
    background-size: 100% 100%;
    z-index: 999 !important;
    position: absolute;
    top : calc(100% - 150px);
    left : calc(100% - 100px);
    border: 1px solid #ffffff;
    border-radius: 10px;
    transform: translateY(0px);
    transition: transform 0.8s;
    box-shadow: 0 0 10px 10px transparent;
  }

  /*多选框按钮层级提高与隐藏*/
  .mapRadio{
    z-index: 1000 !important;
    opacity: 0;
    :checked~ .mapChange{
      background-image: url("~@/assets/images/mapBg2.png");
    }
  }
}

移动中心点

this.map.panTo(new L.LatLng(parseFloat(lastPos[1]), parseFloat(lastPos[0])))

https://juejin.cn/post/6844903935929499656