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

サービスがポリゴンと同様のプロパティを持つデータを返すと仮定すると、実際にそれらを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/（ダウンロードしたデータなし、URLがないため）

に異なる機能プロパティがある場合、geojsonMD2つのGeoJsonレイヤーを追加しても問題はありません。1つはサービスから取得するデータ用で、もう1つはポリゴンを使用します。

于 2013-01-26T15:38:45.527 に答える
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 に答える
1

今では動作します。リーフレットがwfsから座標と機能情報を自動的に取得し、それらをマップに追加したかったのです。

それは動作するコードであり、あなたの助けに感謝します=）

<?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 に答える