Poplet Leaflet với thông tin bổ sung từ GeoJSON

Question

gặp sự cố. tôi muốn ràng buộc các thông tin bổ sung từ geojson vào một popup đánh dấu tờ rơi. tra cứu một số thứ từ tài liệu hướng dẫn nhưng nó không hoạt động.

var map = L.map('map').setView([51.9, 7.6], 11); 
         L.tileLayer('http://{s}.tile.cloudmade.com/5e4495ff4b0d454eb0443225198b7e6c/997/256/{z}/{x}/{y}.png', { 
    attribution: 
     'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', 
     maxZoom: 16 
    }).addTo(map); 

var polygon = { 
    "type": "Feature", 
    "properties": { 
     "name":"City BoundingBox", 
     "style": { 
      "color": "#004070", 
      "weight": 4, 
      "opacity": 1 
     } 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [[ 
      [7.5,52.05],     
      [7.7,51.92], 
      [7.6,51.84], 
      [7.4,51.94], 
      [7.5,52.05] 
     ]] 
    } 
}; 

var myLayer = L.geoJson().addTo(map); 
//myLayer.addData(polygon); 

var popup = L.popup(); 

function onMapClick(e) { 
    popup 
     .setLatLng(e.latlng) 
     .setContent("You clicked the map at " + e.latlng.toString()) 
     .openOn(map); 
} 


map.on('click', onMapClick); 

<?php 
    $mdjson = file_get_contents("http://xxx/ows?service=WFS&version=1.0.0&outputFormat=JSON&request=GetFeature&typeName=xx:yy&maxFeatures=50"); 
    echo "var geojsonMD = ".$mdjson.";";  
?> 

myLayer.addData(geojsonMD); 

L.geoJson(geojsonMD, { 
    style: function (feature) { 
     return {color: feature.properties.color}; 
    }, 
    onEachFeature: function (feature, myLayer) { 
     layer.bindPopup(feature.properties.description); 
    } 
}).addTo(map); 

Hy vọng bạn có thể giúp tôi.

Trân trọng.

Answer 1

Giả sử dịch vụ trả về dữ liệu với các thuộc tính tương tự như đa giác, bạn thực sự có thể thêm chúng vào một và cùng một lớp.

var myLayer = L.geoJson(geojsonMD, { 
    style: function (feature) { 
     return feature.properties.style; 
    }, 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup(feature.properties.name); 
    } 
}) 

myLayer.addData(polygon); 
myLayer.addTo(map); 

http://jsfiddle.net/Wn5Kh/ (không có dữ liệu tải về, vì tôi không có URL)

Nếu geojsonMD có tính năng khác nhau, không có gì sai với việc thêm hai lớp GeoJSON. Một cho dữ liệu bạn truy xuất từ ​​dịch vụ và một với đa giác.

Answer 2

Như đã giải thích trong tài liệu Tờ rơi, bạn nên sử dụng "onEachFeature" để đính kèm một popup với các thông tin mong muốn cho mỗi tính năng của GeoJSON của bạn:

Tùy chọn onEachFeature là một chức năng mà được gọi là trên mỗi tính năng trước khi thêm nó vào lớp GeoJSON. Một lý do phổ biến để sử dụng tùy chọn này là để đính kèm một popup để tính năng khi họ được nhấp

Bạn có thể sử dụng nó theo cách này:

var myLayer = L.geoJson(polygon, { 
    onEachFeature: yourOnEachFeatureFunction 
}).addTo(map); 

function yourOnEachFeatureFunction(feature, layer){ 
    if (feature.properties.name) { 
     layer.bindPopup(feature.properties.name); 
    } 
} 

Trong ví dụ này popup sẽ hiển thị các nội dung của tên "thuộc tính" cho mỗi tính năng được nhấp

Answer 3

Bây giờ nó hoạt động. Tôi muốn tờ rơi tự động được coords và tính năng thông tin từ một wfs và thêm chúng vào bản đồ.

thats mã làm việc và nhờ sự giúp đỡ của bạn =)

<?php 
        echo "var geojsonMD = ".$mdjson.";";  
?> 

myLayer.addData(geojsonMD); 

var myLayer = L.geoJson(geojsonMD, { 
style: function (feature) { 
    return feature.properties.style; 
}, 
onEachFeature: function (feature, layer) { 

     var strtype = ''; 

     if (feature.properties.mdtype == 0) { 
      strtype = 'aaa'; 
     } else if (feature.properties.mdtype == 1) { 
      strtype = 'bbb'; 
     } 


    layer.bindPopup('<b>' + feature.properties.mdname + '</b><br>' 
         + strtype + '<br><br>' 
         + feature.properties.mdadress + '<br>' 
         + feature.properties.mdfon); 
    } 
    }) 
     myLayer.addTo(map);