前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >mapboxGL2中Terrain的离线化应用

mapboxGL2中Terrain的离线化应用

作者头像
牛老师讲GIS
发布2021-12-06 10:31:33
7840
发布2021-12-06 10:31:33
举报
文章被收录于专栏:跟牛老师一起学WEBGIS

概述

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

效果

实现分析

  1. 打开官方例子,F12打开调试工具;
  2. 在网络请求里面查找terrain-dem,接口及返回数据格式如下:

根据上面返回的数据,我们不难理解每个字段的含义,这里面核心的:

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

实现

  1. 下载切片 基于上面的分析,我们借助QGIS,将切片下载下来,这个可参考之前的文章qgis切片下载与本地部署以及调用.
  2. 生成本地配置文件 根据上面的分析,本地配置文件只需要tiles节点即可,同时为记录,保留了 description,生成后的文件如下:
代码语言:javascript
复制
{
  "description" : "height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)",
  "scheme" : "xyz",
  "tiles" : [
    "../dist/dem/{z}/{x}/{y}.png"
  ]
}
  1. 添加类型为raster-demsource,并通过调用接口map.setTerrain实现设置。
代码语言:javascript
复制
// 添加source
'mapbox-dem': {
    'type': 'raster-dem',
    'url': '../dist/data/terrain.json',
    'tileSize': 512,
    'maxZoom': 17
}

// 设置setTerrain
map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.2 });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/09/17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 效果
  • 实现分析
  • 实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档