完整教程：Pythoner 的Flask项目实践-Mapboxgl-v3全球3D地图体验之地标性 3D 建筑物（迪拜哈里发大厦三维模型展示）

文章目录

1，Mapbox GL JS v3简介

Mapbox GL JS v3 引入了 Mapbox Standard Style 和 Mapbox Standard Satellite Style，提供全新的真实感 3D 光照系统、地标性建筑 3D 模型、建筑物与地形阴影等多种视觉增强效果，并且提供了更符合人体工学的 API，便于使用这种全新、丰富、可配置的地图样式，并能与自定义数据实现无缝集成。

新的 Mapbox Standard 样式提供了高性能、优雅的 3D 地图体验，支持强大的动态光照功能、地标性 3D 建筑物，以及精心设计的符号美学。

2，使用方法

项目中使用新的 Mapbox GL JS v3，可以通过 Mapbox GL JS CDN 引入，或者安装 mapbox-gl npm 包。

<script src='https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.css' rel='stylesheet' />

<div id='map' style='width: 400px; height: 300px;'></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoidGlnZXJiZ3AyMDIwIiwiYSI6ImNsaGhpb3Q0ZTBvMWEzcW1xcXd4aTk5bzIifQ.4mA7mUrhK09N4vrrQfZA_Q';
    const map = new mapboxgl.Map({
    container: 'map', // container ID
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9, // starting zoom
    });
    </script>

NPM安装使用

npm install --save mapbox-gl

css样式的导入

import 'mapbox-gl/dist/mapbox-gl.css';

import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
mapboxgl.accessToken = 'pk.eyJ1IjoidGlnZXJiZ3AyMDIwIiwiYSI6ImNsaGhpb3Q0ZTBvMWEzcW1xcXd4aTk5bzIifQ.4mA7mUrhK09N4vrrQfZA_Q';
const map = new mapboxgl.Map({
container: 'map', // container ID
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});

使用 Mapbox GL JS，需要提前申请Mapbox access token。

3，Pythoner 的Flask项目实践

本文以上几篇文章中的Flask项目为基础，添加新的MapboxglV3页面来体验Mapbox3D地图。

3.1、mapboxglv3.html页面

添加新的mapboxglv3.html页面：

{% extends "home.html" %} {% block title %}地图绘制并保存{% endblock %} {% block content %}
<!-- Mapbox GL JS -->
  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
      <title>mapboxgl-v3</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.css" rel="stylesheet" />
      <script src="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.js"></script>
        <style>
          body {
          margin: 0;
          padding: 0;
          }
          #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
          }
          #info {
          position: absolute;
          bottom: 10px;
          left: 10px;
          background: rgba(255, 255, 255, 0.8);
          padding: 5px 10px;
          font-family: monospace;
          font-size: 14px;
          border-radius: 4px;
          }
        </style>
      </head>
      <body>
      <div id="map" style="width: 100%; margin-top: 10px;"></div>
      <div id="info">移动鼠标查看经纬度</div>
        <!-- Mapbox GL -->
        <script src="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.js"></script>
          <link href="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.css" rel="stylesheet" />
          <!-- Mapbox GL Draw -->
            <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.5.0/mapbox-gl-draw.css" type="text/css" />
          <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.5.0/mapbox-gl-draw.js"></script>
            <script>
              mapboxgl.accessToken = "pk.eyJ1IjoidGlnZXJiZ3AyMDIwIiwiYSI6ImNsaGhpb3Q0ZTBvMWEzcW1xcXd4aTk5bzIifQ.4mA7mUrhK09N4vrrQfZA_Q";
              const map = new mapboxgl.Map({
              container: "map", // container ID
              center: [55.2744, 25.1972], // starting position [lng, lat]
              zoom: 14, // starting zoom
              });
              var info = document.getElementById("info");
              // 监听鼠标移动事件
              map.on("mousemove", function (e) {
              var lng = e.lngLat.lng.toFixed(5);
              var lat = e.lngLat.lat.toFixed(5);
              info.innerHTML = `经度: ${lng}, 纬度: ${lat}`;
              });
              // 添加绘图工具
              var Draw = new MapboxDraw({
              displayControlsDefault: true,
              controls: {
              point: true,
              line_string: true,
              polygon: true,
              trash: true,
              combine_features: false,
              uncombine_features: false,
              },
              });
              // 绘图工具控制面板
              map.addControl(Draw, "top-left");
              // Add zoom and rotation controls to the map.
              map.addControl(new mapboxgl.NavigationControl({ visualizePitch: true }), "top-left");
              // FullscreenControl
              map.addControl(new mapboxgl.FullscreenControl({ container: document.querySelector("body") }), "top-left");
            </script>
          </body>
        </html>
        {% endblock %}

3.2、app.py修改

app.py中添加页面跳转路由：

@app.route("/mapboxglv3")
def mapboxglv3():
return render_template("mapboxglv3.html")

3.3、home.html中添加导航菜单

在home.html页面中，相应的位置添加如下代码：

<a href="{{ url_for('mapboxglv3') }}" class="{% if request.endpoint=='mapboxglv3' %}active{% endif %}"><i class="fa-solid fa-cube"></i> MapboxGLV3-3D地图展示</a>