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