概述
今天在看百度地圖的時候看到在山峰是以等值面的方式展示的，于是就想著試試如何在MapboxGL中來實(shí)現(xiàn)一下梅屉，本文就是我實(shí)現(xiàn)后的記錄舞竿。文章標(biāo)題取名為“千里江山圖”搀捷，主要是生成的效果讓我不由想起了“千里江山圖”锅很，美的不要不要的其馏。
效果
百度效果
頂視圖
頂視放大后
傾斜圖1
傾斜圖2
實(shí)現(xiàn)
數(shù)據(jù)下載
在前面的文章已經(jīng)有交代過，大家可以點(diǎn)擊鏈接看看爆安。
數(shù)據(jù)處理
1. 發(fā)布地形服務(wù)
這個前面的文章已經(jīng)有交代了叛复，下面是文章鏈接。
2.DEM生成等值面
通過DEM數(shù)據(jù)生成等值面我用的是QGIS來完成的扔仓，如下圖褐奥。
生成等值線
代碼實(shí)現(xiàn)
實(shí)現(xiàn)就比較簡單了，用fill圖層進(jìn)行分段渲染就OK翘簇，實(shí)現(xiàn)代碼如下：
<!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,
paint: {
"raster-opacity": 0.5,
},
},
],
};
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: "#c9eac2",
"high-color": "#c9eac2",
"space-color": "#c9eac2",
});
// 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: 3 });
map.addSource("building", {
type: "geojson",
data: "./hillshade1.geojson",
});
map.addLayer({
id: "3d-buildings",
source: "building",
type: "fill",
paint: {
"fill-color": [
"interpolate",
["linear"],
["get", "ELEV_MAX"],
1600, '#f7fcf5',
1700, '#f1faee',
1800, '#eaf7e6',
1900, '#e4f4de',
2000, '#d9f0d3',
2100, '#cfecc8',
2200, '#c3e7bc',
2300, '#b6e2af',
2400, '#a9dca3',
2500, '#9ad696',
2600, '#8bcf89',
2700, '#7bc77c',
2800, '#6abf71',
2900, '#58b668',
3000, '#46ae60',
3100, '#3aa357',
3200, '#2f984f',
3300, '#258d46',
3400, '#18813d',
3500, '#0b7634',
3600, '#00692a',
3700, '#005723',
3800, '#00441b'
],
"fill-opacity": 0.95,
},
});
});
</script>
</body>
</html>
