Eigenschaften von GeoJSON im Popup auf der Broschüre anzeigen?

9

Dies ist meine einfache GeoJSON mit Flugblattkarte. Ich möchte Eigenschaften als Popup anzeigen, weiß aber nicht, warum sie leer sind.

Kannst du mir meinen Fehler sagen?

<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
#map {
width: 960px;
height: 500px;
}
</style>
</head>

<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
    var map = L.map('map',{
    center: [49.833352, 18.163662],
    zoom: 10
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var data ={
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [
              23.4850463378073,
              46.7440954850672
            ]
          },
          "properties": {
            "f1": 11793,
            "f2": "BT"
          }
        }
      ]
    };

var layer = L.geoJson(data, {
}).addTo(map);
layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
</script>
</body>
</html>
leaflet geojson features popup Alex
quelle

Antworten:

18

Die Zeile, in der Sie Ihr Popup erstellen und binden, sollte in der onEachFeatureOption Ihrer L.geoJSONFactory enthalten sein.

var layerGroup = L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
  }
}).addTo(map);

Demo: http://playground-leaflet.rhcloud.com/wuseg/1/edit?html,output

Wenn diese Zeile außerhalb der Factory liegt, wird auf Ihre äußere Bereichsvariable layerzugegriffen, bei der es sich tatsächlich um die GeoJSON-Ebenengruppe handelt, die alle Funktionen aus Ihren GeoJSON-Daten enthält. Daher wird versucht, ein Popup für jede dieser Funktionen zu binden (in Ihrem Fall gibt es eine nur 1 Marker, aber es könnte mehr sein).

Vor allem kennt es keine featureVariable, die einen Fehler erzeugt.

Ghybs
quelle
3

Erstellen Sie auf einfache Weise einen einfachen Popup-Inhalt für alle Eigenschaften in einer Zeile:

var layer = L.geoJSON(data, {
 onEachFeature: function (f, l) {
   l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
 }
}).addTo(map);
stefcud
quelle
0

Sie können die folgenden Codes verwenden: 

function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.Name && feature.properties.Lat && feature.properties.Lon) {
        layer.bindPopup(feature.properties.Name+"("+feature.properties.Lat+","+feature.properties.Lon+")",);
    }
}
/// for Show in map marker style and popup
    L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }, 
    onEachFeature: onEachFeature

}).addTo(map);
M. Abrar Rubaiyat Islam
quelle
Wie kommt es, dass diese Antwort auch als Frage veröffentlicht wird: gis.stackexchange.com/questions/354704/… ?
TomazicM
Ich habe diesen Teil getan. Mein Attributwert wird jetzt auf Klickbasis angezeigt. Aber jetzt möchte ich dies als Etikett verwenden. Deshalb habe ich die Frage gestellt. Es fällt mir schwer, Geojson-Daten in einer Broschüre zu kennzeichnen.
M. Abrar Rubaiyat Islam