时间戳

首页 > 解决方案 > Ionic + Leaflet 如何在重绘之前清除现有图层？

ionic-framework - Ionic + Leaflet 如何在重绘之前清除现有图层？

问题描述

我正在使用 Leaflet 和我的 ionic 应用程序在上传的平面图上绘制多边形。一切都很好。在重新绘制地图之前，我无法清除现有的多边形 - 这导致多个图层堆叠在一起。

到目前为止，这是我正在做的事情：

.ts 文件

ngOnInit() {
    // get saved polygons from db
   ...
   .subscribe((res => {
       res.forEach(data => {
           this.drawPolygon(data);
       });
   }));
}

...


// Draw each of the saved polygons
drawPolygon(data) {
    if (data.polygon.geometry) {
        let shape = {
            polygon: data,
            type: data.polygon.type,
            geometry: {
                type: data.polygon.geometry.type,
                coordinates: data.polygon.geometry.coordinates
            },
            properties: {}
        };

        // Remove all existing layers


        L.geoJSON(shape, {
            onEachFeature: this.onEachFeature.bind(this),
        }).addTo(this.myMay);
    }
}


// onEachFeature method to trigger popover
onEachFeature(feature, layer) {
    layer.on('click', event => {
        let popover = this.popoverCtrl.create('MyComponent', {
        layer: feature
    });

    popover.present();

    }, this);
}

我尝试了各种方法，removeLayer甚至clearLayers没有运气删除地图。任何建议都非常感谢！

编辑

如果我在完成所有操作后刷新页面，则所有附加层都将被删除 - 单个层保持原样。

标签： ionic-frameworkleafletleaflet.draw

解决方案

要删除所有图层，假设您的地图对象称为 myMap，以下代码应该可以工作：

myMap.eachLayer(function (layer) {
    myMap.removeLayer(layer);
});

不过，我不会把它放在 drawPolygon 中 - ngOnInit 或调用它的地方似乎是在添加新数据之前清除地图数据的更好地方。

推荐阅读