[英]Mapbox GL js, effectively represent a geojson source by a variable icon
I have a mapbox source composed by a list of geojson point, each element of this source has a key icon referring to an icon URL: 我有一个由geojson点列表组成的mapbox源,此源的每个元素都有一个指向图标URL的键图标 :
var featureCollection = {
"type": "FeatureCollection",
"features": [
{
"geometry":{
"type": "Point",
"coordinates": [1,1]
},
"properties": {
"id": 1,
"name": "name1",
"address": "address1",
"icon": "icon1"
}
},
{
"geometry":{
"type": "Point",
"coordinates": [2,2]
},
"properties": {
"id": 2,
"name": "name2",
"address": "address2",
"icon": "icon2"
}
},
{
"geometry":{
"type": "Point",
"coordinates": [3,3]
},
"properties": {
"id": 3,
"name": "name3",
"address": "address3",
"icon": "icon3"
}
},
{
"geometry":{
"type": "Point",
"coordinates": [4,4]
},
"properties": {
"id": 4,
"name": "name4",
"address": "address4",
"icon": "icon1"
}
}
]
}
map.addSource("shops", {
type: "geojson",
data: featureCollection,
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
I'd like to plot my features by representing them by their icon variable, a way to do so would be to add as many layers as I have different icons: 我想通过他们的图标变量来表示我的功能,一种方法是添加尽可能多的图层,因为我有不同的图标:
map.addLayer({
id: currentLayer,
type: "symbol",
source: "featureCollection",
filter: ["!has", "point_count"],
"layout": {
"icon-image": currentIcon,
"icon-size":1.5
}
});
The thing is I have more than 200 different icons (out of 800 observations), and I really doubt creating 200 different layers is the most effective way to plot my observations. 问题是我有超过200个不同的图标(在800个观察中),我真的怀疑创建200个不同的图层是绘制我的观察的最有效方式。 Especially when I'm triggering a function when the user clicks on an layer, so I would also have to define such function as many times as I have different icons.
特别是当我在用户点击某个图层时触发某个功能时,我也必须多次定义这样的功能,因为我有不同的图标。
You can and should create just one layer. 您可以而且应该只创建一个图层。
icon-image
supports data driven styles so you can use "icon-image": "{icon}"
. icon-image
支持数据驱动的样式,因此您可以使用"icon-image": "{icon}"
。
http://jsbin.com/yofiwizuca/1/edit?html,output http://jsbin.com/yofiwizuca/1/edit?html,output
This of course assumes you have icons in your Style named icon1
, icon2',
icon3 based on the values of the
icon` properties in your GeoJSON. 当然,这假设您的样式中的图标名为
icon1
, icon2',
icon3, based on the values of the
GeoJSON中图标属性based on the values of the
。
You could also use https://www.mapbox.com/mapbox-gl-js/style-spec#expressions if you need to manipulate the values. 如果需要操作值,也可以使用https://www.mapbox.com/mapbox-gl-js/style-spec#expressions 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.