Question

我想将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);

希望你能帮助我。

最好的问候。

Answer 1

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

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图层没有任何问题。一个用于从服务检索的数据，另一个用于多边形。

Answer 2

正如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);
    }
}

在此示例中，弹出窗口将显示每个单击的要素

的属性“名称”的内容

Answer 3

现在它有效。我希望传单自动从wfs获取coords和feature信息并将它们添加到地图中。

这是工作代码并感谢您的帮助=）

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

Leaflet Popup以及来自GeoJSON的其他信息

3 个答案: