前端中的三维技术Cesium_cesium三维可视化

一、基本介绍

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

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
1

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

四、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()
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56