如何从圆形标记的工具提示中查看信息，该圆形标记包含在也有工具提示的多边形内

如何解决如何从圆形标记的工具提示中查看信息，该圆形标记包含在也有工具提示的多边形内

我对传单很陌生。

下面是我的代码，其中多边形层和点层通过 wfs 服务从 Geoserver 加载。

每一层都有一个工具提示。当两个图层不重叠时，工具提示会按预期工作。当一个点与多边形重叠时，在其位置上会显示多边形的工具提示。不幸的是，出于我的目的，当两个几何图形重叠时，我只想显示圆形标记工具提示，这与当前的行为完全相反。对我来说，这似乎是一种无法解决的问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <title>Example Leaflet</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
  </head> 
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html,body,#map {
      height: 100%;
    }
  </style>

  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>

var map = new L.Map('map');

var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

var myRenderer = L.canvas({padding: 0.5});

var dataset = new L.layerGroup().addTo(map);

$.ajax({
  url: 'http://46.101.36.208:8080/geoserver/ows?service=WFS&version=2.0&request=GetFeature&typeName=deep_map:point_tooltip_test&outputFormat=text/javascript&format_options=callback:getJson1&SrsName=EPSG:4326&MaxFeatures=200',dataType: 'jsonp',jsonpCallback: 'getJson1',success: function(response) {
    WFSLayer1 = L.geoJson(response,{
      style: function(feature) {
        return {
          color: '#696969'
        };
      },pointToLayer: function (feature,latlng) {
            return L.circleMarker(latlng,{
            renderer: myRenderer
            });
        },onEachFeature: function(feature,layer) {
        
        var popupText = '';
        
        if (feature.properties.NOMECOMUNE) {
            popupText += "<b>NOMECOMUNE: </b>" + feature.properties.NOMECOMUNE + "<br />";
        }
        
        if (feature.properties.CIVICO) {
            popupText += "<b>CIVICO: </b>" + feature.properties.CIVICO + "<br />";
        }
        
        layer.bindTooltip(popupText,{'sticky': true});
      }
    }).addTo(dataset);
    // map.fitBounds(WFSLayer1.getBounds());
  }
});

$.ajax({
  url: 'http://46.101.36.208:8080/geoserver/ows?service=WFS&version=2.0&request=GetFeature&typeName=deep_map:polygon_tooltip_test&outputFormat=text/javascript&format_options=callback:getJson2&SrsName=EPSG:4326&MaxFeatures=200',jsonpCallback: 'getJson2',success: function(response) {
    WFSLayer2 = L.geoJson(response,{
      style: function(feature) {
        return {
          stroke: true,fillOpacity: 0
        };
      },layer) {
        var popupText = '';
        
        if (feature.properties.NOMECOMUNE) {
            popupText += "<b>NOMECOMUNE: </b>" + feature.properties.NOMECOMUNE + "<br />";
        }
        
        if (feature.properties.ZONA) {
            popupText += "<b>TIPO ZONA: </b>" + feature.properties.ZONA + "<br />";
        }
        
        if (feature.properties.DEN_FI) {
            popupText += "<b>AREA DI RISPETTO: </b>" + feature.properties.DEN_FI + "<br />";
        }
        
        if (feature.properties.TR_VINC) {
            popupText += "<b>TRATTO VINCOLATO: </b>" + feature.properties.TR_VINC + "<br />";
        }
        
        if (feature.properties.DESCRIZION) {
            popupText += "<b>CATEGORIA FORESTALE: </b>" + feature.properties.DESCRIZION + "<br />";
        }
        
        if (feature.properties.GIARDINI) {
            popupText += "<b>PRESENZA GIARDINI: </b>" + feature.properties.GIARDINI + "<br />";
        }
        
        if (feature.properties.STAB_INDUS) {
            popupText += "<b>STABILIMENTO A RISCHIO INCIDENTE GRAVE: </b>" + feature.properties.STAB_INDUS + "<br />";
        }
        
        if (feature.properties.CHANGETYPE) {
            popupText += "<b>VARIAZIONI: </b>" + feature.properties.CHANGETYPE + "<br />";
        }
        
        layer.bindTooltip(popupText,{'sticky': true});
      }
    }).addTo(map);
    map.fitBounds(WFSLayer2.getBounds());
  }
});

map.on('zoomend',function() {
    if (map.getZoom() < 16){
            map.removeLayer(dataset);
    }
    else {
            map.addLayer(dataset);
        }
});

var BaseMap = {
"Base map": map
};

L.control.layers(BaseMap).addTo(map);

    </script>
</html>

我的尝试

我尝试为每个图层创建两个明确的单独窗格，如下所示：

map.createPane("polygonsPane");
map.createPane("pointsPane");
map.getPane('pointsPane').style.zIndex = 750;
map.getPane('polygonsPane').style.zIndex = 350;

然后我将每个图层分配到 style 部分内的窗格中。

对于多边形层：

style: function(feature) {
        return {
          stroke: true,fillOpacity: 1,pane: "polygonsPane"
        };
      },

对于点层：

style: function(feature) {
        return {
          stroke: true,pane: "pointsPane"
        };
      },

通过这个，我能够将点放在前面并使工具提示起作用。不幸的是，多边形的工具提示不再显示！

我对 Leaflet 很陌生。我确定我遗漏了一些明显的东西，但我一直在绞尽脑汁想看看我遗漏了什么。如果有人能给我一个解决方法，我将不胜感激。

非常感谢。

如何从圆形标记的工具提示中查看信息，该圆形标记包含在也有工具提示的多边形内

如何解决如何从圆形标记的工具提示中查看信息，该圆形标记包含在也有工具提示的多边形内

相关推荐