MapboxGL可视化之千里江山图

牛老师讲GIS

发布于 2024-12-30 10:50:15

7700

代码可运行

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

运行总次数：0

代码可运行

概述

今天在看百度地图的时候看到在山峰是以等值面的方式展示的，于是就想着试试如何在MapboxGL中来实现一下，本文就是我实现后的记录。文章标题取名为“千里江山图”，主要是生成的效果让我不由想起了“千里江山图”，美的不要不要的。

效果

实现

数据下载

在前面的文章已经有交代过，大家可以点击链接看看。

DEM数据下载：https://blog.csdn.net/GISShiXiSheng/article/details/128323266

数据处理

1. 发布地形服务

这个前面的文章已经有交代了，下面是文章链接。

地形服务处理：https://lzugis.blog.csdn.net/article/details/142723184

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-12-30，如有侵权请联系 cloudcommunity@tencent.com 删除

map