最近的项目中用到了 CesiumJS ，目前基本使用的问题大体排清

1. 官网下载 Cesium 源码程序包，解压

2. 解压后的目录中进入 Build 文件夹，找到 Cesium 文件夹，复制 Cesium 整个文件夹到项目的 public 文件夹下

3. 项目根组件 index.html 中引入 public 下的 Cesium (目录根据自己实际情况改写)：

   <script type="text/javascript" src="xxx/Cesium/Cesium.js"></script>
   <link rel="stylesheet" href="xxx/Cesium/Widgets/widgets.css"/>

4. 此时页面中即可引用 Cesium 库及其 api 了

5. 以下是创建的基本地图组件，可以传入一个容器ID 供各个页面调用，可满足同时创建多个实例；
   
   父组件引用这个组件时只需要在mounted里面给地图容器一个 ref 值，然后调用子组件的 loadMap() 方法： this.$refs.cesiumMap.loadMap()
   
   注意：如果在线使用需要填入自己账户的defaultAccessToken

<template>
  <div class="track3D-container" :id="cId"></div>
</template>

<script>
let viewer = null
export default {
 name: 'cesiumMap',
 props: ['cId'],
 components: {},
 watch: {},
 data() {
  return {}
 },
 computed: {},
 methods: {
  loadMap() {
     // Cesium.Ion.defaultAccessToken = ''
      viewer = new Cesium.Viewer(this.cId, {
       animation: false, // 隐藏动画控件
       baseLayerPicker: false, // 隐藏图层选择控件
       fullscreenButton: false, // 隐藏全屏按钮
       vrButton: false, // 隐藏VR按钮，默认false
       geocoder: false, // 隐藏地名查找控件
       homeButton: false, // 隐藏Home按钮
       infoBox: false, // 隐藏点击要素之后显示的信息窗口
       sceneModePicker: false, // 隐藏场景模式选择控件
       selectionIndicator: true, // 显示实体对象选择框，默认true
       timeline: true, // 时间线控件
       navigationHelpButton: false, // 隐藏帮助按钮
       scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
       shouldAnimate: true, // 开启动画自动播放
       sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
       requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
       // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
       // maximumRenderTimeChange: Infinity,
       shadows: false,
       // imageryProvider: new Cesium.UrlTemplateImageryProvider({
       //   url: cesium_config.baseMap,
       //   fileExtension: "png"
       // }),
       imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
         url: "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/",
       }),
       // terrainProvider: Cesium.createWorldTerrain(), // 地形
     });
     viewer.cesiumWidget.creditContainer.style.display = "none"
     // 以下设置为了使cesium地图鼠标控制符合mapbox习惯
     // 关闭双击事件
     viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
         Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
     );
     // 鼠标右键旋转
     viewer.scene.screenSpaceCameraController.tiltEventTypes = [
       Cesium.CameraEventType.RIGHT_DRAG,
     ];
     // 中键滚动缩放
     viewer.scene.screenSpaceCameraController.zoomEventTypes = [
       Cesium.CameraEventType.WHEEL,
     ];
     // 鼠标左键平移
     viewer.scene.screenSpaceCameraController.rotateEventTypes = [
       Cesium.CameraEventType.LEFT_DRAG,
     ];
     viewer.scene.globe.enableLighting = true
     viewer.camera.flyTo({
       destination: Cesium.Cartesian3.fromDegrees(...map_config.MAP_CENTER, 30000),
       orientation: {
         heading: Cesium.Math.toRadians(0), // 旋转角度
         pitch: Cesium.Math.toRadians(-90.0), // 相机方向
       }
     });
     return viewer
  },
 },
 mounted() {
 },
 created() {
 },
 beforeDestroy() {

 }
}
</script>