Mapbox GL js通过变量图标有效地表示geojson源

Question

我有一个由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
});

我想通过他们的图标变量来表示我的功能，一种方法是添加尽可能多的图层，因为我有不同的图标：

map.addLayer({
    id: currentLayer,
    type: "symbol",
    source: "featureCollection",
    filter: ["!has", "point_count"],
    "layout": {
        "icon-image": currentIcon,
        "icon-size":1.5
    }
});

问题是我有超过200个不同的图标（在800个观察中），我真的怀疑创建200个不同的图层是绘制我的观察的最有效方式。 特别是当我在用户点击某个图层时触发某个功能时，我也必须多次定义这样的功能，因为我有不同的图标。

Answer 1

您可以而且应该只创建一个图层。 icon-image支持数据驱动的样式，因此您可以使用"icon-image": "{icon}" 。

http://jsbin.com/yofiwizuca/1/edit?html,output

当然，这假设您的样式中的图标名为icon1 ， icon2', icon3， based on the values of the GeoJSON中图标属性based on the values of the 。

如果需要操作值，也可以使用https://www.mapbox.com/mapbox-gl-js/style-spec#expressions 。