在 Cesium 应用程序中成功集成并使用天地图服务

devtools/2024/9/20 8:57:01/ 标签: javascript

使用 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>javascript">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>