一、基本介绍
前端中的三维技术主要有以下几种：
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
npm install cesium
2.找到node_modules/cesium，并且复制它目录下Assets、ThirdParty、Widgets、Workers文件夹到public文件夹下面
3、main.js中引入css样式，引入Widgets中的widgets.css
4.可以封装一个使用cesium的js文件。
import * as Cesium from 'cesium'
Cesium.Ion.defaultAccessToken ="token"; //这里的token是自己申请的token
window.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水印 或 css
this.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 = this
this.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)