给大家分享一个我最近利用业余时间做的DEMO，纯属好玩。。哈哈哈
屏幕截图...
extrude_terrain.gif
实际上就是基于mapbox extrude layer 的应用，创建mapbox extrude layer 的代码如下：
function addTerrainLayer() {
map.addSource('voxelSource', {
'type': 'geojson',
'data': voxelGjson, // 关键就是数据源得包含一个标识高度的字段，一般是polygon类型的数据
});
map.addLayer({
'id': 'terrain-extrusion',
'type': 'fill-extrusion', // 选择 layer 的type 为fill-extrusion
'source': 'voxelSource',
'paint': {
// See the Mapbox Style Specification for details on data expressions.
// https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions
// Get the fill-extrusion-color from the source 'color' property.
'fill-extrusion-color': ['get', 'color'],
// Get fill-extrusion-height from the source 'height' property.
'fill-extrusion-height': ['get', 'height'],
// // Get fill-extrusion-base from the source 'base_height' property.
'fill-extrusion-base': ['get', 'base_height'],
// Make extrusions slightly opaque for see through indoor walls.
'fill-extrusion-opacity': 1
}
});
}
高程数据来源
关键的地方就是配置 layer type 为 fill-extrusion，并且source 的data 中包含一个字段去标识高度/高程。
高程数据的来源就是左边这张普通的高程图片，右边是对应的真彩色图像
image.png
RGB 波段中 R 波段的亮度标识高度值，所以其他俩字段都是0，alpha 是255。地形色彩由上图的RGB 决定，这两幅图的像素宽高是一致的，所以真彩色和高程几乎是一一对应的。实际上可以把色彩信息和高程合并在一张 png 中。
读取高程构建 layer source
- 如何把高程图中的高度读取出来： 先绘制到 canvas 中，再利用 ctx.getImageData 把所有像素的波段值读取成 ImageData 类型的对象
- ImageData.data: Uint8ClampedArray 这个字段中包含的Uint8Array 长度是 图像 width * height * 波段数量 4 . 例如 [1, 0, 0, 255, 200, 0, 0, 255, ...] 表示第一个像素的 R波段是1，第二个像素红波段值是200.
- 构建用于拉伸的多边形要素，正方形或者六边形都是不错的选择。正方形更有一种我的世界的感觉。。哈哈哈
voxel 颜色也是同样方式，通过getImageData 取自 真彩色图像的RGB 三个波段。 所以本文最关键的部分应该就是 getImageData 这个函数了，以及后续对 Uint8Array 的取值操作。
实际上就是构建带高度属性的geojson polygon
return {"type": "Feature",
"properties": {
"level": 1,
"name": "voxel",
"height": height*10,
"base_height": 0,
color: voxelColor
},
"geometry": {
"coordinates": [
[
[
centerX-voxelWidth,
centerY+voxelWidth
],
// ... 其他点坐标不去展示了。。
]
],
"type": "Polygon"
},
id: `${centerX}${centerY}${height}`
};
在线DEMO 地址
后面准备有空再研究下mapbox custom layer，据说可以接管地图 webgl 的部分，应该挺有意思的。
欢迎去 github 项目把玩各种 mapbox demo 和小插件，插件库 Gzip 后仅需18Kb !!!
