'match' 和 'interpolate' 的 mapbox 表达式组合

Question

我在 React js 中需要 mapbox expressions 方面的帮助。

我需要根据 'type' 参数自定义图层上线的线宽，我需要为四种道路类型中的每一种提供特殊的 'line-width' 行为。当我尝试将“插值”与“匹配”结合使用时：

<Layer
    id='roads'
    type='line'
    source='roads'
    source-layer={SOURCE_LAYER}
    layout={{
        'line-join': 'round',
        'line-cap': 'round'
    }}
    paint={{
        'line-color': '#444444',
        'line-width': ["match", ["get", "type"],
            "primary", ["interpolate", ["exponential", 1.5], ["zoom"], 6, 0.3, 18, 32],
            "secondary", ["interpolate", ["exponential", 1.5], ["zoom"], 5, 0.1, 18, 26],
            "street", ["interpolate", ["exponential", 1.5], ["zoom"], 13, 1, 18, 19],
            "minor", ["interpolate", ["exponential", 1.5], ["zoom"], 14, 0.5, 19, 12],
            1]
    }}/>

我收到一个错误： Error: layers.roads.paint.line-width: Only one zoom-based "step" or "interpolate" subexpression may be used in an expression.

当我恢复插值和匹配时，

<Layer
    id='roads'
    type='line'
    source='roads'
    source-layer={SOURCE_LAYER}
    layout={{
        'line-join': 'round',
        'line-cap': 'round'
    }}
    paint={{
        'line-color': '#43815b',
        'line-width': [
            "interpolate", ["exponential", 1.5], ["zoom"],
            [
                "match", ["get", "type"],
                "primary", [5, 0.75, 18, 32],
                "secondary", [5, 0.1, 18, 26],
                "street", [14, 2, 18, 18],
                "minor", [14, 0.5, 18, 12],
                1
            ], 2 // for 4 args
        ]
    }}/>

错误是： Input/output pairs for "interpolate" expressions must be defined using literal numeric values (not computed expressions) for the input values.

我也不明白如何正确添加 stop_input 和 stop_output。

能否解释一下如何根据道路类型和缩放设置停靠点？

Answer 1

我认为您需要一个覆盖缩放表达式，在每个缩放级别使用不同的数据驱动表达式：

'line-width': [
    "interpolate", ["exponential", 1.5], ["zoom"],
    5, 
        ["match", ["get", "type"],
            "primary", 0.75,
            "secondary", 0.1
            "street", 2, // note this meaning has changed
            "minor", 0.5
        ],
    18,
        ["match", ["get", "type"],
            "primary", 0.32,
            "secondary", 26
            "street", 18,
            "minor", 12
        ],
    ]
]

'match' 和 'interpolate' 的 mapbox 表达式组合

mapbox expressions combining of 'match' and 'interpolate'

javascript

mapbox

mapbox-gl

mapbox-gl-js