第02章— Vue3和CesiumJs的融合之旅：构建三维地理信息系统入门指南

在上一篇博客中，我们深入探讨了Cesium这一强大开源库的广阔天地，为那些渴望在三维地球空间中遨游的探索者们提供了一份详实的阅读指南。VueJs作为目前前端的主流框架，其功能非常强大。
自然而然地，将Cesium的无限潜能与Vue 3的现代化框架优势相结合，成为了许多前端开发者心中的第一选择。

因此，在接下来的篇章里，我们将踏上一场新的技术探险之旅，深入探讨Cesium与Vue 3的无缝融合之道。我们将从环境搭建起步，逐步开发出我们的第一个cesium程序，旨在为你揭示如何在Vue 3的框架下，高效、优雅地集成Cesium的丰富功能。通过实战案例与代码解析，力图让你在实际操作中掌握这两项技术结合的精髓，为你的项目增添一抹不一样的光彩。让我们一起启程，探索Cesium与Vue 3联袂演绎的精彩世界吧！

准备工作

在着手搭建Vue+Cesium环境之前，做好充分的准备工作是至关重要的第一步。首先，确认你的操作系统已安装Node.js，它是运行Vue及其它现代JavaScript框架的基石。建议通过官方渠道获取最新的长期支持（LTS）版本，以保证稳定性和兼容性。随后，利用Node.js自带的包管理器npm（或可选的yarn），安装Vue CLI（命令行工具界面），这是创建、管理和快速原型化Vue项目的官方工具。

• 安装Node.js (推荐使用LTS版本)

为了确保后续环境的搭建，请用下面三种任意一种方式检查NodeJs是否安装成功。

1. 命令行检查：
   打开终端（在Windows上是命令提示符或PowerShell，在macOS和Linux上是Terminal），输入以下命令：

   node -v
   

   如果Node.js已安装，这条命令将输出您安装的Node.js版本号。如果命令未找到或无输出，可能说明Node.js未安装或未正确配置到系统路径中。

2. npm版本检查：
   既然Node.js通常会附带npm（Node包管理器），您也可以通过检查npm的版本来间接验证Node.js的安装情况：

   npm -v
   

   类似地，这条命令会输出npm的版本号，如果存在的话。

3. 运行简单的脚本：
   另一种验证方式是尝试运行一个简单的Node.js脚本。创建一个名为test.js的文件，内容如下：

   console.log("Hello, Node.js!");
   

   然后在终端中，切换到该文件所在的目录并运行：

   node test.js
   

   如果Node.js安装并配置正确，您应该能看到输出的"Hello, Node.js!"消息。

通过上述任何一种方法，都可以快速判断Node.js是否已经成功安装并准备好使用。

创建Vue 3项目

首先，使用Vite创建一个新的Vue 3项目。打开终端，运行以下命令：

npm install -g create-vite
create-vite my-cesium-app --template vue
cd my-cesium-app

推荐各位读者使用和我一样的方式创建VueJs应用，这样可以保证我们项目的基本结构和基础代码一致，避免出现一些未知错误。
创建完之后，项目的目录结构如下：

后面我们主要会修改style.css，vite.config.js，main.js，App.vue文件。

安装Cesium依赖

Cesium可以通过npm安装为项目依赖。在项目根目录下执行：

npm install cesium

修改style.css

这一步修改style.css的目的主要是为了将html元素id为app的挂载dom宽高修改了，便于我们观察第一个cesium应用。

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

.card {
  padding: 2em;
}

#app {
  width: 100vw;
  height: 100vh;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

配置Vite以支持Cesium

为了让Vite更好的搭配cesium使用，你需要在项目根目录下的vite.config.js文件中添加以下配置：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: './', // 根据部署需要可选配置
  server: {
    port: 3000, // 自定义端口
  },
});

注册Cesium ion账号获取token

为什么需要创建cesium ion账号
Cesium Ion 是Cesium提供的一个云服务平台，它允许用户上传和托管3D地理空间数据、访问全球卫星图像和地形数据、以及利用Cesium的三维地球视图构建应用。当您需要通过Cesium的应用程序访问这些在线资源和服务时，就需要注册并获取一个访问令牌（Token）。

注册Cesium Ion并获取Token的原因：

1. 数据访问权限：Token作为身份验证的凭证，确保只有经过授权的用户能够访问您的数据或Cesium Ion提供的服务。这包括但不限于地形数据、影像服务和其他GIS数据集。

2. 计量和管理：Cesium Ion可能对某些服务或数据使用设有配额限制。Token使得平台能够跟踪和管理每个用户的资源使用情况，确保服务的可持续性。

3. 安全性：通过Token机制，可以保护数据不被未经授权的第三方访问，增加了应用和数据的安全性。

4. 个性化与定制：Token与用户账户关联，允许用户根据自己的需求定制服务，比如设置特定的数据源、样式或访问权限。

5. 支付与计费：对于某些高级功能或大量数据使用，Cesium Ion可能要求付费。Token与用户的支付信息相关联，便于管理和处理计费事宜。

因此，注册Cesium Ion并获取Token不仅是访问其丰富资源的钥匙，也是保障数据安全、进行资源管理以及享受个性化服务的基础。
在学习cesium的过程中，推荐大家使用线上的一些地理信息资源，避免自己花大量时间找地理信息资源（如图层信息，地形信息等等），节省大家的时间。

cesium ion注册自己的账号，申请自己的token在如下界面

引入Cesium样式和初始化地图

在你的主入口文件（通常是src/main.js或src/main.ts）中，引入Cesium的CSS和初始化地图：

import { createApp } from 'vue';
import App from './App.vue';
import 'cesium/Source/Widgets/widgets.css'; // 引入Cesium样式
import * as Cesium from 'cesium';

window.CESIUM_BASE_URL = '/';
Cesium.Ion.defaultAccessToken = '自己申请的token';
createApp(App).mount('#app');

将cesium的静态资源放在静态资源中

在node_modules中，找到下面几个包，拷贝出来，放在public目录下面，作为静态资源提供给cesium使用。

• node_modules/cesium/Build/Cesium/Workers
• node_modules/cesium/Build/Cesium/ThirdParty
• node_modules/cesium/Build/Cesium/Assets
• node_modules/cesium/Build/Cesium/Widgets

如图所示：

在Vue组件中使用Cesium

在你的Vue组件（例如src/App.vue）中，创建一个用于显示地图的容器：

<template>
  <div id="cesiumContainer">div>
template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
  });
});
script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
style>

运行项目

一切就绪后，启动Vite开发服务器：

npm run dev

浏览器将自动打开http://localhost:3000/，展示你刚刚创建的Cesium地图应用。

至此，你已成功搭建了一个基于Vue 3 + Vite的Cesium应用。这只是开始，在后面的章节我们会继续vue3框架为基础探索更多Cesium的功能，比如添加自定义图层、实现交互逻辑等，将你的GIS应用推向新的高度。

六、总结

通过上述步骤，我们成功地在Vue 3项目中集成了Cesium.js，并创建了一个基础的三维地图应用。这只是开始，Cesium.js支持的特性远不止于此，包括但不限于地形分析、3D模型加载、时间动态数据展示等。结合Vue 3的组件化和响应式特性，开发者可以构建出功能丰富、交互友好的三维地理信息系统。后面的章节我们继续深入学习Cesium.js，探索更多可能性，开启三维地球之旅吧！