【问题标题】:Leaflet L.Icon marker not removing on Map reload传单 L.Icon 标记未在地图重新加载时移除
【发布时间】:2017-07-03 11:42:52
【问题描述】:

地图包含两种类型的标记 圆圈图标添加者:

      let circle = new customCircleMarker([item.latitude, item.longitude], {
        color: '#2196F3',
        fillColor: '#2196F3',
        fillOpacity: 0.8,
        radius: radM,
        addressId: item.address_id
      }).bindTooltip(`Address: <b>${item.address}</b><br/>
                   Patients from this address: <b>${item.total_patients}</b><br/>
                   Production: <b>$${item.total_production}</b><br/>`)
        .addTo(this.mapInstance).on('click', this.circleClick);

图标标记添加方式如下:

//创建标记对象,将自定义图标作为选项传递,将内容和选项传递给弹出窗口,添加到地图

      // create marker object, pass custom icon as option, pass content and options to popup, add to map
      L.marker([item.latitude, item.longitude], { icon: chartIcon })
        .bindTooltip(`Address: <b>${item.address}</b><br/>
                   Patients from this address: <b>${item.total_patients}</b><br/>
                   Production: <b>$${item.total_production}</b><br/>`)
        .addTo(this.mapInstance).on('click', this.circleClick);

在清除地图图标标记未删除

地图清空功能:

if (this.mapInstance) {
  for (let i in this.mapInstance._layers) {
    if (this.mapInstance._layers[i]._path !== undefined) {
      try {
        this.mapInstance.removeLayer(this.mapInstance._layers[i]);
      } catch (e) {
        console.log('problem with ' + e + this.mapInstance._layers[i]);
      }
    }
  }
}

【问题讨论】:

    标签: leaflet angular-leaflet-directive


    【解决方案1】:

    在删除之前,您正在检查 _path 属性。它将跳过 L.Marker 层,因为它们没有 _path 属性,只有矢量图层(从 L.Path 扩展)有。

    如果您只需要从地图中删除某些图层类型,最好将它们分组到L.LayerGroupL.FeatureGroup 之类的分组图层中,然后使用它们的clearLayers 方法:

    var layerGroup = new L.LayerGroup([
        new L.Marker(...),
        new L.CircleMarker()
    ]).addTo(map);
    
    layerGroup.clearLayers();
    

    如果这不是一个选项,您可以迭代地图的图层,然后检查图层的实例:

    function customClearLayers () {
        map.eachLayer(function (layer) {
            if (layer instanceof L.Marker || layer instanceof L.CircleMarker) {
                map.removeLayer(layer);
            }
        });
    }
    

    【讨论】:

    • 感谢您的信息。解决了(y)@iH8
    猜你喜欢
    • 1970-01-01
    • 2017-04-10
    • 1970-01-01
    • 2012-11-06
    • 1970-01-01
    • 2013-04-19
    • 2017-06-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多