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

【问题标题】：Mapbox GL js, effectively represent a geojson source by a variable iconMapbox GL js，通过变量图标有效地表示geojson源
【发布时间】：2018-04-18 19:34:55
【问题描述】：

我有一个由 geojson 点列表组成的 mapbox 源，这个源的每个元素都有一个键 icon 引用一个图标 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
});

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

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

问题是我有超过 200 个不同的图标（在 800 个观察结果中），我真的怀疑创建 200 个不同的图层是绘制我的观察结果的最有效方法。尤其是当我在用户单击图层时触发功能时，因此我还必须多次定义此类功能，因为我有不同的图标。

【问题讨论】：

标签： javascript icons mapbox layer mapbox-gl-js

【解决方案1】：

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

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

这当然假设您的样式中有名为 icon1、icon2',icon3based on the values of theicon` 的 GeoJSON 属性的图标。

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

【讨论】：