전단지 팝업에서 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

서비스가 다각형과 비슷한 속성을 가진 데이터를 반환한다고 가정하면 실제로는 하나의 동일한 레이어에 추가 할 수 있습니다.

geojsonMD 다른 기능 속성이있는 경우 (내가 URL을 모르는의 다운로드 된 데이터없이)

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/ 두 GeoJson 레이어를 추가 아무 문제가 없습니다. 하나는 서비스에서 가져온 데이터를위한 것이고 다른 하나는 다각형을 사용하는 것입니다.

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

: 그들은

를 클릭 할 때 이 옵션을 사용하는 일반적인 이유는 당신이이 방법을 사용할 수있는 기능에 팝업을 연결하는 것입니다 각 클릭 된 기능에 대한 속성 "이름"

Answer 3

이제 작동합니다. 전단지가 자동으로 좌표와 기능 정보를 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);