【GIS】Cesium：快速加载地图
本教程将帮助初学者从零搭建 Cesium 开发环境，并构建一个最基础的 Cesium 项目，逐步学习如何加载影像数据（包括 天地图 和 OpenStreetMap），实现一个可用的三维数字地球场景。
一、准备工作
Cesium 是一个基于 JavaScript 的 3D 地理信息可视化框架，支持浏览器直接运行。我们需要准备一个简单的 HTML 文件，并通过在线或本地引入 Cesium 资源。
二、注册 Cesium Ion（可选）
如果你希望使用 Cesium 官方的高精度地形和影像数据，需要注册 Cesium Ion 获取 Token。
如果你只使用 天地图 或 OpenStreetMap 等免认证地图，可以跳过本节。
1. 访问官网
前往 Cesium 官网。
2. 注册账户
点击右上角 Sign Up 注册免费账户，并登录。
3. 获取 API Token
- 进入 Cesium Ion 控制台。
- 在左侧菜单中选择 Access Tokens。
- 创建一个新的 Token，例如命名为
My Cesium Token。 - 保存生成的 Token，后续在代码中使用。
三、创建 HTML 项目
1. 新建 HTML 文件
使用 VSCode、Sublime Text 或 Notepad++ 新建文件，命名为 index.html。
2. 基础 HTML 结构
以下是一个完整的 Cesium 最小示例，使用 Cesium Ion Token 加载默认地球场景。
将
YOUR_ACCESS_TOKEN替换为你实际的 Cesium Token。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My First Cesium App</title><script>// 设置 Cesium 资源加载的基础路径window.CESIUM_BASE_URL = 'https://cdn.bootcdn.net/ajax/libs/cesium/1.130.1';</script><!-- 引入 Cesium JS 核心库 --><script src="https://cdn.bootcdn.net/ajax/libs/cesium/1.130.1/Cesium.min.js"></script><!-- 引入 Cesium 基础样式 --><link href="https://cdn.bootcdn.net/ajax/libs/cesium/1.130.1/Widgets/widgets.min.css" rel="stylesheet"><style>/* 页面及 Cesium 容器全屏显示 */html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><!-- Cesium 地图容器 --><div id="cesiumContainer"></div><!-- Cesium JavaScript 文件 --><script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script><script>// 设置 Cesium Ion TokenCesium.Ion.defaultAccessToken = 'YOUR_ACCESS_TOKEN';// 初始化 Cesium Viewerconst viewer = new Cesium.Viewer('cesiumContainer');</script>
</body></html>
- Cesium.Ion.defaultAccessToken
用于访问 Cesium 官方地形和影像。 - Cesium.Viewer
Cesium 的核心类，用于初始化三维地球。 - CSS 设置
通过width:100%和height:100%让 Cesium 全屏显示。
四、无 Token 初始化
如果你不想使用 Cesium Ion，可以使用 无 Token 模式，并完全自定义底图。
Cesium.Ion.defaultAccessToken = null;const viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: false, // 不加载默认影像terrainProvider: new Cesium.EllipsoidTerrainProvider(), // 使用默认椭球体地形/* 关闭 Cesium 默认 UI 控件 */animation: false, // 动画控件timeline: false, // 时间轴baseLayerPicker: false, // 图层选择器homeButton: false, // 首页按钮geocoder: false, // 地名搜索sceneModePicker: false, // 2D/3D 切换navigationHelpButton: false,// 帮助按钮fullscreenButton: false, // 全屏按钮vrButton: false, // VR 模式按钮infoBox: false, // 信息框selectionIndicator: false, // 选择指示器// 隐藏 Cesium 默认 logocreditContainer: document.createElement('div')
});
此时，你将获得一个 纯净的 Cesium 空白地球，没有任何默认图层或 UI。
五、加载天地图影像
天地图（Tianditu）提供中国官方的矢量、影像和注记地图服务，支持 WMTS 协议。
1. 申请天地图 Key
- 访问 天地图官网。
- 进入 开发资源。
- 注册并申请 Key，作为后续接口调用凭证。
2. 加载矢量底图
const MAP_KEY = '你的天地图Key';viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${MAP_KEY}`,layer: 'tdtVecBasicLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible'
}));
3. 加载矢量注记
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${MAP_KEY}`,layer: 'tdtAnnoLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible'
}));
4. 加载影像底图
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${MAP_KEY}`,layer: 'tdtBasicLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible'
}));
5. 加载影像注记
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${MAP_KEY}`,layer: 'tdtAnnoLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible'
}));
六、暗色系效果
通过修改 imagery.hue 和 imagery.contrast，可以让地图更偏向暗色视觉风格：
let imagery = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${MAP_KEY}`,layer: 'tdtVecBasicLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible'
}));imagery.hue = 3; // 调整色调
imagery.contrast = -1.2;// 降低对比度
七、加载 OpenStreetMap
OpenStreetMap 是一个全球开源地图数据源，无需注册或认证，但国内访问速度较慢，仅适合学习测试。
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
}));
注意
- OpenStreetMap 数据仅用于学习研究，不可用于正式业务或涉及国家测绘标准的项目。
- 在中国境内使用时，请严格遵守相关法律法规。
八、总结
通过本教程，你已经学会了：
- 基础环境搭建：引入 Cesium 并创建最小示例。
- 无 Token 模式：纯净初始化 Cesium。
- 加载天地图：包含矢量、影像及注记。
- 相机控制：定位到指定位置。
- 地图视觉优化：暗色风格调整。
- 加载 OpenStreetMap：快速免认证测试。
下一步可以尝试加载 3D Tiles 模型、地形数据，以及更多 Cesium 的交互功能。