当前位置：首页 > news >正文

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

news 2025/9/30 7:09:23

文章目录

- 1，Mapbox GL JS v3简介
- 2，使用方法
- 3，Pythoner 的Flask项目实践
- - 3.1、mapboxglv3.html页面
  - 3.2、app.py修改
  - 3.3、home.html中添加导航菜单
- 4，运行效果

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 IDcenter: [-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 IDcenter: [-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 IDcenter: [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");// FullscreenControlmap.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>