2024WebGIS新手必看学习攻略（4）

往期回顾：

2024WebGIS新手必看学习攻略（1）

2024WebGIS新手必看学习攻略（2）

2024WebGIS新手必看学习攻略（3）

今天接着介绍三维框架Cesium的知识体系。

Cesium是一款使用JavaScript开发的基于WebGL的，能够实现三维地球和地图可视化的JS库。

Cesium支持海量的三维模型数据、影像数据、地形高程数据、矢量数据等丰富的地理数据的加载。在交通，规划，城市管理，地形仿真等领域有非常广泛的应用。

前面也给大家反复介绍过cesium，它是目前功能最齐全的三维GIS开发框架，也是在就业过程中，企业最看重、面试最容易被考核的一个。

初学者刚接触Cesium时，看到它的文档，可能会被震惊到。

毕竟cesium库中的类实在是太多，每一个类又有大量的函数和属性，而且官网的文档又是英文，这给我们学习GIS开发的同学带来了极大的困扰。

cesium.js库

但是接触多了，我们会发现，其实Cesium开发文档里边的好多类属性和方法都是一样的。比如，在Cesium中，一个非常重要的类是Viewer。

如果要使用Cesium创建一个三维窗口，几乎无法避免使用Viewer类。因为它代表了Cesium的三维窗口。

接下来，让我们来看一个具体的实例，结合Vue3、Vite和Cesium来进行开发。

在我们搭建完环境之后，运行出来的第一个画面就是一个地球，还有个各种各样的 Widget，我们学到的第一行代码就是：

var viewer=new Cesium.Viewer(' cesiumContainer')

在这行代码中我们见到了的第一个类就是Viewer，但凡创建任何一个三维窗口可能都逃脱不了Viewer类的使用。

Viewer基本上也就代表这一个Cesium的三维窗口。

Cesium官网：https://cesium.com/

进来以后，我们可以看到这里有很多库：

点这里，可以下载cesium的安装包，但是不需要下载最新版，因为最新版有很多功能更新不同步，所以下载1.99版本就够用了。

接下来，让我们来看一个具体的实例，结合Vue3、Vite和Cesium来进行开发。

首先，你需要使用以下命令创建一个项目：

vue3+vite+ceisum

pnpm创建项目

pnpm create vite 项目名

然后在项目目录下执行以下命令安装Cesium和相关依赖：ur_project_name

pnpm install cesium

接下来，你需要对项目进行一些配置，以便可以正确地使用Cesium。在项目根目录下，创建一个vite.config.js文件，并添加以下内容：

import { defineConfig } from 'vite';
export default defineConfig({
server: {
open: true, // 自动打开浏览器
},
resolve: {
alias: {
cesium: 'cesium/Cesium',
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/assets/main.scss";',
},
},
},
esbuild: {
minify: false, // 禁止压缩Cesium的代码
},
});

然后，在使用Cesium的地方，比如在一个Vue组件中，添加以下代码：

<template>
  <div id="cesiumContainer"></div>
</template>
​
<script>
import { onMounted } from 'vue';
import Cesium from 'cesium';
​
export default {
  name: 'CesiumView',
  setup() {
    onMounted(() => {
      const viewer = new Cesium.Viewer('cesiumContainer');
    });
​
    return {};
  },
}
</script>
我们首先导入onMounted函

我们首先导入onMounted函数和Cesium库。然后，在组件的setup函数中，使用onMounted函数来在组件挂载时创建一个Cesium的Viewer实例，并传入一个DOM元素的id作为参数进行初始化。

Cesium课堂作业：

shader波纹圆

标志性建筑

全局飞线

市中心特效

市中心特效

市中心特效

自定义水面

更多cesium开发学习内容↓↓↓

免费领取GIS开发相关学习资料