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

一、打造第一个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）会降低对比度，使图像的颜色更加柔和，并增强暗色区域的细节，从而使底图视觉上更加协调和沉稳。

2、高德地图加载

在 Cesium 中加载高德地图作为底图，可以通过配置 Cesium 的 ImageryProvider 来实现。高德地图提供了多种图层服务：

加载高德地图矢量图层

// 创建高德地图矢量图层
const gaodeVector = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
});

// 添加到地图
viewer.imageryLayers.addImageryProvider(gaodeVector);

加载高德地图影像图层

// 创建高德地图影像图层
const gaodeImagery = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
});

// 添加到地图
viewer.imageryLayers.addImageryProvider(gaodeImagery);

加载高德地图标注图层

标注图层通常需要叠加在矢量或影像图层之上：

// 创建高德地图标注图层
const gaodeLabels = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
});

// 添加到地图（通常叠加在影像图层之上）
viewer.imageryLayers.addImageryProvider(gaodeLabels);

完整示例代码

下面是一个完整的示例，展示如何在 Cesium 中同时加载高德地图的影像图层和标注图层：

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

  // 移除默认图层
  viewer.imageryLayers.removeAll();

  // 创建高德地图影像图层
  const gaodeImagery = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
  });

  // 创建高德地图标注图层
  const gaodeLabels = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
  });

  // 添加图层到地图
  viewer.imageryLayers.addImageryProvider(gaodeImagery);
  viewer.imageryLayers.addImageryProvider(gaodeLabels);

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

3、地图叠加

多源影像图层叠加​​

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

  // 加载高德矢量地图
const amapLayer = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
});

// 加载天地图卫星影像
const tiandituLayer = 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: "tdtImgBasicLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible"
});

// 添加到图层集合
viewer.imageryLayers.addImageryProvider(amapLayer);
viewer.imageryLayers.addImageryProvider(tiandituLayer);

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

通过viewer.imageryLayers数组顺序控制图层叠加层级，后添加的图层显示在最上层。

控制图层顺序和透明度

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

  // 移除默认图层
  viewer.imageryLayers.removeAll();

  // 添加高德地图矢量图层
  const gaodeVector = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
  });
  viewer.imageryLayers.addImageryProvider(gaodeVector);

  // 添加高德地图标注图层（叠加在矢量图层之上）
  const gaodeLabels = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
  });
  viewer.imageryLayers.addImageryProvider(gaodeLabels);

  const layers = viewer.imageryLayers;

  // 设置图层透明度（0.0完全透明，1.0完全不透明）
  const layer = layers.get(0);  // 获取第二个图层
  layer.alpha = 0.2;  // 设置70%透明度
})