Leaflet从geojson获取id并将其绑定到popup

Question

var map = L.mapbox.map('map', undefined, options);
    map.setView([56.413300, 8.869450], 16)
    var markerpositions;
    map.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/satellite-streets-v9'));
   // L.Control.geocoder().addTo(map);
   var geocoder = L.control.geocoder('search-MKZrG6M').addTo(map);
    L.marker([56.41083875205333, 8.864636421203615], {icon: HydrantIcon}).addTo(map).bindPopup("Hydrant  1");
    L.marker([56.41069629842804, 8.868584632873537], {icon: HydrantIcon}).addTo(map).bindPopup("Hydrant  2");
    L.marker([56.40941419180167, 8.866181373596193], {icon: HydrantIcon}).addTo(map).bindPopup("Hydrant  3");
    var data = <?php echo JSON_encode($geojson); ?>;
    var geoJsonLayer = L.geoJson().addTo(map);
function requestGeoJson(){
    fetch('https://laerkeholt.dk/admin/get-features')
      .then(function(response){ return response.json() })
      .then(function(json){
         geoJsonLayer.clearLayers().addData(json).bindPopup('ID: + IDHERE');
         var http = new XMLHttpRequest();
         var url = "https://maker.ifttt.com/trigger/vandingsmaskine/with/key/";
          http.open("POST", url, true);
          http.send(JSON.stringify({"value1": "ID 1"}));
          var hydrat1 = [56.41083875205333, 8.864636421203615];
          var hydrat2 = [56.41069629842804, 8.868584632873537];
          var hydrat3 = [56.40941419180167, 8.866181373596193];
          var test = L.latLng(json).distanceTo(hydrat1);
          <?php echo $test ?>
    
         setTimeout(requestGeoJson, 5000);
      });
};
requestGeoJson();

        

So basically I want to have it so geoJsonLayer binds a popup with the id it got for the response JSON so each marker would be assigned its specific id from the response JSON. I have tried todo json.properties.id to try and get the ID

</div>

Answer 1

You can use either pointToLayer or onEachFeature for this.

When you instantiate the geoJSON layer, use this:

var geoJsonLayer = L.geoJson(false, {onEachFeature: addMyPopup}).addTo(map);

// Initialise the three reference points
var hydrat1 = L.latLng(<..>, <..>);
var hydrat2 = L.latLng(<..>, <..>);
var hydrat3 = L.latLng(<..>, <..>);

// This gets called for every point in the GeoJSON
function addMyPopup ( feature, layer) {
if ((layer.getLatLng().distanceTo(hydrat1) < 5)
  ||(layer.getLatLng().distanceTo(hydrat2) < 5)
  ||(layer.getLatLng().distanceTo(hydrat3) < 5)) {
    // Do something
  }
  layer.bindPopup("My ID is: " + feature.properties.id);