Leaflet：从GeoJSON属性设置GeoJSON图层的图标

Question

我正在使用GeoJSON数据构建一个leaflet地图。当我尝试根据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设置图标时，它才会失败。

- Théo Reno

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'] 如果你感兴趣，可以参考以下内容。在Stackoverflow上搜索javascript "property accessors"和/或"bracket notation"也可以找到很多相关信息。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_accessors

- iH8

---

谢谢，我找到了让它工作的方法（我在事实发生后有些反应迟钝，但我刚回来处理这个小项目...） - Théo Reno

对于后来者，@iH8提供了一个不错的解决方案，但等号需要改成冒号，因为icons是一个字典。 - Jtradfor