Broschüre Popup mit zusätzlichen Informationen von GeoJSON

Question

habe ein Problem. Ich möchte die zusätzlichen Informationen von Geojson an ein Merkzettel-Popup binden. habe ein paar Dinge aus der Broschüre nachgeschaut, aber es funktioniert nicht.

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

Ich hoffe, Sie können mir helfen.

Mit freundlichen Grüßen.

Answer 1

Angenommen, der Dienst gibt Daten mit ähnlichen Eigenschaften wie das Polygon zurück, Sie können sie jedoch tatsächlich zu ein und derselben Ebene hinzufügen.

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/ (ohne die heruntergeladenen Daten, denn ich habe nicht die URL)

Wenn die geojsonMD unterschiedliche Merkmalseigenschaften hat, gibt es nichts falsch mit dem Hinzufügen von zwei GeoJSON Schichten. Eine für die Daten, die Sie vom Dienst abrufen, und eine für das Polygon.

Answer 2

Wie in der Broschüre Dokumentation, sollten Sie die „onEachFeature“ verwenden, um ein Popup mit den gewünschten Informationen zu den einzelnen Funktionen Ihres GeoJSON anbringt:

Die onEachFeature Option ist eine Funktion, die auf jeder aufgerufen wird vor dem Hinzufügen zu einer GeoJSON-Ebene. Ein häufiger Grund diese Option zu verwenden, ist ein Popup-Funktionen an, wenn sie

Sie können es auf diese Weise benutzen angeklickt werden:

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

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

In diesem Beispiel wird das Popup-Fenster zeigen den Inhalt der Eigenschaft "Name" für jede angeklickte Funktion

Answer 3

Jetzt funktioniert es. Ich wollte, dass Flugblatt automatisch Koordinaten und Informationen von einem wfs erhält und sie zur Karte hinzufügt.

das ist der Arbeits Code und vielen Dank für Ihre Hilfe =)

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