Cesium的下载与使用

前言

  在这里介绍了如何从Cesium官网中下载Cesium完整的项目代码，以及在已有项目中通过npm来安装Cesium，并运行使用。如果在此基础上想要了解更多关于Cesium的知识与用法，可以参见Cesium入门教程的博客。

Cesium入门教程：https://blog.csdn.net/qq_58978006/article/details/141418040

Cesium 官网下载

Cesium搭建

官网下载链接：https://github.com/CesiumGS/cesium/releases

建议下载和使用 Cesium-1.121.zip 包。这个包通常包含了完整的 Cesium 文件和资源，设置和使用更为方便。

Cesium-1.121.zip： 这是 Cesium 的源代码压缩包，通常包括所有必要的源代码文件、示例、文档等。适用于：

• 开发和调试: 如果你需要对 Cesium 进行定制或查看其源代码，可以下载这个包。
• 离线访问: 你可以在没有网络连接的情况下使用这些文件。
• 完整性: 提供了项目的完整文件结构。

Source code (zip)： 这个包包含了 Cesium 的源代码。通常用于：

• 开发: 如果你只对源代码感兴趣，并且不需要额外的示例或文档，可以选择这个包。
• 自定义: 适合对 Cesium 进行修改或开发自定义功能时使用。

Source code (tar.gz)： 这是 Cesium 的源代码压缩包，以 tar.gz 格式提供，适用于：

• Linux/Unix 系统用户: 这种格式更适合 Unix 系统的用户（例如 Linux、macOS）。
• 开发: 和 zip 包一样，如果你只需要源代码，这个包也是合适的。

解压后打开项目：

npm install

npm start

打开 http://localhost:8080/

点击 Hello World 进入到 index.html 的页面

问题注意点

一、地球加载失败

地图加载失败Invalid access token

解决方法

1. 进入https://ion.cesium.com/stories官网
2. 申请账号拿到AccessTokens
3. 在创建Cesium地图前使用Cesium.Ion.defaultAccessToken = ‘你的AccessTokens’
   

二、开发者工具的控制台中输出以下错误

将infoBox设为false即可

const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
});

页面介绍

点击 Documentation 可以查看 Cesium 的完整API说明

点击 Sandcastle 可以查看 Cesium 的各种模型示例以及代码

点击 Tutorials 可以查看 Cesium 指南

点击 GitHub 获取官方的 GitHub 存储库

获取Cesium的模型示例

将 Sandcastle 中的模型示例放到 index.html 中进行操作与自定义

  由于在 Sandcastle 中的示例只有部分代码，所以如果想要进一步研究模型示例的API与代码逻辑，可以在项目根目录下的 Apps > Sandcastle > gallery 下的HTML文件中看到所有 Sandcastle 示例的完整代码。需要对模型代码进行自定义的话可以将代码放到 index.html ，按照以下步骤操作：

1.根据示例的名称找到相应的HTML文件

2.拷贝到index.html并替换原先代码，同时更新引入的文件路径

3.更新完成后刷新打开 Hello World

npm安装Cesium

安装cesium依赖

npm install cesium

• 如果只是使用这条命令的话会有问题，缺少vite-plugin-cesium插件

npm i cesium@1.99 vite-plugin-cesium

• 直接使用这个指令就可以了，其中@1.99是指定了下载的cesium版本，这个不固定。

修改vite.config.js文件

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import cesium from 'vite-plugin-cesium';

export default defineConfig({
  plugins: [vue(), cesium()],
});

注意：

检查项目中是否已经有配置 vue()，如果有就不要重复配置，否则会出现以下问题

在 Vue 组件中使用 Cesium

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted } from 'vue';

const init = ()=> {
  const viewer = new Cesium.Viewer('cesiumContainer')
}

onMounted(()=>{
  init()
})
</script>

<style lang="scss" scoped></style>

这个时候地球模型可能加载失败同时出现以下报错

问题一

解决方法
将infoBox设为false即可

const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
});

问题二

地图加载失败Invalid access token

解决方法

1. 进入https://ion.cesium.com/stories官网
2. 申请账号拿到AccessTokens
3. 在创建Cesium地图前使用Cesium.Ion.defaultAccessToken = ‘你的AccessTokens’
   

解决问题再次启动

至此成功将Cesium引入

参考

如果想要进一步探索有关Cesium的API以及属性对象的使用，可以参考
Cesium入门教程：https://blog.csdn.net/qq_58978006/article/details/141418040
Cesium的下载与使用可参考博客：cesium10分钟快速入门 Cesium快速入门