Cesium快速入门到精通系列教程-海口c网

Cesium快速入门到精通系列教程

article/2025/8/22 16:41:41

一、打造第一个Cesium应用

1、官方渠道下载Cesium（可选择历史版本）

GitHub Releases页面

访问 Cesium GitHub Releases，此处列出了所有正式发布的版本。

通过标签（如 v1.95.0）选择目标版本，下载对应的压缩包（包含源码、构建文件和网页）。

优势：获取官方认证版本，附带完整变更日志和修复记录。

2、下载解压后依次执行以下命令，可以在本地运行Cesium：

yarn install
yarn start

3、Vue3中使用Cesium：

npm create vue@latest #安装当前最新版本的Vue3
cd cesium1.93 
npm install
npm i cesium@1.93 #安装cesium1.93

以上命令执行完成后，将node_modules中cesium的以下四个目录复制到public目录：

另外，将node_modules中cesium的Widgets目录复制到src目录：

App.vue中代码如下：

<template><div id="cesiumContainer"></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = '你的AccessTokens';
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer");})</script><style scoped>
*{margin: 0;padding: 0;
}#cesiumContainer{width: 100wh;height: 100vh;
}
</style>

cmd中执行

npm run dev

二、Cesium基础设置：

<template><div id="cesiumContainer"></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MzFiNGJmOS1jYzBmLTQyYjYtOTNhOS0wMThjZWE3YzM0MGMiLCJpZCI6MjU5MTEyLCJpYXQiOjE3MzI5NzM5MzB9.RUpB02gjxFwpqmbND4OKWyR7-VntYuohtjlXklFB6UE'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, // 西边经度20.4, // 南边维度110.4, // 东边经度61.2) // 北边维度onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer");viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo
})</script><style scoped>
* {margin: 0;padding: 0;
}#cesiumContainer {width: 100wh;height: 100vh;
}
</style>

// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, // 西边经度20.4, // 南边维度110.4, // 东边经度61.2) // 北边维度

viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo

三、viewer查看器设置

  const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框是否可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 帮助按钮是否可见animation: false, // 播放控制按钮是否可见timeline: false, // 时间轴是否可见fullscreenButton: false, // 全屏按钮是否可见});

四、Cesium自定义地图与地图叠加

1、天地图加载

天地图是中国国家基础地理信息系统，由中国测绘地理信息局和国家地理信息公共服务平台共同开发和运营。它提供多项地理信息服务，包括地图数据、地理编码、路径规划以及地理搜索等。天地图的目标是为各行业提供高质量、全面的地理信息数据和解决方案。

天地图调用申请：

登录已有账号。如果尚未注册，请先进行注册。

访问天地图首页，进入开发资源，然后点击地图API。

在地图API页面，点击申请Key。

选择“创建新应用”，并填写应用的详细信息。

申请完成后，您可以查看新应用的Key。

在服务调用时，请使用刚刚申请到的Key作为Token。

天地图影像加载：

中国的天地图（Tianditu）提供了丰富的影像与矢量数据，通过 Cesium 可以轻松地将天地图的服务加载到三维地球中。下面是如何加载天地图的矢量图层、影像图层及其注记图层的示例。

矢量底图：

  const MAP_KEY = '你的天地图访问密钥';const viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/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"})});

矢量注记：

  const MAP_KEY = '你的天地图访问密钥';const viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/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"})});

影像底图：

  const MAP_KEY = '你的天地图访问密钥';const viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/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"})});

影像注记：

  const MAP_KEY = '你的天地图访问密钥';const viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/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"})});

使用 Cesium.WebMapTileServiceImageryProvider 类来添加一个WMTS（Web Map Tile Service）图层。具体配置包括：

url：指定底图的服务地址，这里我们使用天地图提供的矢量服务。
layer：图层的名称。
style：图层样式，这里使用默认样式。
format：指定图块格式为JPEG。
tileMatrixSetID：使用Google Maps兼容的平铺矩阵集。

该配置将返回一个矢量底图，可以在Cesium视图中进行渲染。

调整色调和对比度：

为了创建一个视觉上更具冲击力的暗黑色系效果，我们对底图的色调和对比度进行了调整：

imagery.hue = 3; // 图层色调  
imagery.contrast = -1.2; // 图层对比度

imagery.hue：此属性用于调整底图的色调。例如设置为3可能会使颜色偏向于蓝色或绿色，具体效果依赖于底图的原始色调。
imagery.contrast：此属性设置对比度。负值（如-1.2）会降低对比度，使图像的颜色更加柔和，并增强暗色区域的细节，从而使底图视觉上更加协调和沉稳。