概述

mapboxGL2中比较大的一个更新就是加入了Terrain，可以实现三维的立体效果，本文书接上文“mapboxGL2离线化应用”，说说Terrain的离线化应用。

效果

image.png

实现分析

1. 打开官方例子，F12打开调试工具；
2. 在网络请求里面查找terrain-dem,接口及返回数据格式如下：
   image.png
   根据上面返回的数据，我们不难理解每个字段的含义，这里面核心的：

• description，里面描述的是dem到RGB的转换算法height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1);
• tiles，是切片的地址'
• scheme为xyz，切片大小为512，下图为接口中返回的图片示例。
  image.png

实现

1. 下载切片
   基于上面的分析，我们借助QGIS，将切片下载下来，这个可参考之前的文章qgis切片下载与本地部署以及调用.

2. 生成本地配置文件
   根据上面的分析，本地配置文件只需要tiles节点即可，同时为记录，保留了 description，生成后的文件如下：

{
  "description" : "height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)",
  "scheme" : "xyz",
  "tiles" : [
    "../dist/dem/{z}/{x}/{y}.png"
  ]
}

3. 添加类型为raster-dem的source，并通过调用接口map.setTerrain实现设置。

// 添加source
'mapbox-dem': {
    'type': 'raster-dem',
    'url': '../dist/data/terrain.json',
    'tileSize': 512,
    'maxZoom': 17
}

// 设置setTerrain
map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.2 });