mapboxGL中3D行政区划的实现
概述
很多时候我们会遇到3D行政区划的展示，在mapboxGL中，面状的3D展示比较容易，我们可以通过fill-extrusion来实现，但是没法实现其边界线在上面的浮动展示。本文借助QGIS，实现边界线在上面的浮动展示。
实现效果
实现效果
实现思路
1. 3D行政区划
这个比较简单，通过fill-extrusion来实现。
// 添加数据源
map.addSource("geojson": {
type: 'geojson',
data: './data/beijing.geojson'
})
// 添加图层
map.loadImage('./data/ground.PNG', function(error, image) {
if (error) throw error;
map.addImage('ground', image);
map.addLayer({
id: 'geojson-fill',
source: 'geojson',
type: 'fill-extrusion',
paint: {
'fill-extrusion-height': 15000,
'fill-extrusion-base': 0,
'fill-extrusion-opacity': 0.85,
'fill-extrusion-pattern': 'ground'
},
})
})2. 边界线浮动展示
边界线的浮动展示也是通过fill-extrusion来实现的，其实现方式是通过取巧的方式将面转成了线，再将线做很小距离的缓冲区，将其转成面之后在做展示。
面转线
建立缓冲区
数据处理完之后，就可将其叠加到地图上。
// 添加数据源
map.addSource("geojson-b": {
type: 'geojson',
data: './data/beijing-b.geojson'
})
// 添加图层
map.addLayer({
id: 'geojson-fill-b',
source: 'geojson-b',
type: 'fill-extrusion',
paint: {
'fill-extrusion-height': 15100,
'fill-extrusion-base': 14950,
'fill-extrusion-opacity': 1,
'fill-extrusion-color': '#fff'
},
})最后，添加标注。
map.addLayer({
'id': 'geojson-label',
'type': 'symbol',
'source': 'geojson',
layout: {
'text-field': ['get', 'name'],
'text-size': 14,
'text-allow-overlap': true,
'text-justify': 'center'
},
paint: {
'text-color': 'rgb(159, 96, 55)',
'text-halo-color': '#fff',
'text-halo-width': 1.8,
},
});本文源代码请扫描下面二维码或直接前往仓库获取。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-08-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
