Блог

Главная - Вопросы по программированию - Как я могу увидеть информацию из всплывающей подсказки маркера круга, которая содержится в многоугольнике, у которого также есть всплывающая подсказка

Как я могу увидеть информацию из всплывающей подсказки маркера круга, которая содержится в многоугольнике, у которого также есть всплывающая подсказка

#leaflet #tooltip #overlapping

Вопрос:

Я очень новичок в листовке.

Ниже приведен мой код, в котором полигональный слой и точечный слой загружаются с геосервера через сервис wfs.

На каждом слое есть всплывающая подсказка. Когда два слоя не перекрываются, всплывающие подсказки работают должным образом. Когда точка перекрывает многоугольник, в ее положении отображается всплывающая подсказка многоугольника. К сожалению, для моих целей, когда две геометрии перекрываются, я хочу, чтобы отображалась только подсказка с маркером круга, что в точности противоположно тому, что происходит в настоящее время. Кажется, это своего рода проблема, которую для меня невозможно решить.

 <!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: 'amp;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=WFSamp;version=2.0amp;request=GetFeatureamp;typeName=deep_map:point_tooltip_testamp;outputFormat=text/javascriptamp;format_options=callback:getJson1amp;SrsName=EPSG:4326amp;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=WFSamp;version=2.0amp;request=GetFeatureamp;typeName=deep_map:polygon_tooltip_testamp;outputFormat=text/javascriptamp;format_options=callback:getJson2amp;SrsName=EPSG:4326amp;MaxFeatures=200',
  dataType: 'jsonp',
  jsonpCallback: 'getJson2',
  success: function(response) {
    WFSLayer2 = L.geoJson(response, {
      style: function(feature) {
        return {
          stroke: true,
          fillOpacity: 0
        };
      },
      onEachFeature: function(feature, 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,
          fillOpacity: 1,
          pane: "pointsPane"
        };
      },

With this, I was able to bring the points to the front and to make the tooltip work. Unfortunately, the tooltip for the polygon doesn’t show anymore!

I’m very new to Leaflet. I’m sure I’m missing something obvious but I’ve been racking my brain trying to see what I’m missing. I would really appreciate it if anyone is able to give me a workaround.

Thank you very much.

Метки: , ,