概述
今天在看百度地图的时候看到在山峰是以等值面的方式展示的，于是就想着试试如何在MapboxGL中来实现一下，本文就是我实现后的记录。文章标题取名为“千里江山图”，主要是生成的效果让我不由想起了“千里江山图”，美的不要不要的。
效果
百度效果
顶视图
顶视放大后
倾斜图1
倾斜图2
实现
数据下载
在前面的文章已经有交代过，大家可以点击链接看看。
数据处理
1. 发布地形服务
这个前面的文章已经有交代了，下面是文章链接。
2.DEM生成等值面
通过DEM数据生成等值面我用的是QGIS来完成的，如下图。
生成等值线
代码实现
实现就比较简单了，用fill图层进行分段渲染就OK，实现代码如下：
<!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>
