Leaflet : 从 GeoJSON 属性为 GeoJSON 图层设置图标

Question

我正在使用 GeoJSON 数据构建传单地图。我运行在尝试设置我使用的基于 GeoJSON 属性的图标时遇到了问题。我认为我的错误与使用字符串调用对象有关，但我无法弄清楚它到底是什么。

这是我的代码：

GeoJSON 中的每个项目都有一个图标类别属性，如下所示：

{"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“属性访问器”and/or“方括号表示法”，在 Whosebug 上也可以找到很多内容。

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

Leaflet : 从 GeoJSON 属性为 GeoJSON 图层设置图标

Leaflet : setting icon for GeoJSON layer from GeoJSON property

javascript

geojson

leaflet

Leaflet : 从 GeoJSON 属性 为 GeoJSON 图层设置图标

Leaflet : setting icon for GeoJSON layer from GeoJSON property

javascript

geojson

leaflet

Leaflet : 从 GeoJSON 属性为 GeoJSON 图层设置图标