vue-cesium第二期-使用之功能简单介绍

前言

好的，老伙计们，上一篇我们实现了vue-cesium插件的初始化，对于非常丑的初始化代码，那么这一篇我们要改造成我们的想要的简单功能页面，同时也是实现几个好玩的功能

比如这个旋转地球。。。。。

精简页面

我们把里面的内容删减一下
留下一个vc-viewer地图容器，

留下一个vc-layer-imagery地图图层——用法参数介绍

留下一个vc-terrain-provider-cesium地图纹理——用法参数介绍

<template>
  <div class="home viewer">
    <vc-viewer
        ref="vcViewer"
        :info-box="false"
        :contextOptions="contextOption"
        @ready="onViewerReady">
      <vc-layer-imagery>
        <vc-imagery-provider-arcgis ref="layer"></vc-imagery-provider-arcgis>
      </vc-layer-imagery>
      <vc-terrain-provider-cesium ref="provider"></vc-terrain-provider-cesium>      
    </vc-viewer>
  </div>
</template>

<script lang="ts">
import {ref, onBeforeUnmount} from 'vue'


export default {
  name: 'Home',
  setup() {
    const vcViewer = ref<any>(null)

    const imageryProvider = ref(null)

    // 地图影响
    const layer = ref<any>(null)

    const contextOption = {
      webgl: {
        alpha: true,
      }
    }

    let viewerUp:any = null
    // eslint-disable-next-line no-unused-vars
    let CesiumUp:any = null

    const methods =  {
      onViewerReady ({Cesium, viewer}: {Cesium: any, viewer:any}) {
        console.log('onViewerReady执行了')

        viewerUp = viewer
        CesiumUp = Cesium

        // 地图纹理样式
        // imageryProvider.value = new Cesium.ArcGisMapServerImageryProvider({
        //   url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        // })

        // 隐藏天空盒子，设置透明度
        viewer.scene.skyBox.show = false;
        viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);

        // 隐藏logo
        viewer._cesiumWidget._creditContainer.style.display = "none";
        // 禁止左键拖动视角
        // viewer.scene.screenSpaceCameraController.enableRotate = false;
        // 禁止中键控制视角缩放
        // viewer.scene.screenSpaceCameraController.enableZoom = false;
        // 禁止中键旋转视角
        // viewer.scene.screenSpaceCameraController.enableTilt = false;

        // 解决贴地区块显示不全
        viewer.scene.globe.depthTestAgainstTerrain = false
      },
    }

    onBeforeUnmount(() => {
      layer.value.unload()
      vcViewer.value.unload()

      setTimeout(() => {
        let gl = viewerUp.scene.context._originalGlContent
        viewerUp.destory();
        gl.getExtension('WEBGL_lose_context').loseContext()
        gl = null;
      }, 1000)
    });

    return {
      ...methods,
      vcViewer,
      layer,
      contextOption,
      imageryProvider,
    }
  },
}
</script>

效果不就出来了，10M大图预警！！！

第一个小功能增加云层，显得真实

在onViewerReady方法中增加

// 创建云层
const cloudBox = new Cesium.CloudBox({
  url:"http://support.supermap.com.cn:8090/webgl/examples/webgl/images/clouds-supermap-sm.png"
});

viewer.scene.cloudBox = cloudBox;

真实感一下就出来了

第二个小功能地球自转

这个是直接copy的cesium导出截图，cesium实现相机绕地旋转效果，自定义背景，地球自转

1. 新建ts文件

/*
 * @Description: 地球自转效果
 * @Version: 1.0
 * @Author: Julian
 * @Date: 2022-02-25 15:14:20
 * @LastEditors: Julian
 * @LastEditTime: 2022-02-26 12:18:03
 */
​
​
/*
 * @description: 地球自转类
 */
class GlobeRotate {
    constructor(viewer) {
        this._viewer = viewer;
    }
​
    // 根据国际天体参考系计算旋转矩阵
    _icrf() {
        if (this._viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
            return ture;
        }
        console.log(this._viewer.camera.position);
        let icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(this._viewer.clock.currentTime);
        if (icrfToFixed) {
            let camera = this._viewer.camera;
            let offset = Cesium.Cartesian3.clone(camera.position);
            let transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
            // 偏移相机，否则会场景旋转而地球不转
            camera.lookAtTransform(transform, offset);
        }
    }
​
    // 绑定事件
    _bindEvent() {
        // 转动的速度设置
        this._viewer.clock.multiplier = 15 * 1000;
        // 初始化为单位矩阵
        this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        this._viewer.scene.postUpdate.addEventListener(this._icrf, this);
    }
​
    // 解除绑定
    _unbindEvent() {
        this._viewer.clock.multiplier = 1;
        this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        this._viewer.scene.postUpdate.removeEventListener(this._icrf, this);
    }
​
    // 开始旋转
    start() {
        this._viewer.clock.shouldAnimate = true;
        this._unbindEvent();
        this._bindEvent();
        return this;
    }
​
    // 停止旋转
    stop() {
        this._unbindEvent();
        return this;
    }
}
export{
  GlobeRotate
}

2. 在我们的组件中引入

import { GlobeRotate } from '../../utils/globeRotate'

3. 定义一个属性

const globeRotate = ref();

3. 使用

在onViewerReady方法中增加

// 自转
globeRotate.value = new GlobeRotate(Cesium, viewer);
globeRotate.value.start();

效果不就出来了

下次一定

这次就先整两个小活，下次接着盘怎么在cesium中使用echarts组件，导入行政区域json

哒哒哒，哒哒哒。老伙计们，回见

出杨戬皮肤了，嘻嘻嘻。。。