在Mapbox中组合大小写和缩放表达式
我有一个图层,将Geojson源中的多边形特征渲染为填充区域。 以下是其中一个功能的示例:在Mapbox中组合大小写和缩放表达式,mapbox,mapbox-gl-js,Mapbox,Mapbox Gl Js,我有一个图层,将Geojson源中的多边形特征渲染为填充区域。 以下是其中一个功能的示例: { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "id": 12345, &qu
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": 12345,
"name": 'exampleName',
"hasCities": true | false,
},
"geometry": {
"type": "Polygon",
"coordinates": [[...], [...]]
}
}, {...}
]
"properties": {
"parent_name": "parent1",
"parent_id": 23,
}
}
我希望达到以下填充不透明度逻辑:
const isRed = true | false
const redOpacity = 0.5
const notRedOpacity = 0.8
if (hasCities) {
opacity = 0
} else if (isRed) {
if(zoom <= 14) // use linear interpolation
opacity = redOpacity
else if(zoom >= 19)
opacity = 0.03
else
interpolate
} else {
if(zoom <= 14) // use linear interpolation
opacity = notRedOpacity
else if(zoom >= 19)
opacity = 0.03
else
interpolate
}
然后我不知道如何实现缩放部分。
我想我需要这样的东西:
const zoomOpacity = ['interpolate', ['linear'], ['zoom'], 14, notRedOpacity | redOpacity, 19, 0.03]
但我不确定如何将这两种表达结合起来?
我知道“缩放”表达式只能用作顶级“步长”或“插值”表达式的输入。因此我认为需要使用步长
运算符
有人能帮我吗?我这样解决:
const baseValue = [
'case',
['boolean', ['get', 'hasDistricts']],
0,
isRed ? redOpacity : notRedOpacity,
]
const fillOpacity = [
'interpolate',
['linear'],
['zoom'],
14,
baseValue,
19,
['case', ['boolean', ['get', 'hasCities']], 0, 0.03],
]
您需要从翻转逻辑开始,以便缩放是第一个决定:
if(zoom <= 14) // use linear interpolation
if (hasCities)
opacity = 0
else if (isRed) {
opacity = redOpacity
else
opacity = notRedOpacity
if (zoom >= 19)
if (hasCities)
opacity = 0
else
opacity = 0.03
最后,在实际的Mapbox GL语言中:
“填充不透明度”:[“插值”、[“缩放”],
14,
[“case”、[“get”、“hasCities”],
0
[“案例”、[“获取”、“isRed”],
氧化能力,
无恢复能力
]
]
19,
[“case”、[“get”、“hasCities”],
0,
0.03
]
]
if(zoom <= 14) // use linear interpolation
if (hasCities)
opacity = 0
else if (isRed) {
opacity = redOpacity
else
opacity = notRedOpacity
if (zoom >= 19)
if (hasCities)
opacity = 0
else
opacity = 0.03
opacity = interpolate (zoom)
14:
if (hasCities)
0
else if (isRed) {
redOpacity
else
notRedOpacity
19:
if (hasCities)
0
else
0.03