1. Basic introduction
The three-dimensional technologies in the front end mainly include the following types:
WebGL: WebGL is a 3D graphics rendering technology based on the OpenGL ES 2.0 standard, which can present high-performance, interactive 3D visual effects in a web browser.
Three.js: Three.js is a lightweight JavaScript library that provides a higher level of abstraction for WebGL, making it easier to use WebGL. With Three.js, developers can quickly create 3D scenes and interactive applications.
A-Frame: A-Frame is a WebVR-based framework that allows developers to write virtual reality (VR) scenes using HTML while leveraging WebGL and Web Audio APIs to enhance the experience.
In addition, there are some other front-end 3D technologies, such as Babylon.js and Cesium. These technologies can help developers create more vivid and realistic 3D images and interactive experiences.
Two, Cesium framework
This blog focuses on explaining the cesium framework. Cesium is an open source 3D earth visualization engine based on WebGL, which can achieve high-performance, interactive 3D earth visualization in modern browsers. Cesium supports the visualization of vector and raster data, including terrain, meteorology, remote sensing and other types of data.
Cesium has the following characteristics:
Support global data visualization: Cesium can present global data in a high-performance manner, and provides rich interactive functions, such as zooming, rotating, roaming and other operations.
Open plug-in interface: Cesium provides a rich plug-in interface, allowing developers to easily extend and customize its functions.
Multi-platform support: Cesium can be used not only on the desktop, but also on mobile devices, and supports mainstream web browsers.
Ease of use: Cesium provides a wealth of examples and API documentation, allowing developers to quickly get started and quickly build their own 3D earth visualization applications.
Cesium is widely used in GIS (Geographic Information System), games, virtual reality and other fields, and has been adopted by many commercial institutions and organizations.
3. The use of Cesium framework in Vue
Here we mainly explain how to use it in vue. If it is only used in ordinary H5 native projects, usually you only need to introduce the relevant cdn path, or download the relevant static files, but in Vue we can simply implement it Encapsulation makes the standardization of projects and engineering reusability and encapsulation better.
1. Use the package management tool to download cesium
npm install cesium
2. Find node_modules/cesium, and copy the Assets, ThirdParty, Widgets, Workers folders under its directory to the public folder
3. Introduce css style into main.js, and introduce widgets.css in Widgets
4. You can encapsulate a js file using cesium.
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)
}
Fourth, the simple use of Cesium
1. Loading the three-dimensional terrain is very simple, just add: terrainProvider: Cesium.createWorldTerrain() in the initialization configuration. Indicates adding terrain support.
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. Add points and add some events to the points.
//添加点位
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)