【WebGIS实例】(13)MapboxGL 加载地形高程数据

前言

官网示例:Add 3D terrain to a map | Mapbox GL JS | Mapbox

大佬博客:Mapbox GL基础(七):地形数据的处理与加载 (jl1mall.com)

加载Mapbox地形数据

js 复制代码
map.once('style.load', () => {
  map.addSource('mapbox-dem', {
    type: 'raster-dem',
    url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
    tileSize: 512,
    maxzoom: 14
  })
  map.setFog({}) // 可选:添加大气层(雾气)效果
  map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 })
})

加载 tif 格式高程影像

数据名称:Rectangle_#5_高程_右3_Level_16.tif

使用工具:GitHub - FreeGIS/dem2terrain: 根据dem数据生成地形切片的工具

NodeJS 版本:v16.20.2

dem2terrain 这个库的教程写得非常详细了,把项目拷下来按着教程配置一遍就行了。下面是我遇到的问题的记录:

  1. NodeJS 版本问题:实测16.20.2是可行的
  2. Windows11 c++编译环境问题
    报错npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
    解决方案
    参考 GitHub - nodejs/node-gyp: Node.js native addon build tool
    安装包管理工具:Chocolatey,然后在终端执行:choco install python visualstudio2022-workload-vctools -y
js 复制代码
map.once('style.load', () => {
  map.addSource('mapbox-dem', {
    type: 'raster-dem',
    url: '../dem/{z}/{x}/{y}.png', //自己的地址
    tileSize: 512,
    maxzoom: 14
  })
  map.setFog({}) // 可选:添加大气层(雾气)效果
  map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 })
})
相关推荐
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef0610 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder12 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句13 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom13 小时前
JavaScript reduce()函数详解
javascript
小飞悟13 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子13 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手13 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅14 小时前
JavaScript 中你不知道的按位运算
前端·javascript