代码之家  ›  专栏  ›  技术社区  ›  woshitom

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

  •  1
  • woshitom  · 技术社区  · 6 年前

    我有一个由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个不同的图层是绘制我的观察结果的最有效的方法。尤其是当我在用户单击某个层时触发一个函数时,因此我还必须多次定义这样的函数,因为我有不同的图标。

    1 回复  |  直到 6 年前
        1
  •  3
  •   AndrewHarvey    6 年前

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

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

    当然,这是假设您的样式中有名为 icon1 ,则, icon2', 图标3 based on the values of the GeoJSON中的icon `属性。

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