Leaflet Popup與來自GeoJSON的附加信息

出了問題。我想將來自geojson的附加信息綁定到傳單標記彈出窗口。從單張文檔中查找了一些東西，但它不起作用。Leaflet Popup與來自GeoJSON的附加信息

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

希望你能幫助我。

此致敬禮。

來源

2013-01-24 juhnz

，你可以把它更清楚一點，你想做什麼？你想把服務中的geoJson與你自己創建的多邊形結合起來嗎？ – flup

假設服務返回的數據具有與多邊形相似的屬性，您的確可以將它們添加到同一圖層。

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/（不包括下載的數據，我沒有URL）

如果geojsonMD有不同的功能特性，沒有什麼錯把兩個GeoJSON的層。一個用於從服務中檢索的數據，另一個用於多邊形。

來源

2013-01-26 15:38:45 flup

由於單張文檔中解釋說，你應該使用「onEachFeature」與所需信息附上一個彈出您以GeoJSON的每一個特徵：

的onEachFeature選項是被調用各項功能在將其添加到GeoJSON圖層之前，請使用功能。使用此選項的常見原因是附加一個彈出窗口功能被點中

時，您可以使用這種方式：

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

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

在這個例子中，彈出窗口將顯示的內容每個點擊特徵的屬性「名稱」

來源

2013-01-24 18:34:39

但這不是他想要的。他想動態地向json添加一些額外的數據。我認爲。 – flup

現在，它的工作。我想讓傳單自動從wfs獲取coords和特徵信息並將它們添加到地圖中。

這就是工作代碼，並感謝您的幫助=）

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

來源

2013-01-28 18:47:00 juhnz

Leaflet Popup與來自GeoJSON的附加信息

回答

相關問題