mapbox gl中,大多数的数据,通过图层的形式加入进去,用layout 和 paint 两个属性,控制显示图层的显示样式,通过在属性中,写入Expressions表达式,实现图层的多样式显示。
样式的帮助api参见网址:
https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-string
样式的控制,能够根据地图中的属性,比如缩放(zoom)等,进行控制显示,也能够根据图层中的属性数据,根据不同属性进行设置。
例如:下边是一个根据图层中属性控制显示圆形图标不同颜色,使用的是match表达式,其中get是获得图层中的属性值,下边是根据属性值不同,设置圆形图标的颜色,类似于switch case的形式,当然mapbox中也提供了case的写法形式,需要注意的是最后都需要一个默认值(“其他部分”)。
'circle-color': [
'match',
['get', 'ethnicity'],
'White', '#fbb03b',
'Black', '#223b53',
'Hispanic', '#e55e5e',
'Asian', '#3bb2d0',
/* 其他*/ '#ccc'
]
这是地图上的显示效果:
在鼠标移动在图层的对象上,变换图层单个对象的样式,也能通过设置表达式实现,下边是一个根据鼠标放在对象上和移出对象时,控制图层对象的透明度,通过修改state中的 hover值,控制对象的透明度。
"fill-opacity": ["case",
["boolean", ["feature-state", "hover"], false],
1,
0.5
]
//地图鼠标移入移出的事件控制
map.on("mousemove", "state-fills", function(e) {
if (e.features.length > 0) {
if (hoveredStateId) {
map.setFeatureState({source: 'states', id: hoveredStateId}, { hover: false});
}
hoveredStateId = e.features[0].id;
map.setFeatureState({source: 'states', id: hoveredStateId}, { hover: true});
}
});
// When the mouse leaves the state-fill layer, update the feature state of the
// previously hovered feature.
map.on("mouseleave", "state-fills", function() {
if (hoveredStateId) {
map.setFeatureState({source: 'states', id: hoveredStateId}, { hover: false});
}
hoveredStateId = null;
});
下图是鼠标移入的效果:
在mapbox gl网站的例子中,都能找到上述代码,对于表达式的使用,要有平常做开发的一些常用逻辑思想,参照API文档,就能拼接出相应的表达式。