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

Question

我正在使用传单和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);
    });

当矩形由用户编辑时，我想要更新它。我认为这样的东西应该使用‘抽签:编辑’事件和‘_popup.etContent’更新，但是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

我想通了。对于抽签:编辑事件，我需要使用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");
            }
        });
    });

感谢有关在编辑时检索层类型的问题为我指明了正确的方向。