一、基本介绍

前端中的三维技术主要有以下几种：

WebGL：WebGL是一种基于OpenGL ES 2.0标准的3D图形渲染技术，它能够在Web浏览器中呈现出高性能、交互式的3D视觉效果。

Three.js：Three.js是一个轻量级的JavaScript库，它为WebGL提供了更高层次的抽象，使得使用WebGL变得更加容易。通过Three.js，开发者可以快速创建3D场景和交互应用程序。

A-Frame：A-Frame是一个基于WebVR的框架，它允许开发者使用HTML编写虚拟现实（VR）场景，同时可以利用WebGL和Web Audio API来增强体验。

除此之外，还有一些其他的前端三维技术，例如Babylon.js和Cesium等。这些技术都可以帮助开发者创建出更加生动、逼真的3D图像和交互体验。

二、Cesium框架

这篇博客重点是讲解cesium框架，Cesium是一个基于WebGL的开源3D地球可视化引擎，它可以在现代浏览器中实现高性能、交互式的3D地球可视化效果。Cesium支持矢量和栅格数据的可视化，包括地形、气象、遥感等多种类型的数据。

Cesium具有以下几个特点：

支持全球范围内的数据可视化：Cesium可以将全球范围内的数据以高性能的方式呈现出来，并提供了丰富的交互功能，例如缩放、旋转、漫游等操作。

开放式的插件接口：Cesium提供了丰富的插件接口，让开发者可以轻松扩展和定制其功能。

多平台支持：Cesium不仅可以在桌面端使用，还可以在移动设备上运行，并支持主流的Web浏览器。

易用性：Cesium提供了丰富的示例和API文档，使得开发者可以快速上手，并快速构建自己的3D地球可视化应用程序。

Cesium被广泛应用于GIS（地理信息系统）、游戏、虚拟现实等领域，并且已经得到了众多商业机构和组织的采用。

三、Cesium框架在Vue中的使用

这里主要讲解如何在vue中的使用，如果只是在普通H5原生项目中使用的话，通常只需要引入相关的cdn路径，或者下载相关的静态文件便可，但是在Vue中我们可以对其进行简单的封装，让项目的规范性和工程的复用性和封装更优。

1.使用包管理工具下载cesium

提示：如果出现莫名其妙的node_module报错，那可能是版本问题，可以尝试下载其他版本。例如我用了若依后台使用1.104版本则出现了兼容问题。

npm install cesium

2.找到node_module中的cesium文件夹，把Assets，ThridPart，Widgets，Workers四个文件夹复制到public文件夹下面

3.main.js中引入css样式，引入Widgets中的widgets.css

4.可以封装一个使用cesium的js文件。

import * as Cesium from 'cesium'Cesium.Ion.defaultAccessToken ="token"; //这里的token是自己申请的tokenwindow.CESIUM_BASE_URL = "/";class mMap{constructor(id){this.id = id; //地图容器this.viewer = null;this.scene = null;}//初始化地图initMap(){console.log(this.id)this.viewer = new Cesium.Viewer(this.id,{geocoder: false,//是否显示地名查找控件sceneModePicker: false, //是否显示投影方式控件navigationHelpButton: false,//是否显示帮助信息控件baseLayerPicker: false, //是否显示图层选择控件homeButton: false,//是否显示Home按钮fullscreenButton: false,//是否显示全屏按钮animation: false, //左下角的动画控件的显示shouldAnimate: false, //控制模型动画timeline: false, //底部的时间轴selectionIndicator: false,infoBox: false});//定位到指定位置this.viewer.camera.flyTo({destination : Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 1500.0)});//去cesium logo水印 或 cssthis.viewer.cesiumWidget.creditContainer.style.display = "none";//创建场景this.scene = this.viewer.scene;if(!this.scene.pickPositionSupported){window.alert("此浏览器不支持拾取位置！")}this.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas); }}export function createMap(id){window.map = new mMap(id)}

四、Cesium的简单使用

1.加载立体的地形，很简单，只需要在初始化的配置中添加：terrainProvider: Cesium.createWorldTerrain()。表示加入地形支持。

this.viewer = new Cesium.Viewer(this.id, {geocoder: true, //是否显示地名查找控件sceneModePicker: false, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件baseLayerPicker: false, //是否显示图层选择控件homeButton: false, //是否显示Home按钮fullscreenButton: false, //是否显示全屏按钮animation: false, //左下角的动画控件的显示shouldAnimate: false, //控制模型动画timeline: false, //底部的时间轴selectionIndicator: false,infoBox: false,terrainProvider: Cesium.createWorldTerrain()});

2.添加点位，并且给点位添加一些事件。

//添加点位let entity = new Cesium.Entity({id: 'flyTmp',position: Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 5800.0),point: {pixelSize: 20,color: Cesium.Color.RED.withAlpha(0.9),outlineColor: Cesium.Color.RED.withAlpha(0.9),outlineWidth: 1,disableDepthTestDistance: Number.POSITIVE_INFINITY,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,}});// 为实体对象添加click事件entity.clickable = true;entity.description = '点位信息';this.viewer.entities.add(entity);this.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);let self = thisthis.handler.setInputAction(function (movement) {var pickedObject = self.viewer.scene.pick(movement.position);if (Cesium.defined(pickedObject) && pickedObject.id === entity) {console.log('你点击了点位：', pickedObject);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK)// 添加一个带有图标的3d点位let iconEntity = new Cesium.Entity({id: 'iconEntity',position: Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 5800.0),billboard: {image: logo,scale: 0.5,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,}});// 为实体对象添加click事件iconEntity.clickable = true;iconEntity.description = '点位信息';this.viewer.entities.add(iconEntity);this.handler.setInputAction(function (movement) {var pickedObject = self.viewer.scene.pick(movement.position);if (Cesium.defined(pickedObject) && pickedObject.id === iconEntity) {// 点击实体之后，需要有一些动画，实现动画self.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 3000.0),duration: 2,});}}, Cesium.ScreenSpaceEventType.LEFT_CLICK)