mapbox extrude《我的世界》

给大家分享一个我最近利用业余时间做的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 !!!