结合“match”和“interpolate”的mapbox表达式

Question

我需要有关 React js 中的 mapbox 表达式 的帮助。

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

<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
        ],
    ]
]

Answer 2

很抱歉重新打开这篇文章，但我很难理解这两个代码产生不同结果的原因：

'icon-size': [
  'interpolate',
  ['exponential', 2],
  ['zoom'],
  0,
  0.05 * Math.pow(2, 0 - viewport.baseZoom),
  24,
  0.05 * Math.pow(2, 24 - viewport.baseZoom),
],

还有这个：

'icon-size': [
  "interpolate",
  ["exponential", 2], 
  ["zoom"],
  0, 
    ["match", ['get', 'Type'],
        'bush',
        0.05 * Math.pow(2, 0 - viewport.baseZoom),
        0.05 * Math.pow(2, 0 - viewport.baseZoom),
    ],
  24,
    ["match", ['get', 'Type'],
        'bush',
        0.05 * Math.pow(2, 24 - viewport.baseZoom),
        0.05 * Math.pow(2, 24 - viewport.baseZoom),
    ],
],

为什么我有不同的结果？我的意思是，我在做同样的事情吗？我为每个项目设置了相同的尺寸“0.05”...