Javascript Mapbox GL js,通过变量图标有效地表示geojson源
我有一个由geojson点列表组成的mapbox源,该源的每个元素都有一个指向图标URL的关键图标:Javascript Mapbox GL js,通过变量图标有效地表示geojson源,javascript,icons,mapbox,layer,mapbox-gl-js,Javascript,Icons,Mapbox,Layer,Mapbox Gl Js,我有一个由geojson点列表组成的mapbox源,该源的每个元素都有一个指向图标URL的关键图标: var featureCollection = { "type": "FeatureCollection", "features": [ { "geometry":{ "type": "Point", "coordinates": [1,1] },
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
});
我想通过图标变量来描绘我的特征,一种方法是添加尽可能多的层,因为我有不同的图标:
map.addLayer({
id: currentLayer,
type: "symbol",
source: "featureCollection",
filter: ["!has", "point_count"],
"layout": {
"icon-image": currentIcon,
"icon-size":1.5
}
});
问题是我有200多个不同的图标(在800个观察中),我真的怀疑创建200个不同的图层是绘制我的观察的最有效的方法。特别是当我在用户点击一个图层时触发一个函数时,所以我还必须多次定义这样的函数,因为我有不同的图标 您可以而且应该只创建一个层<代码>图标图像支持数据驱动样式,因此您可以使用
“图标图像”:“{icon}”
当然,这假设您的样式中有图标,它们的名称为icon1
,icon2',
icon3,基于GeoJSON中的
icon`properties的值
如果需要操纵值,也可以使用