リーフレットポップアップGeoJSONからの追加情報付き

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', { 
    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); 

私を助けてくれることを願っています。

よろしくお願いいたします。

Answer 1

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

geojsonMDは異なる機能性を有している場合は、2つのにGeoJSONレイヤーを追加するには何の問題もありません。 1つはサービスから取得するデータ用で、もう1つはポリゴンで取得したデータ用です。

Answer 2

としてはあなたにGeoJSONの各機能に必要な情報でポップアップを添付する「onEachFeature」を使用する必要があり、リーフレットのドキュメントで説明：

onEachFeatureオプションがそれぞれに呼び出される関数です フィーチャーをGeoJSONレイヤーに追加する前にポップアップがの内容が表示されます。この例では

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

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

：彼らは

をクリックされたときに このオプションを使用する一般的な理由は、あなたがそれをこのように使用できる機能にポップアップを添付することですクリックされた各フィーチャのプロパティ "name"

Answer 3

これで機能します。リーフレットがwfsからcoordsとfeature情報を自動的に取得してマップに追加したがっていました。作業コード、あなたの助けに感謝のthats

=）

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