如何使用 leaflet.pm 将标记添加到多边形图层上？

Question

添加线和多边形没有问题，但是当尝试在多边形图层顶部添加标记时 ("lyrPoly")，它解释为我想单击多边形（例如打开弹出窗口）而不是添加标记。我怎样才能避免这种情况？我正在使用 leaflet.pm 添加标记、线串和多边形。

这是标记的代码：

map.on('pm:create', function(e) {
                e.marker;
                var type = e.layerType,
                    layer = e.layer;
                $(document).ready(function() {
                    var jsnMarker = layer.toGeoJSON().geometry;
                        jsnMarker = {
                            type: "MultiPoint",
                            coordinates: [jsnMarker.coordinates]
                        };
                })
            });

    $(function() {
        $('.check').change(function() {
            var data = $(this).val();
            if (data == "versionOne") {
                var markerStyle = {
                    draggable: false,
                    icon: customIcon,
                };
                var options = {
                    markerStyle,
                }
                map.pm.enableDraw('Marker', options);
             } else if (data == "versionTwo") {
                var markerStyle = {
                    draggable: false,
                    icon: otherIcon,
                };
                var options = {
                    markerStyle,
                }
                map.pm.enableDraw('Marker', options);
            }
        $('.check').trigger('change');
    });

在 ajax 函数中我使用了这个：


   lyrMarker = L.geoJSON(jsnMarker, {
                    pointToLayer: function (feature, latlng) {
                       if(feature.properties.marker_type=="versionOne"){
                        return L.marker(latlng, {
                            icon: customIcon
                        })
                             }else if 
                        (feature.properties.marker_type=="versionTwo"){
                                 return L.marker(latlng, {
                            icon: otherIcon
                        }) 
                             } ,
                    onEachFeature: forEachMarker
                });

对于多边形层，我有一个相应的 "onEachFeature"-函数，如下所示：

function forEachFeature(feature, layer) {
    var att = feature.properties;

    var popupContent =
        "Popup-content" ;
    layer.bindPopup(popupContent, {
        offset: [0, -120]
    });
    layer.on("click", function (e) {
        lyrPoly.setStyle(style); //resets layer colors
        layer.setStyle(highlight); //highlights selected.
 });
};

将标记添加到 background/basemap 可以正常工作，但不能添加到多边形图层上。为什么会这样，什么是好的解决方案？我不想将标记添加到与多边形相同的图层，但要避免多边形 "getting in the way"。

我有过在添加标记模式下制作多边形图层 interactive: false 的想法，但没有成功。

Answer 1

更新您的点击事件并测试是否启用绘图模式：

function forEachFeature(feature, layer) {
    var att = feature.properties;

    var popupContent =
        "Popup-content" ;
    layer.bindPopup(popupContent, {
        offset: [0, -120]
    });
    layer.on("click", function (e) {
        if(!map.pm.Draw.Marker.enabled()){
            lyrPoly.setStyle(style); //resets layer colors
            layer.setStyle(highlight); //highlights selected.
        }
 });
};

更新要禁用弹出打开事件，请在文件顶部添加以下代码。在使用弹出窗口创建图层之前：


L.Layer.include({

_openPopup: function (e) {
        var layer = e.layer || e.target;

        //This IF is new
        if(map.pm.Draw.Marker.enabled()){
           return;
        }

        if (!this._popup) {
            return;
        }

        if (!this._map) {
            return;
        }

        // prevent map click
        L.DomEvent.stop(e);

        // if this inherits from Path its a vector and we can just
        // open the popup at the new location
        if (layer instanceof L.Path) {
            this.openPopup(e.layer || e.target, e.latlng);
            return;
        }

        // otherwise treat it like a marker and figure out
        // if we should toggle it open/closed
        if (this._map.hasLayer(this._popup) && this._popup._source === layer) {
            this.closePopup();
        } else {
            this.openPopup(layer, e.latlng);
        }
    },
});

示例：https://jsfiddle.net/falkedesign/dg4rpcqe/

如何使用 leaflet.pm 将标记添加到多边形图层上？

How to add marker onto polygon layer using leaflet.pm?

leaflet

leaflet-geoman

leaflet.pm