Hiển thị thuộc tính của GeoJSON trong cửa sổ bật lên trên Tờ rơi?

9

Đây là GeoJSON đơn giản của tôi với bản đồ Tờ rơi. Tôi muốn hiển thị các thuộc tính dưới dạng cửa sổ bật lên nhưng tôi không biết tại sao nó trống.

Bạn có thể cho tôi biết sai lầm của tôi?

<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
nguồn

18

Dòng nơi bạn tạo và liên kết cửa sổ bật lên của bạn nên được bao gồm trong onEachFeaturetùy chọn của L.geoJSONnhà máy của bạn .

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

Bản trình diễn: http://playground-leaflet.rhcloud.com/wuseg/1/edit?html,output

Có dòng này bên ngoài nhà máy làm cho nó truy cập vào layerbiến phạm vi bên ngoài của bạn , thực sự là Nhóm Lớp GeoJSON chứa tất cả các tính năng từ dữ liệu GeoJSON của bạn, do đó, nó cố gắng liên kết một cửa sổ bật lên trên mỗi tính năng này (trong trường hợp của bạn, có chỉ có 1 điểm đánh dấu, nhưng nó có thể nhiều hơn).

Trên hết, nó không biết bất kỳ featurebiến nào tạo ra lỗi.

— ghybs
nguồn

3

Xây dựng nội dung bật lên đơn giản cho bất kỳ thuộc tính nào theo cách đơn giản, trong một dòng:

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

— khuôn mặt
nguồn

0

Bạn có thể sử dụng các mã dưới đây:

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 Hồi giáo
nguồn

Làm thế nào mà câu trả lời này cũng được xuất bản dưới dạng một câu hỏi: gis.stackexchange.com/questions/354704/ Đây ?

— TomazicM

Tôi đã thực hiện phần này. giá trị thuộc tính của tôi hiện đang hiển thị trên cơ sở nhấp chuột. Nhưng bây giờ tôi muốn sử dụng nó như là nhãn hiệu. Đây là lý do tại sao tôi đã đặt câu hỏi. Tôi thấy thật khó để tạo nhãn dữ liệu Geojson trong tờ rơi.

— M. Abrar Rubaiyat Hồi giáo