Блог

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

1. получить объект ‘lay1’ или ‘lay2’;
2. получить объект, на который был нажат;
3. получить все свойства объекта, на который был нажат?

 <div id="map" style="width: 600px; height: 400px;"></div>
<script>
    let map = L.map('map').setView([10.1497326, -67.9283981], 7);

    let data1 = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-67.9283981, 10.1497326]
        },
        "properties": {
          "id": 10,
          "text": "Marker1"
        }
      }]
    };

    let data2 = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-68.9283981, 11.1497326]      
        },
        "properties": {
          "id": 20,
          "text": "Marker2"
        }
      }]
    };

    let lay1 = L.geoJson(data1, {
      onEachFeature: function(feature, layer) {
        layer.bindPopup(
            feature.properties.id   '<br />'   
          '<button id="open-div">Info</button>');
      }
    });

    let lay2 = L.geoJson(data2, {
      onEachFeature: function(feature, layer) {
        layer.bindPopup(
        feature.properties.id   '<br />'         
          '<button id="open-div">Info</button>');
      }
    });

    lay1.addTo(map);
    lay2.addTo(map);

    map.on('popupopen', function (e) {
        $('#open-div').click(function (e) {
          $(".leaflet-popup-close-button")[0].click();
          showInfo();
      });
    });

    function showInfo() {
      // 1) How to get 'lay1' or 'lay2' object
      // 2) How to get feature which was clicked
      // 3) How to get all feature properties which was clicked
      alert('Info');
    }
</script>
  

Получите из всплывающего окна источник (маркер), а затем получите функцию и свойства

 map.on('popupopen', function (e) {
  var layer = e.popup._source;

  $('#open-div').click(function (e) {
     $(".leaflet-popup-close-button")[0].click();
     showInfo(layer); // <-- pass layer to the function
  });
});

function showInfo(layer) {
  var properties = layer.feature.properties;
  console.log(properties)
}