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.
 });
};

将标记添加到背景/底图效果很好，但不能添加到多边形图层上。为什么会这样，什么是好的解决方案？我不想将标记添加到与多边形相同的图层中，但要避免多边形“妨碍”。

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

Answer 1

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

updateContactPath(path, index) {
    const { contactPaths } = this.state;
    const { setFieldValue } = this.props;
    contactPaths[index] = path;
    this.setState(
      {
        contactPaths,
      },
      () => setFieldValue('contactPaths', contactPaths),
    );
  }

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

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.
        }
 });
};

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

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

1 个答案: