使用 CesiumJS 实现天地图(Tianditu)的集成是一个比较直接的过程,主要涉及到将天地图的瓦片服务集成到 Cesium 中。天地图提供了多种地图服务,包括矢量地图、影像地图、地形图等。以下是一个基本的步骤指南和示例代码,展示如何在 Cesium 应用程序中集成天地图。
步骤 1: 准备 CesiumJS
首先,确保你的项目中已经集成了 CesiumJS。你可以从 CesiumJS 官网 下载并集成库到你的项目中,或者使用 CDN 链接。
步骤 2: 获取天地图的密钥
在使用天地图的服务之前,你需要到天地图的官方网站注册并申请一个 API 密钥(AccessKey)。这是访问天地图服务的必要条件。
步骤 3: 创建 Cesium 视图
在你的 HTML 文件中,设置 Cesium 地图的容器,并初始化 Cesium 视图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cesium + Tianditu</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
<script>
Cesium.Ion.defaultAccessToken = '你的 Cesium Ion 访问令牌(如果没有使用 Ion 可以忽略)';
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
// 添加天地图瓦片层
addTiandituLayer(viewer);
function addTiandituLayer(viewer) {
var imageryProvider = new Cesium.UrlTemplateImageryProvider({
url: 'http://{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&KEY=你的天地图API密钥',
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
minimumLevel: 1,
maximumLevel: 18
});
viewer.imageryLayers.addImageryProvider(imageryProvider);
}
</script>
</body>
</html>
注意事项
- API 密钥:请确保替换 URL 中的
你的天地图API密钥
为你从天地图网站获取的实际 API 密钥。 - 子域:天地图可能使用多个子域来分散加载请求,示例中包含了 8 个子域,但请根据你实际从天地图获取的 URL 进行调整。
- 服务类型:示例中使用的是矢量地图服务(
vec
),你可以根据需要更换为其他服务类型,如影像地图(img
)、地形图(ter
)等。 - 图层级别:根据天地图提供的服务,调整
minimumLevel
和maximumLevel
的值。
通过上述步骤,在 Cesium 应用程序中成功集成并使用天地图服务。