문제 설명
Leaflet : GeoJSON 속성에서 GeoJSON 레이어 설정 아이콘 (Leaflet : setting icon for GeoJSON layer from GeoJSON property)
GeoJSON 데이터를 사용하여 전단지 지도를 만들고 있습니다. GeoJSON 속성을 기반으로 사용하는 아이콘을 설정하려고 할 때 문제가 발생합니다. 내 오류가 문자열로 개체를 호출하는 것과 관련이 있다고 생각하지만 정확히 무엇인지 알 수 없습니다.
내 코드는 다음과 같습니다.
GeoJSON의 각 항목에는 iconcategory 속성은 다음과 같습니다.
{"type":"Feature",
"properties":{
"iconcategory": "iconGreyHouse",
...
각 아이콘 범주에는 다음과 같은 아이콘 변수가 있습니다.
var iconGreyHouse = L.icon({
iconUrl: "/markerIcons/house_icon_grey.png",
iconSize: [20, 20]
});
마지막으로 내 GeoJSON 파일을 로드하면 내 GeoJSON에서 "iconcategory"가 표시됩니다. 해당 아이콘 변수를 선택하기 위해 속성...
$.getJSON("/GeoJSON/housemarkers.geojson", function (houses) {
L.geoJson(houses, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: feature.properties.iconcategory
});
}
}).addTo(housemarkers);
});
이것이 작동하지 않는 곳입니다! 똑같은 코드를 사용하지만 아이콘 변수 이름을 직접 지정하면 모든 것이 제대로 작동합니다. 그것'
참조 솔루션
방법 1:
What happens here is that your passing a string not the icon instance. If you want to use a string to access javascript object properties you'll need to use bracket notation to access properties in a certain scope. If it's in global scope you could use: window[feature.properties.iconcategory] or this[feature.properties.iconcategory] but i'd recommend storing it a separate object. If you would do something like this:
var icons = {
'iconGreyHouse': L.icon({iconUrl: "/markerIcons/house_icon_grey.png",iconSize: [20,20]}),
'iconRedHouse': L.icon({iconUrl: "/markerIcons/house_icon_red.png",iconSize: [20,20]}),
...
}
You could call them like this: icons[feature.properties.iconcategory] or icons['iconGreyHouse']
Here's some reading if you're interested, there's also lots to find here on Stackoverflow if you search for javascript "property accessors" and/or "bracket notation".
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_accessors