获取弹出打开事件上的 Leaflet 功能属性

ege*_*geo 1 javascript leaflet

我创建了几个 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>
Run Code Online (Sandbox Code Playgroud)

Fal*_*ign 5

从弹出窗口获取源(标记),然后获取功能和属性

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)
}
Run Code Online (Sandbox Code Playgroud)