Ulotka z dodatkowymi informacjami z GeoJSON

Question

ma problem. Chcę powiązać dodatkowe informacje od geojsona z wyskakującym znacznikiem ulotki. spojrzał na kilka rzeczy z dokumentacji ulotek, ale nie działa.

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

Spodziewać się można mi pomóc.

Pozdrawiamy.

Answer 1

Zakładając, że usługa zwraca dane o podobnych właściwościach co wielokąt, można je dodać do jednej i tej samej warstwy.

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/ (bez pobranych danych, bo nie mają URL)

Jeśli geojsonMD ma różne właściwości funkcji, nie ma nic złego w dodaniu dwóch warstw GeoJSON. Jeden dla danych pobieranych z usługi i jeden dla wielokąta.

Answer 2

Jak wyjaśniono w dokumentacji ulotce, należy użyć „onEachFeature”, aby dołączyć okienko z żądanej informacji do każdego elementu swojego GeoJSON:

Opcja onEachFeature to funkcja, która jest wywoływana na każdy funkcja przed dodaniem jej do warstwy GeoJSON. Częstym powodem korzystania tej opcji jest dołączenie okienko do funkcji, gdy są one kliknięty

można użyć go w ten sposób:

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

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

W tym przykładzie okienko pokaże zawartość właściwość "nazwa" dla każdego klikniętego obiektu

Answer 3

Teraz działa. Chciałem, aby ulotka automatycznie otrzymywała współrzędne i informacje o elementach z pliku WFS i dodawała je do mapy.

ów kodeksu pracy i dzięki za pomoc =)

<?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);