传单:从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);
});
这是不起作用的地方!如果我使用完全相同的代码,但直接指定一个图标变量名,一切都很好;只有当我尝试通过feature.properties设置图标时,它才会失败。
这里发生的是,您传递的是一个字符串,而不是图标实例。如果要使用字符串访问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"属性访问器";和/或";括号符号";。
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_accessors
- Javascript更改图标
- 单击更改图标并通过javascript添加一个css类
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 如何更改角度谷歌地图上的集群图标
- 如何使用传单pip插件与纯GeoJSON数据
- 使用AJAX调用将GeoJSON数据拉入传单
- simpleweather js天气图标
- 更改图层中单个矢量特征的图标
- 使用Angular单击时更改特定图示符图标的颜色
- 加载图像时加载图标
- 可以'点击汉堡包图标后,菜单无法正常打开
- 持久页面操作图标
- 点击图标是't在量角器上工作
- Mapbox JS,来自URL的GeoJSON featureCollection对象只添加了一个标记
- 通过单击同一图标使菜单出现和消失
- 在for循环中使用多维数组设置google.maps.Marker图标
- 使用D3.js和GeoJson在地图上的某些坐标上设置一个小图像
- 传单:从GeoJSON属性设置GeoJSON层的图标
- 使用Geojson添加信息窗口和自定义图标到谷歌地图
- 通过本地URL加载的Mapbox GeoJSON:图标不显示弹出属性