往期回顾:
今天接着介绍三维框架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开发学习内容↓↓↓