写在前面：随着市场对数字孪生的需求日益增多，对于前端从业者的能力从对框架vue、react的要求，逐步扩展到2D、3D空间的交互，为用户提供更紧密的立体交互。近年来前端对GIS的需求日益增多。本文将记录WebGIS的学习之旅，从实战项目入门，挖掘Cesium.js API，并逐步丰富项目。

目录

一、WebGIS简介

CesiumJS简介

CesiumJS源代码

二、项目快速搭建

使用vite快速搭建vue3+typeScript

安装Cesium插件

配置vite.config.js

清空style.css

在App.vue里面进行全局导入

运行程序

三、认识Cesium四大类

查看器类Viewer

场景类Scene

实体类​编辑Entity

数据源集合类DataSourceCollection

四、Cesium的坐标与转换

1.WGS84经纬度坐标系-没有实际的对象

2.WGS84弧度坐标系（Cartographic）

构造函数法

静态函数法

3.笛卡尔空间直角坐标系(Cartesian3)*重要

4.平面坐标系(Cartesian2)

5.4D笛卡尔坐标系(Cartesian4)-用的较少

坐标系相互转换

WGS84转笛卡尔空间直角坐标系

笛卡尔空间直角坐标系转WGS84

平面坐标系转场景WGS84坐标

屏幕坐标转地表坐标

屏幕坐标转椭球面坐标

五、重要Cesium相机系统

1.setView方法

2.flyTo方法

3. lookAt方法

4.viewBoundingSphere方法

六、Cesium地图和地形加载

注册Cesium Ion

加载公路地图数据

加载地形数据

添加建筑体

七、Cesium空间数据加载

几何体——点加载

几何体——线加载

几何体——面加载

几何体——3D模型加载

文字——标签加载

八、Cesium空间数据管理

添加我的博客立牌

entity增删改

add新增

remove移除

getById获取当个实体

removeAll移除全部

九、Cesium鼠标交互

案例-鼠标左击弹出消息

十、三维数据格式3DTiles

十一、Cesium时间系统

十二、Cesium粒子系统

一、WebGIS简介

WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。

CesiumJS简介

Cesium是使用JavaScript开发的基于WebGL的，实现三维地球和地图可视化的JS库。支持海量的三维模型数据、影像数据，地形数据，矢量数据等丰富的地理数据加载。在智慧城市、交通、规划、城市管理、地形仿真领域有着非常广泛的应用。Cesium为三维的GIS提供了一个高效的数据可视化平台。

Viewer - Cesium Documentation

CesiumJS是目前最流行的三维数字地球渲染引擎，不仅可以在网页端高效运行，而且可以借助虚幻引擎在CS端渲染出和游戏一样的高质量效果。

Cesium支持3D、2D、2.5D形式的地图展示，可以自行绘制图形，高亮区域。

CesiumJS源代码

访问官网

Downloads – Cesium

二、项目快速搭建

快速搭建一个下面的Cesium.js官方示例

使用vite快速搭建vue3+typeScript

使用下面命令创建vue项目

<code>npm create vite@latest

设置项目名称

选择使用vue

选择是否使用typescript+vue

安装Cesium插件

<code>npm i cesium vite-plugin-cesium vite -D

配置vite.config.js

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()]

});

清空style.css

在App.vue里面进行全局导入

需要id为cesiumContainer的div挂载后再执行Cesium的代码，给html、body加样式屏幕撑满。

注意：viewer实例的创建必须在onMounted之后进行，确保元素已经挂载到页面上，保证地图的顺利渲染

<code><template>

<div ></div>

</template>

<script setup>

import * as Cesium from 'cesium';

import { onMounted } from 'vue';

onMounted(() => {

const viewer = new Cesium.Viewer('cesiumContainer',{

infoBox: false, // 禁用沙箱，解决控制台报错

});

});

</script>

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

html,body,#cesiumContainer{

width: 100%;

height: 100%;

padding: 0;

margin: 0;

overflow: hidden;

}

</style>

这段代码中的cesiumContainer是用作Cesium Viewer（查看器）的挂载点。在WebGL渲染中，无论是二维还是三维图像，都需要一个容器来承载渲染的内容。在这里，<div ></div> 元素就是用来承载Cesium Viewer所渲染的内容。

当你创建一个Cesium Viewer实例时，你需要指定一个DOM元素作为其容器，Cesium会将渲染的内容放置在这个DOM元素中。

通过new Cesium.Viewer('cesiumContainer', {...})，将Cesium Viewer挂载到id为cesiumContainer的div元素上，从而实现了Cesium渲染的效果。

其实无论是二维还是三维图像渲染，都需要一个挂载点来显示渲染的内容，而在这里cesiumContainer就充当了这样的作用。原理都是相同的哈~

运行程序

npm run dev

即可得到上面示例的gif效果

页面涉及的空间如下，所有的空间都可以关闭

geocoder: 位置查找工具

baseLayerPicker: 图层选择器（地形影像服务）

homeButton: 视角返回初始位置

fullscreenButton: 全屏

animation: 左下角仪表盘（动画器件）

timeline: 底部时间线

sceneModePicker: 选择视角的模式（球体、平铺、斜视平铺）

navigationHelpButton: 导航帮助按钮

infoBox: 信息框控件

navigationInstructionsInitiallyVisible: 导航说明初始可见

shouldAnimate: 动画

requestWaterMask: 请求水面罩

requestVertexNormals: 请求顶点法线

三、认识Cesium四大类

查看器类Viewer

Viewer是三维数据展示的主要窗口，此外还包含了一些基础控件。在定义Viewer对象的同时需要设定基础部件、图层等的初始化状态。

用法示例：

接收两个参数，第一个参数指定地图主窗口div的id；第二个参数options是Viewer的可选设置参数。包含图层、地形、时间系统等参数；种类多样。

const viewer = new Cesium.Viewer('cesiumContainer',{

infoBox: false,

});

第二个参数接收的对象表示页面可关闭的控件，控件参数解释见上，代码示例

Viewer类，关闭左下角仪表盘及底部时间线

<script setup lang="ts">code>

import * as Cesium from 'cesium';

import { onMounted,ref} from 'vue';

const viewer = ref();

onMounted(() => {

viewer.value = new Cesium.Viewer('cesiumContainer', {

infoBox: false, // 禁用沙箱，解决控制台报错

animation: false,//关闭左下角仪表盘（动画器件）

timeline:false,//底部时间线

});

});

效果展示：红色圈出的部分是隐藏的控件

场景类Scene

<code> viewer.value.dataSource.add(

Cesium.GeoJsonDataSource.load("../../**.topojson")

)

四、Cesium的坐标与转换

Cesium是具有真实地理坐标的三维球体，而用户是通过二维屏幕与Cesium进行操作。我们将三维模型绘制在三维球体上就需要地理坐标和屏幕坐标之间做转换。接下来介绍Cesium的五种坐标系，及坐标系直接的相互转换

1.WGS84经纬度坐标系-没有实际的对象

简单点就是下面介绍的，WGS84是一种坐标系统，用于GPS全球定位系统使用。快把你初中高中的地理知识拿出来回忆回忆