我需要有关 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 。
您能否解释一下如何根据道路类型和变焦设置停靠点?
我认为你需要有一个最重要的缩放表达式,在每个缩放级别都有不同的数据驱动表达式:
'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
],
]
]
很抱歉重新打开这篇文章,但我很难理解这两个代码产生不同结果的原因:
'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”...