01-cesium+vue显示三维地球

新建一个viewerContainer文件，存放加载cesium地球，之后所有的教程围绕着一个地球实例讲解，不会加载多个地球。

viewerContainer组件代码

<!--
 * @Author: your name
 * @Date: 2021-05-13 19:17:52
 * @LastEditTime: 2021-05-13 21:00:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cesium-vue\src\views\Home\index.vue
-->
<template>
  <div id="container"></div>
</template>

<script>
import { Viewer } from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
import * as Cesium from 'cesium/Cesium'

export default {
  data: function () {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initViewer();
  },
  methods: {
    initViewer() {
      let viewer = new Viewer("container", {
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fulllscreenButtond: false,
        vrButton: false,
        infoBox: false,
        imageryProvider: new Cesium.IonImageryProvider({ assetId: 3845, }),//默认加载Blue Marble Next Generation影像：


      });

      viewer._cesiumWidget._creditContainer.style.display = "none";


      this.viewer = viewer;
      this.$emit('getViewer', viewer)

    }

  }
}
</script>

<style lang="less">
#container {
  width: 100%;
  height: 100%;
}
</style>

引入组件并获取实例

<!--
 * @Author: your name
 * @Date: 2021-05-13 19:17:52
 * @LastEditTime: 2021-05-13 21:06:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cesium-vue\src\views\Home\index.vue
-->
<template>
  <div class="wrap">
    <ViewerContainer @getViewer="getViewer" />
    <!-- 传递viewer实例，方便在其他组件使用，当然也有其他方法传递，可以自己研究下 -->
    <PointEntity v-if="viewer" :viewer="viewer" />
  </div>
</template>

<script>
import ViewerContainer from '@/components/ViewerContainer'
import PointEntity from '@/components/PointEntity';
export default {
  data: function () {
    return {
      viewer: null
    }
  },
  components: {
    ViewerContainer,
    PointEntity
  },
  methods: {
    getViewer(viewer) {
      this.viewer = viewer;
    }
  }
}
</script>

<style>
</style>