如何在 Leaflet.draw 中编辑弹出窗口

Question

我正在使用 Leaflet 和 Leaflet.draw 创建地图。当我在地图上绘制一个矩形（作为用户）时，以下代码写出矩形的 LatLng 边界。

    // add the newly drawn items to a layer
    map.on('draw:created', function (e) {
        var type = e.layerType,
            layer = e.layer;

        // binds things upon creation
        if (type === 'rectangle') {
            var bounds = layer.getBounds();
            layer.bindPopup(bounds.getNorthWest().toString() + "NW" + bounds.getSouthEast().toString() + "SE");
        }

        drawnItems.addLayer(layer);
    });

我想在用户编辑矩形时更新它。我认为应该使用 'draw:edited' 事件和“_popup.SetContent”来更新类似的内容，但是 LatLng 不会更新。

    // update LatLng when edited
    map.on('draw:edited', function (e) {
        var type = e.layerType,
            layer = e.layer;

        // update popup
        if (type === 'rectangle') {
            var bounds = layer.getBounds();
            layer._popup.SetContent(bounds.getNorthWest().toString() + "NW" + bounds.getSouthEast().toString() + "SE");
        }
    });

添加第二个代码块也意味着我只能编辑创建的第一个矩形。所以它显然不起作用，但我不知道为什么。

Answer 1

我明白了。对于draw:edited event, I needed to use the eachLayer方法遍历e.layers中的每一层，然后instanceof检查层类型。我还绑定了一个新的弹出窗口，而不是编辑旧的弹出窗口。

这是代码，它在弹出窗口中也有一个换行符以使其更具可读性：

    // update LatLng value
    map.on('draw:edited', function (e) {
        var layers = e.layers;

        layers.eachLayer(function (layer) {
            // do whatever you want to each layer, here update LatLng
            if (layer instanceof L.Rectangle) {
                var bounds = layer.getBounds();
                layer.bindPopup(bounds.getNorthWest().toString() +  " NW<br>" + bounds.getSouthEast().toString() + " SE");
            }
        });
    });

感谢 this question about retrieving layer type on edit 为我指明了正确的方向。

如何在 Leaflet.draw 中编辑弹出窗口

How to edit a popup in Leaflet.draw

javascript

leaflet

gis

leaflet.draw