【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 })
})
相关推荐
知识分享小能手28 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one29 分钟前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830943 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904274 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
秋秋小事4 小时前
React Hooks useContext
前端·javascript·react.js
ST.J4 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记