9

我想将来自 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', {
    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);

希望您能够帮助我。

此致。

4

3 回答 3

14

假设服务返回与多边形具有相似属性的数据，您确实可以将它们添加到同一层。

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/（没有下载的数据，因为我没有网址）

如果geojsonMD具有不同的特征属性，则添加两个 GeoJson 层没有任何问题。一种用于您从服务中检索的数据，另一种用于多边形。

于 2013-01-26T15:38:45.527 回答
1

Now it works. I wanted leaflet automatically gets coords and feature information from a wfs and adding them to the map.

thats the working code and thanks for your help =)

<?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-28T18:47:00.007 回答
1

如 Leaflet 文档中所述，您应该使用“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-24T18:34:39.530 回答