mapbox加载全球3D建筑

最新推荐文章于 2025-06-18 13:37:30 发布

原创最新推荐文章于 2025-06-18 13:37:30 发布 · 2.6k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#3d #swift #开发语言 #arcgis #webgl

mapbox 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何利用MapboxGLJavaScript库在网页中加载全球3D建筑，包括引入CDN链接、创建地图、监听地图加载事件，以及添加和定制3D建筑图层，以展示高度和离地高度的平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本案例使用Mapbox GL JavaScript库进行加载全球3D建筑。

1. 引入 CDN 链接

<!-- 1.引入CDN链接 -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
  rel="stylesheet"
/>

2. 创建地图

我们创建了一个Mapbox GL JS地图实例，设置了地图的容器、默认的地图风格、中心点坐标、地图级别、地图俯仰角、地球旋转角度以及启用抗锯齿功能。

const map = new mapboxgl.Map({
  container: "map", //地图容器
  style: "mapbox://styles/mapbox/light-v11", //地图样式
  center: [-74.0066, 40.7135], //地图中心
  zoom: 15.5, //缩放级别
  pitch: 45, //地图俯仰角
  bearing: -17.6, //地图旋转角度
  antialias: true, //启用抗锯齿功能
});

3. 监听地图加载完成事件

3.1. 获取地图的样式中的图层

const layers = map.getStyle().layers;

3.2. 查找图层

查找图层中类型为symbol并且有text-field属性的图层。

// 3.2 查找图层
const labelLayerId = layers.find(
  (layer) => layer.type === "symbol" && layer.layout["text-field"]
).id;

3.3. 添加三维建筑图层

将三维建筑数据层添加到地图中，并应用一些样式来表现数据。

首先，代码定义了一个图层对象，包括所需的属性，如 ID、数据源、图层名称、过滤器、类型和最小缩放级别。
接着，为图层对象定义了一个 paint 属性，用于定义图层的样式。这里的样式包括填充颜色的透明度（opacity）、三维建筑的高度和基线。
使用 "interpolate" 表达式来平滑地过渡效果，当用户缩放地图时，三维建筑的高度和基线会随着地图的放大而增加。
最后，将图层对象添加到地图中，并指定标签层labelLayerId。

// 3.3 添加三维建筑图层
map.addLayer(
  {
    id: "add-3d-buildings",
    source: "composite",
    "source-layer": "building",
    filter: ["==", "extrude", "true"],
    type: "fill-extrusion",
    minzoom: 15,
    paint: {
      "fill-extrusion-color": "#aaa",

      // Use an 'interpolate' expression to
      // add a smooth transition effect to
      // the buildings as the user zooms in.
      // 图层高度
      "fill-extrusion-height": [
        "interpolate",
        ["linear"],
        ["zoom"],
        1,
        0,
        8,
        ["get", "height"],
      ],
      // 离地高度
      "fill-extrusion-base": [
        "interpolate",
        ["linear"],
        ["zoom"],
        1,
        0,
        8,
        ["get", "min_height"],
      ],
      "fill-extrusion-opacity": 0.9,
    },
  },
  labelLayerId
);

4. 演示效果

5. 代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.引入CDN链接 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>加载全球3D建筑</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      // 2.创建地图
      window.onload = () => {
        // 注册token
        mapboxgl.accessToken =
          "pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg";
        // 初始化地图对象
        const map = new mapboxgl.Map({
          container: "map", //地图容器
          style: "mapbox://styles/mapbox/light-v11", //地图样式
          center: [-74.0066, 40.7135], //地图中心
          zoom: 15.5, //缩放级别
          pitch: 45, //地图俯仰角
          bearing: -17.6, //地图旋转角度
          antialias: true, //启用抗锯齿功能
        });

        // 3.监听地图加载完成事件
        map.on("style.load", () => {
          // Insert the layer beneath any symbol layer.

          // 3.1 获取地图的样式中的图层
          const layers = map.getStyle().layers;
          // 3.2 查找图层
          //   查找图层中类型为symbol并且有text-field属性的图层
          const labelLayerId = layers.find(
            (layer) => layer.type === "symbol" && layer.layout["text-field"]
          ).id;

          // The 'building' layer in the Mapbox Streets
          // vector tileset contains building height data
          // from OpenStreetMap.

          // 3.3 添加三维建筑图层
          map.addLayer(
            {
              id: "add-3d-buildings",
              source: "composite",
              "source-layer": "building",
              filter: ["==", "extrude", "true"],
              type: "fill-extrusion",
              minzoom: 15,
              paint: {
                "fill-extrusion-color": "#aaa",

                // Use an 'interpolate' expression to
                // add a smooth transition effect to
                // the buildings as the user zooms in.
                // 图层高度
                "fill-extrusion-height": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  1,
                  0,
                  8,
                  ["get", "height"],
                ],
                // 离地高度
                "fill-extrusion-base": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  1,
                  0,
                  8,
                  ["get", "min_height"],
                ],
                "fill-extrusion-opacity": 0.9,
              },
            },
            labelLayerId
          );
        });
      };
    </script>
  </body>
</html>