需求：
地图上显示图标，品牌A图标要大于其他品牌图标显示
解决方案一：
使用 ['get', 'iconSize']，但是有个前提就是数据里面有 iconSize 值 如：
properties: {
brand: "A"
endAt: null
iconSize: 0.06
id: "6902949f-545f-44c1-9b6a-73935e8533b2"
name: "小白楼"
num: null
startAt: "2019/11/2"
添加Layer代码为：
this.map.addLayer({
id: 'symbolLayer',
source: 'symbolData',
type: 'symbol',
layout: {
'icon-image': ['get', 'brand'],
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'icon-size': ['get', 'iconSize'],
'icon-offset': [0, -0.5],
},
});
解决方案二：
使用Camera expressions属性
代码如下:
this.map.addLayer({
id: 'symbolLayer',
source: 'symbolData',
type: 'symbol',
layout: {
'icon-image': ['get', 'brand'],
'icon-allow-overlap': true,
'icon-ignore-placement': true,
//品牌为A的icon-size为0.08，其余的为0.06
'icon-size': ['match',['get', 'brand'],'A',0.08,0.06],
'icon-offset': [0, -0.5],
},
});
介绍
通过 camera expression 可以实现图层 layer 根据地图的不同属性有不同的表现
-
match
- 用法
[ "match", ["zoom"],'A', 18, 12 ]- 示例
//品牌为A和B的图标大小为0.08，品牌c的图标大小为0.06，其他品牌的图标大小为0.04 'icon-size': ['match',['get', 'brand'],['A','B'],0.08,'C',0.06,0.04], //品牌为A的图标大小为0.08，品牌B的图标大小为0.06，其他品牌的图标大小为0.04 'icon-size': ['match',['get', 'brand'],'A',0.08,'B',0.06,0.04], -
step
- 用法
[ "step", ["zoom"], ...]注意：属性值为数字
- 示例
//<100,颜色'#51bbd6' //100< <750, 颜色'#f1f075' //<750 颜色'#f28cb1' ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 750, '#f28cb1'] -
let
- 用法
[ "let", ["get", "class"], ]注意：属性值为String
-
interpolate
- 用法
//当 zoom 为0 时，heatmap-radius 的值为 2 //当 0 < zoom < 9时，heatmap-radius 的值在 2 ~ 8 之间线性分布 //当 9 < zoom 时，heatmap-radius 的值为 8 "heatmap-radius":[ "interpolate", ["linear"],["zoom"],0, 2,9, 8]- 示例
"heatmap-color": [ "interpolate", ["linear"], ["heatmap-density"], 0, "rgba(0, 160, 234,0)", 0.2, "rgb(0, 160, 234)", 0.4, "rgb(0, 200, 100)", 0.6, "rgb(251, 239, 34)", 0.8, "rgb(242, 141, 38)", 1, "rgb(190, 49, 31)" ], -
嵌套使用
"line-width": [
"interpolate",
["exponential", 1.3],
["zoom"],9,
["match", ["get", "class"],
["canal", "river"], 0.1, 0],20,
["match", ["get", "class"], ["canal", "river"], 8, 3]
],
