Menampilkan properti GeoJSON di sembulan di Leaflet?

9

Ini adalah GeoJSON sederhana saya dengan peta Leaflet. Saya ingin menampilkan properti sebagai sembulan tetapi saya tidak tahu mengapa itu kosong.

Bisakah Anda ceritakan kesalahan saya?

<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>

— Alex
sumber

18

Baris tempat Anda membuat dan mengikat munculan Anda seharusnya sudah termasuk dalam onEachFeatureopsi L.geoJSONpabrik Anda .

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

Memiliki garis ini di luar pabrik membuatnya mengakses layervariabel lingkup luar Anda , yang sebenarnya adalah GeoJSON Layer Group yang menyimpan semua fitur dari data GeoJSON Anda, oleh karena itu ia mencoba untuk mengikat popup pada masing-masing fitur ini (dalam kasus Anda, ada hanya 1 penanda, tetapi bisa lebih).

Di atas semua itu, ia tidak tahu featurevariabel apa pun , yang menciptakan kesalahan.

— ghyb
sumber

3

Buat konten popup sederhana untuk properti apa pun dengan cara sederhana, dalam satu baris:

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

— stefcud
sumber

0

Anda dapat menggunakan kode di bawah ini:

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
sumber

Kenapa jawaban ini juga dipublikasikan sebagai pertanyaan: gis.stackexchange.com/questions/354704/… ?

— TomazicM

Saya telah melakukan bagian ini. nilai atribut saya sekarang ditampilkan berdasarkan klik. Tapi sekarang saya ingin menggunakan ini sebagai label. Inilah mengapa saya mengajukan pertanyaan. Saya kesulitan membuat label data geojson di leaflet.

— M. Abrar Rubaiyat Islam