vue-cesium第三期-虚空地球的生成

前言

书接上回，为了营造一种科技感，然后呢，网上找了找案例，感觉这种还行

地址如下: 航线图

感觉还可以，给人一种虚空地球的感觉，比普通的地球看上去更厉害了些。

说实话，一开始还怪尴尬的，不知道怎么实现，一直以为是底图的原因，找了好些底图，始终没有这种效果

后来看到这种效果的

直接加载地图数据不就行了，直接试试看

主要思路

通过geojson加载地图数据，然后隐藏地球，然后实现这种空心的地球

核心代码

这个geo数据如果需要的话，可以私信我

less 复制代码

//不显示地球
viewer.value.scene.globe.show = false;

// 加载行政区域
viewer.value.dataSources.add(Cesium.GeoJsonDataSource.load(map, {
  stroke: Cesium.Color.LIGHTSTEELBLUE,
  fill: Cesium.Color.LIGHTSTEELBLUE.withAlpha(1),
  strokeWidth: 0.1,
  markerSymbol: '?',
  clampToGround: false //开启贴地
}));

全部代码

ini 复制代码

<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>

typescript 复制代码

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

import map from "@/assets/world.json";

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

        // 隐藏天空盒子，设置透明度
        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.value.scene.globe.show = false;
        
        // 加载行政区域
        viewer.value.dataSources.add(Cesium.GeoJsonDataSource.load(map, {
          stroke: Cesium.Color.LIGHTSTEELBLUE,
          fill: Cesium.Color.LIGHTSTEELBLUE.withAlpha(1),
          strokeWidth: 0.1,
          markerSymbol: '?',
          clampToGround: 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>

结果展示

还有一些细节需要处理，只能说8成相似，不过也可以了