前端中的三维技术主要有以下几种:
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是一个基于WebGL的开源3D地球可视化引擎,它可以在现代浏览器中实现高性能、交互式的3D地球可视化效果。Cesium支持矢量和栅格数据的可视化,包括地形、气象、遥感等多种类型的数据。
Cesium具有以下几个特点:
支持全球范围内的数据可视化:Cesium可以将全球范围内的数据以高性能的方式呈现出来,并提供了丰富的交互功能,例如缩放、旋转、漫游等操作。
开放式的插件接口:Cesium提供了丰富的插件接口,让开发者可以轻松扩展和定制其功能。
多平台支持:Cesium不仅可以在桌面端使用,还可以在移动设备上运行,并支持主流的Web浏览器。
易用性:Cesium提供了丰富的示例和API文档,使得开发者可以快速上手,并快速构建自己的3D地球可视化应用程序。
Cesium被广泛应用于GIS(地理信息系统)、游戏、虚拟现实等领域,并且已经得到了众多商业机构和组织的采用。
这里主要讲解如何在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是自己申请的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) }
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)