mapbox-gl:数据多样式显示

简介: mapbox-gl:数据多样式显示

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'

]

这是地图上的显示效果:
image.png
在鼠标移动在图层的对象上,变换图层单个对象的样式,也能通过设置表达式实现,下边是一个根据鼠标放在对象上和移出对象时,控制图层对象的透明度,通过修改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;

});

下图是鼠标移入的效果:
image.png
在mapbox gl网站的例子中,都能找到上述代码,对于表达式的使用,要有平常做开发的一些常用逻辑思想,参照API文档,就能拼接出相应的表达式。

相关文章
|
定位技术
97Echarts - 地理坐标/地图(Draw Polygon on Map)
97Echarts - 地理坐标/地图(Draw Polygon on Map)
62 0
分享:mapbox-gl的CGCS2000修改版
分享:mapbox-gl的CGCS2000修改版
221 0
|
JavaScript 前端开发 定位技术
Leaflet系列:动态勾画polygon
Leaflet如何实现动态勾画polygon
288 0
Cesium中开启等高线渲染
最近接到一个需求,需要在Cesium中基于实时地形开启等高线效果,让用户可以看到真实效果。
812 0
Cesium中开启等高线渲染
|
JSON 数据可视化 定位技术
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
920 0
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
|
2月前
Cesium添加3DTile
这篇文章介绍了如何在Cesium中添加3DTile内容,以增强三维地理空间数据的表现,并提供了实现的具体步骤和代码示例。
57 1
Cesium添加3DTile
|
4月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
121 0
|
定位技术
264Echarts - GL 散点图(10 million Bulk GPS points)
264Echarts - GL 散点图(10 million Bulk GPS points)
63 0
266Echarts - GL 矢量场图(Global wind visualization)
266Echarts - GL 矢量场图(Global wind visualization)
63 0
266Echarts - GL 矢量场图(Global Wind Visualization 2)
266Echarts - GL 矢量场图(Global Wind Visualization 2)
72 0