概述
MapboxGL在2的版本之后通過地形服務(wù)開始支持三維的展示了盏触，之前也有文章“mapboxGL2中Terrain的離線化應(yīng)用”對該服務(wù)進行過說明與分析适瓦。前些天在翻公眾號的時候翻到了dem2terrain可以生成地形服務(wù)，同時做了一些優(yōu)化哥童，今天就給大家分享一下如何使用dem2terrain生成MapboxGL地形服務(wù)。
效果
地形
優(yōu)化后邊緣的效果
簡介
根據(jù) DEM 數(shù)據(jù)生成地形切片工具，使用 NodeJS + GDAL（NodeBinding）開發(fā)制作」匦保可用于用戶自定義 DEM 高程數(shù)據(jù)源生產(chǎn)地形瓦片，以便局域網(wǎng)離線使用铺浇。
特點：
- 支持
mapbox和terrarium兩種地形瓦片編碼格式供mapboxgl使用痢畜，其中terrarium格式是tangram引擎的官方地形格式，tangram是另外一款開源的webgl二三維一體化的引擎鳍侣； - 固定瓦片尺寸256丁稀，瓦片周圍有1cell的buffer，即實際瓦片是258*258.
- 自動讀取數(shù)據(jù)源的坐標系統(tǒng)倚聚，重編碼輸入的 DEM 柵格文件线衫，并重投影至指定的坐標系4490、4326秉沼、3857桶雀，默認3857，然后生成瓦片唬复；
- 支持適用于3857矗积、4490、4326的地形切片生產(chǎn)敞咧；
- 內(nèi)置了影像金字塔索引和多進程實現(xiàn)（暫未使用多線程）棘捣，加速瓦片生成速度；
- 支持地形瓦片以文件目錄或mbtiles兩種格式存儲休建；
- 命令行提供了瓦片生成的進圖條提示乍恐，便于用戶查看生成進度。
- 內(nèi)置一些異常導致的臨時文件清理工作测砂。
切片中
切片完成
使用
可以通過兩種方式使用dem2terrain：一種是下載源代碼茵烈，直接使用源代碼；一種是全局安裝dem2terrain使用砌些。
源碼使用
通過源碼的方式使用需要先下載源碼呜投，再將當前目錄定位至工程根目錄，然后運行如下命令：
npm install && npm link
依賴使用
運行npm i dem2terrain -g全局添加依賴存璃，便可使用dem2terrain進行地形切片了仑荐。
切片
通過命令dem2terrain --help查看使用幫助，如下圖纵东。
image.png
執(zhí)行命令
dem2terrain -f ./config.json即可開始切片粘招，config.json文件的內(nèi)容如下：
{
"zoom": "5-14",
"epsg": 3857,
"size": 256,
"resampling": 3,
"encoding": "mapbox",
"input": "D:\\test\\dingxi.tif",
"output": "D:\\test\\terrain",
"clean": true
}
前端調(diào)用
完成切片后，可以將切片部署到如Nginx等web服務(wù)器中偎球，部署完即可在前端調(diào)用地形服務(wù)了洒扎。示例代碼如下：
<!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"], // 此處是地形服務(wù)地址
tileSize: 256,
maxzoom: 14,
});
map.setTerrain({ source: "mapbox-dem", exaggeration: 2 });
});
</script>
</body>
</html>
注意：
- 在使用前需要配置配置
GDAL_DATA環(huán)境變量，如果有安裝過POSTGIS的話已經(jīng)配置過該環(huán)境變量了衰絮； - 在使用的過程中如提示錯誤
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.逊笆，這是由于內(nèi)置的proj和proj.db沖突，最直接的方式就是將對應(yīng)目錄如D:\Program Files\PostgreSQL\12\share\contrib\postgis-3.1\proj\proj.db文件直接替換岂傲。
