Update from Sync Service
This commit is contained in:
FNS Service
271
AI工程/Mapbox+Cesium集成.md
Executable file
271
AI工程/Mapbox+Cesium集成.md
Executable file
@@ -0,0 +1,271 @@
|
|||||||
|
# Mapbox + Cesium 集成研究
|
||||||
|
|
||||||
|
> 3D 地理信息系统最佳组合方案
|
||||||
|
>
|
||||||
|
> 归档：2026-04-23
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 项目概览
|
||||||
|
|
||||||
|
| 组件 | Stars | 定位 |
|
||||||
|
|------|-------|------|
|
||||||
|
| **Cesium** | ⭐ 13.8k | 3D 地球/地图 WebGL 库 |
|
||||||
|
| **Mapbox GL JS** | ⭐ 11.2k | 矢量地图 WebGL 渲染 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 为什么组合？
|
||||||
|
|
||||||
|
### Cesium 优势
|
||||||
|
- ✅ 真正的 3D 地球（WGS84 球体）
|
||||||
|
- ✅ 3D Tiles 支持（BIM/CAD/点云）
|
||||||
|
- ✅ 地形高程数据
|
||||||
|
- ✅ 时间动态数据可视化
|
||||||
|
- ✅ 大规模数据集支持
|
||||||
|
|
||||||
|
### Mapbox 优势
|
||||||
|
- ✅ 精美的矢量地图样式
|
||||||
|
- ✅ 丰富的地图风格选择
|
||||||
|
- ✅ 高性能 2D 渲染
|
||||||
|
- ✅ 完善的样式规范
|
||||||
|
|
||||||
|
### 组合价值
|
||||||
|
- 🌍 Cesium 提供 3D 地球框架
|
||||||
|
- 🗺️ Mapbox 提供高质量底图样式
|
||||||
|
- 🏗️ 3D 建筑 + 精美地图 = 完美组合
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔗 集成方案
|
||||||
|
|
||||||
|
### 方案 1: MVTImageryProvider ⭐ 推荐
|
||||||
|
|
||||||
|
**项目**：[hongfaqiu/MVTImageryProvider](https://github.com/hongfaqiu/MVTImageryProvider) ⭐ 89
|
||||||
|
|
||||||
|
**原理**：在 Cesium 中渲染 Mapbox 矢量瓦片
|
||||||
|
|
||||||
|
**安装**：
|
||||||
|
```bash
|
||||||
|
npm install --save mvt-imagery-provider
|
||||||
|
```
|
||||||
|
|
||||||
|
**使用**：
|
||||||
|
```javascript
|
||||||
|
import * as Cesium from "cesium";
|
||||||
|
import MVTImageryProvider from 'mvt-imagery-provider';
|
||||||
|
|
||||||
|
const viewer = new Cesium.Viewer("cesiumContainer");
|
||||||
|
|
||||||
|
const provider = await MVTImageryProvider.fromUrl(
|
||||||
|
'https://demotiles.maplibre.org/style.json',
|
||||||
|
{ accessToken: MAPBOX_TOKEN }
|
||||||
|
);
|
||||||
|
|
||||||
|
viewer.imageryLayers.addImageryProvider(provider);
|
||||||
|
```
|
||||||
|
|
||||||
|
**特性**：
|
||||||
|
- 支持 Mapbox 样式 JSON
|
||||||
|
- 支持 accessToken 认证
|
||||||
|
- 支持 pickFeatures 点击拾取
|
||||||
|
- 支持 256/512 瓦片尺寸
|
||||||
|
- 支持 WebMercator / Geographic 投影
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 方案 2: cesium-vector-provider
|
||||||
|
|
||||||
|
**项目**：[davenquinn/cesium-vector-provider](https://github.com/davenquinn/cesium-vector-provider) ⭐ 85
|
||||||
|
|
||||||
|
**特点**：将 Mapbox 矢量地图引入 Cesium 地球
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 方案 3: MapboxVectorTileImageryProvider
|
||||||
|
|
||||||
|
**项目**：[robbo1975/MapboxVectorTileImageryProvider](https://github.com/robbo1975/MapboxVectorTileImageryProvider) ⭐ 74
|
||||||
|
|
||||||
|
**特点**：实时渲染 Mapbox 样式矢量瓦片
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 方案 4: 相机同步
|
||||||
|
|
||||||
|
**项目**：[limzgiser/cesium-mapboxgl-syncamera](https://github.com/limzgiser/cesium-mapboxgl-syncamera) ⭐ 40
|
||||||
|
|
||||||
|
**特点**：MapboxGL 和 Cesium 相机同步
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 核心 API
|
||||||
|
|
||||||
|
### MVTImageryProvider 选项
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
type MVTImageryProviderOptions = {
|
||||||
|
style: string | Resource | StyleSpecification; // Mapbox 样式 URL
|
||||||
|
accessToken?: string; // Mapbox Token
|
||||||
|
transformRequest?: RequestTransformFunction; // 请求转换
|
||||||
|
tileSize?: number; // 瓦片尺寸 (256/512)
|
||||||
|
maximumLevel?: number; // 最大层级 (默认 18)
|
||||||
|
minimumLevel?: number; // 最小层级 (默认 0)
|
||||||
|
showCanvas?: boolean; // 调试用
|
||||||
|
enablePickFeatures?: boolean; // 启用点击拾取
|
||||||
|
tilingScheme?: WebMercatorTilingScheme | GeographicTilingScheme;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💻 完整示例
|
||||||
|
|
||||||
|
### 基础 3D 地球 + Mapbox 底图
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import * as Cesium from 'cesium';
|
||||||
|
import MVTImageryProvider from 'mvt-imagery-provider';
|
||||||
|
|
||||||
|
// 创建 Cesium Viewer
|
||||||
|
const viewer = new Cesium.Viewer('cesiumContainer', {
|
||||||
|
baseLayerPicker: false,
|
||||||
|
geocoder: false,
|
||||||
|
homeButton: false,
|
||||||
|
sceneModePicker: false,
|
||||||
|
selectionIndicator: false,
|
||||||
|
timeline: false,
|
||||||
|
navigationHelpButton: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加 Mapbox 样式图层
|
||||||
|
const provider = await MVTImageryProvider.fromUrl(
|
||||||
|
'https://api.mapbox.com/styles/v1/mapbox/streets-v11/style.json',
|
||||||
|
{
|
||||||
|
accessToken: 'YOUR_MAPBOX_TOKEN',
|
||||||
|
tileSize: 512,
|
||||||
|
maximumLevel: 18
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
viewer.imageryLayers.addImageryProvider(provider);
|
||||||
|
|
||||||
|
// 添加 3D 建筑
|
||||||
|
viewer.scene.primitives.add(Cesium.createOsmBuildings());
|
||||||
|
```
|
||||||
|
|
||||||
|
### 添加 3D Tiles
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 加载 3D Tiles 数据集
|
||||||
|
const tileset = await Cesium.Cesium3DTileset.fromUrl(
|
||||||
|
'https://example.com/tileset.json'
|
||||||
|
);
|
||||||
|
viewer.scene.primitives.add(tileset);
|
||||||
|
|
||||||
|
// 自动缩放到数据集
|
||||||
|
viewer.zoomTo(tileset);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 添加地形
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 添加全球地形
|
||||||
|
viewer.terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(1);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 常用 Mapbox 样式
|
||||||
|
|
||||||
|
| 样式 | URL 模板 |
|
||||||
|
|------|---------|
|
||||||
|
| **Streets** | `mapbox://styles/mapbox/streets-v11` |
|
||||||
|
| **Satellite** | `mapbox://styles/mapbox/satellite-v9` |
|
||||||
|
| **Satellite Streets** | `mapbox://styles/mapbox/satellite-streets-v11` |
|
||||||
|
| **Dark** | `mapbox://styles/mapbox/dark-v10` |
|
||||||
|
| **Light** | `mapbox://styles/mapbox/light-v10` |
|
||||||
|
| **Outdoors** | `mapbox://styles/mapbox/outdoors-v11` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 环境配置
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 创建项目
|
||||||
|
npm init -y
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
npm install cesium mvt-imagery-provider
|
||||||
|
|
||||||
|
# 或使用 Vite
|
||||||
|
npm create vite@latest my-map -- --template vanilla
|
||||||
|
cd my-map
|
||||||
|
npm install cesium mvt-imagery-provider
|
||||||
|
```
|
||||||
|
|
||||||
|
**Vite 配置** (vite.config.js)：
|
||||||
|
```javascript
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import cesium from 'vite-plugin-cesium';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [cesium()]
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 性能对比
|
||||||
|
|
||||||
|
| 方案 | 渲染质量 | 性能 | 易用性 |
|
||||||
|
|------|---------|------|--------|
|
||||||
|
| MVTImageryProvider | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||||||
|
| cesium-vector-provider | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ |
|
||||||
|
| MapboxVectorTileImageryProvider | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 使用场景
|
||||||
|
|
||||||
|
| 场景 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **智慧城市** | 3D 建筑 + 精美底图 |
|
||||||
|
| **数字孪生** | BIM/CAD + 地理上下文 |
|
||||||
|
| **气象可视化** | 风场/温度 + 3D 地球 |
|
||||||
|
| **轨迹追踪** | GPS 轨迹 + 地形高程 |
|
||||||
|
| **城市规划** | 规划方案 + 现状地图 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🌐 相关项目
|
||||||
|
|
||||||
|
| 项目 | Stars | 说明 |
|
||||||
|
|------|-------|------|
|
||||||
|
| wind-layer | ⭐ 693 | 风场可视化（支持 Mapbox） |
|
||||||
|
| mapwidget | ⭐ 252 | Jupyter 地图组件 |
|
||||||
|
| simple-gis-web | ⭐ 36 | Vue + Leaflet/Mapbox/Cesium |
|
||||||
|
| Cesium_Mapboxgl | ⭐ 5 | Vue + Cesium + ECharts + Mapbox |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔗 资源
|
||||||
|
|
||||||
|
| 资源 | 链接 |
|
||||||
|
|------|------|
|
||||||
|
| CesiumJS | https://github.com/CesiumGS/cesium |
|
||||||
|
| Mapbox GL JS | https://github.com/mapbox/mapbox-gl-js |
|
||||||
|
| MVTImageryProvider | https://github.com/hongfaqiu/MVTImageryProvider |
|
||||||
|
| Cesium 文档 | https://cesium.com/learn/ |
|
||||||
|
| Mapbox 文档 | https://docs.mapbox.com/ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## AI工程索引
|
||||||
|
|
||||||
|
相关笔记：
|
||||||
|
- [[INDEX_AI工程]] - AI工程知识索引
|
||||||
|
- [[YOLO+ByteTrack水流速度检测]] - CV 项目
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*整理：知识库管理员 | 归档：2026-04-23*
|
||||||
Reference in New Issue
Block a user