傳單：從GeoJSON屬性設置GeoJSON圖層的圖標

Question

我正在使用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);
});

這是行不通的地方！ 如果我使用完全相同的代碼，但直接指定圖標變量名稱，則一切正常。 只有當我嘗試通過feature.property設置圖標時，它才會失敗。

Answer 1

這里發生的是您傳遞的是字符串而不是圖標實例。 如果要使用字符串訪問javascript對象屬性，則需要使用方括號表示法來訪問特定范圍內的屬性。 如果它在全球范圍內，則可以使用： window[feature.properties.iconcategory]或this[feature.properties.iconcategory]但我建議將其存儲為單獨的對象。 如果您要執行以下操作：

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]}),
    ...
}

您可以這樣稱呼它們： icons[feature.properties.iconcategory]或icons['iconGreyHouse']

如果您有興趣，請閱讀以下內容，如果您搜索javascript“屬性訪問器”和/或“括號表示法”，在Stackoverflow上也可以找到很多東西。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_accessors