通过dem2terrain生成MapboxGL地形服务

简介: 通过dem2terrain生成MapboxGL地形服务

概述

MapboxGL在2的版本之后通过地形服务开始支持三维的展示了,之前也有文章“mapboxGL2中Terrain的离线化应用”对该服务进行过说明与分析。前些天在翻公众号的时候翻到了dem2terrain可以生成地形服务,同时做了一些优化,今天就给大家分享一下如何使用dem2terrain生成MapboxGL地形服务。

效果

image.png

image.png

简介

根据 DEM 数据生成地形切片工具,使用 NodeJS + GDAL(NodeBinding)开发制作。可用于用户自定义 DEM 高程数据源生产地形瓦片,以便局域网离线使用。

特点:

  • 支持 mapboxterrarium 两种地形瓦片编码格式供mapboxgl使用,其中terrarium格式是tangram引擎的官方地形格式,tangram是另外一款开源的webgl二三维一体化的引擎;
  • 固定瓦片尺寸256,瓦片周围有1cell的buffer,即实际瓦片是258*258.
  • 自动读取数据源的坐标系统,重编码输入的 DEM 栅格文件,并重投影至指定的坐标系4490、4326、3857,默认3857,然后生成瓦片;
  • 支持适用于3857、4490、4326的地形切片生产;
  • 内置了影像金字塔索引和多进程实现(暂未使用多线程),加速瓦片生成速度;
  • 支持地形瓦片以文件目录或mbtiles两种格式存储;
  • 命令行提供了瓦片生成的进图条提示,便于用户查看生成进度。
  • 内置一些异常导致的临时文件清理工作。

image.png

image.png

使用

可以通过两种方式使用dem2terrain:一种是下载源代码,直接使用源代码;一种是全局安装dem2terrain使用。

源码使用

通过源码的方式使用需要先下载源码,再将当前目录定位至工程根目录,然后运行如下命令:

npm install && npm link

依赖使用

运行npm i dem2terrain -g全局添加依赖,便可使用dem2terrain进行地形切片了。

切片

通过命令dem2terrain --help查看使用帮助,如下图。
image.png
执行命令dem2terrain -f ./config.json即可开始切片,config.json文件的内容如下:

{
   
  "zoom": "5-14",
  "epsg": 3857,
  "size": 256,
  "resampling": 3,
  "encoding": "mapbox",
  "input": "D:\\test\\dingxi.tif",
  "output": "D:\\test\\terrain",
  "clean": true
}

前端调用

完成切片后,可以将切片部署到如Nginx等web服务器中,部署完即可在前端调用地形服务了。示例代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Query terrain elevation</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link href="./mapbox-gl.css" rel="stylesheet" />
    <script src="./mapbox-gl.js"></script>
    <style>
      body {
    
        margin: 0;
        padding: 0;
      }

      #map {
    
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      const mapStyle = {
    
        version: 8,
        name: "Dark",
        sources: {
    
          "xyz-img": {
    
            type: "raster",
            tiles: [
              "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
              "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
              "https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
              "https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            ],
            tileSize: 256,
          },
        },
        layers: [
          {
    
            id: "img",
            type: "raster",
            source: "xyz-img",
            minzoom: 1,
            maxzoom: 18,
          },
        ],
      };
      const map = new mapboxgl.Map({
    
        container: "map",
        zoom: 12,
        center: [104.61023753726323, 35.63101027697721],
        pitch: 75,
        bearing: 90,
        style: mapStyle,
        hash: true,
      });
      map.on("load", (e) => {
    
        // Set custom fog
        map.setFog({
    
          range: [-0.5, 2],
          color: "#def",
          "high-color": "#def",
          "space-color": "#def",
        });
        // Add terrain source, with slight exaggeration
        map.addSource("mapbox-dem", {
    
          type: "raster-dem",
          tiles: ["./terrain/{z}/{x}/{y}.png"], // 此处是地形服务地址
          tileSize: 256,
          maxzoom: 14,
        });
        map.setTerrain({
     source: "mapbox-dem", exaggeration: 2 });
      });
    </script>
  </body>
</html>

注意

  • 在使用前需要配置配置GDAL_DATA环境变量,如果有安装过POSTGIS的话已经配置过该环境变量了;
  • 在使用的过程中如提示错误Error: PROJ: proj_create_from_database: D:\Program Files\PostgreSQL\12\share\contrib\postgis-3.1\proj\proj.db lacks DATABASE.LAYOUT.VERSION.MAJOR / DATABASE.LAYOUT.VERSION.MINOR metadata. It comes from another PROJ installation.,这是由于内置的proj和proj.db冲突,最直接的方式就是将对应目录如D:\Program Files\PostgreSQL\12\share\contrib\postgis-3.1\proj\proj.db文件直接替换
相关文章
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现模拟河流,水面水流,水管水流,海面
3248 0
Threejs实现模拟河流,水面水流,水管水流,海面
|
7月前
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
4347 10
分享:mapbox-gl的CGCS2000修改版
分享:mapbox-gl的CGCS2000修改版
403 0
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4134 0
干货!解决Cesium中Entity移动漂移的问题
|
7月前
|
数据可视化 前端开发 JavaScript
地图可视化的艺术:深入比较Mapbox、OpenLayers、Leaflet和Cesium,不同场景下应如何选择地图库
选择合适的地图库取决于项目的需求、团队的技术栈以及预算等因素。简单来说,新手可以从leaflet入手;GIS开发使用openlayers会更顺手一些;mapbox适应大多数2D和2.5D场景,可视化效果好,但是不开源;cesium更侧重于3D场景。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出
|
7月前
|
前端开发 定位技术 API
Mapbox添加行政区矢量图层,Mapbox添加分级设色图层,Mapbox添加文本标记图层,Mapbox给行政区矢量数据添加名称,Mapbox自定义鼠标悬浮框,Mapbox添加天地图底图
Mapbox的中国分部好像在2021年左右就退出中国了,官方文档的汉化工作也戛然而止,相关的社区建设也相当欠缺,内容比较混乱,最离谱的是mapbox官方底图库中的中国地图基本都是错的,天地图引入又麻烦...... 恰好我最近有一个基础的mapbox应用需求,就做了一些整理和探索,分享给大家。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来
Threejs中导入GLTF模型克隆后合并
这篇文章详细说明了在Three.js中如何导入GLTF模型,对其进行克隆,并将多个克隆模型合并成一个整体模型的过程。
451 2
Threejs中导入GLTF模型克隆后合并
Three添加天空盒子
这篇文章详细说明了如何在Three.js中添加天空盒(Skybox)以增强3D场景的真实感和沉浸体验。
442 6
Three添加天空盒子