mapbox gl数据驱动的风格:"值"参数呢?

时间:2017-01-24 20:28:18

标签: mapbox mapbox-gl mapbox-gl-js

我是根据当前缩放值修改我的图标大小,方法是使用缩放数据来驱动尺寸。

据我所知,我正在使用该属性" zoom"跟踪缩放值(这是根据规格要求),在停止我设置每个所需的"缩放"值,然后输出该状态的图标大小值(由0-1> 3范围显示)。如果我没有包含参数"值":某些内容代码将失败。如果我将它全部设置为1,它工作正常,所以似乎忽略了这个值。

任何人都可以解释它的实际用途吗?

    // Add layer to map populating data from Geojson
    map.addLayer({
        "id": "seed",
        "type": "symbol",
        "source": "objects",
        "layout": {
            "icon-rotation-alignment": "map",
            "icon-keep-upright": true,
            "icon-rotate": 0,
            "icon-image": "{icon}",
            "icon-allow-overlap": true,
            "icon-size": {
                "property": "zoom",
                "type": "exponential",
                "stops": [
                    [{ "zoom": 15, "value": 1}, 0.1],
                    [{ "zoom": 16, "value": 1}, 0.3],
                    [{ "zoom": 17, "value": 1}, 0.6],
                    [{ "zoom": 18, "value": 1}, 0.8],
                    [{ "zoom": 19, "value": 1}, 2],
                    [{ "zoom": 20, "value": 1}, 3]
                ]
            }
        }
    });
});

1 个答案:

答案 0 :(得分:2)

为混乱@stuffyjoelab道歉!

Mapbox GL中有三种类型的功能:

  • 缩放功能允许地图功能的外观随地图的缩放级别而变化
  • 属性函数允许地图特征的外观随其属性而变化。
  • 缩放和属性功能允许地图功能的外观随其属性和缩放而变化。

(There's more info about these in our style spec docs)

  

我正在使用该属性" zoom"跟踪缩放值

我们定义了一个"属性"作为每个要素元数据,la GeoJSON feature properties。根据此定义,zoom不是属性(除非您的要素属性为zoom

如果您通过删除"property": "zoom"并使用数字缩放替换停靠点中的{zoom, value}对象来切换到缩放功能语法,则所有内容都应按预期工作。

// Add layer to map populating data from Geojson
map.addLayer({
    "id": "seed",
    "type": "symbol",
    "source": "objects",
    "layout": {
        "icon-rotation-alignment": "map",
        "icon-keep-upright": true,
        "icon-rotate": 0,
        "icon-image": "{icon}",
        "icon-allow-overlap": true,
        "icon-size": {
            "type": "exponential",
            "stops": [
                [15, 0.1],
                [16, 0.3],
                [17, 0.6],
                [18, 0.8],
                [19, 2],
                [20, 3]
            ]
        }
    }
});