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 。