DAY12 补vue中引入cesium并初始化样式

在上节说道vue项目中映入cesium所需要搭建的环境，这节补充一下；、、注意此项目中使用cesium版本号为1.6.0

这里直接在App.vue里测试，后期搭建好路由再做修改；代码贴在下面：

初始化操作都注释了，注意token在实际像目需求中会更改

2022-01-10

<template>

  <div class="map-box">

    <div id="cesiumContainer"></div>

  </div>

</template>

<script>

var viewer = null

export default {

  name: "No01Init",

  data() {

    return {}

  },

  mounted() {

    /* eslint-disable no-undef */

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMjk0N2EyNi1mZjFhLTQ2NzEtOGI5Ny1mNzBhNTAyYmU4MGUiLCJpZCI6Nzg2OTQsImlhdCI6MTY0MTQ1NTk5Nn0.1LiKPiaQVLIXDSkdj908Ybbn3rs5kEchUh5X0ZvTuHc'

    // viewer = new Cesium.CesiumWidget('cesiumContainer')

    viewer = new Cesium.Viewer("cesiumContainer", {

  animation: false, // 隐藏动画控件

  baseLayerPicker: false, // 隐藏图层选择控件

  fullscreenButton: false, // 隐藏全屏按钮

  vrButton: false, // 隐藏VR按钮，默认false

  geocoder: false, // 隐藏地名查找控件

  homeButton: false, // 隐藏Home按钮

  infoBox: false, // 隐藏点击要素之后显示的信息窗口

  sceneModePicker: false, // 隐藏场景模式选择控件

  selectionIndicator: true, // 显示实体对象选择框，默认true

  timeline: false, // 隐藏时间线控件

  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

})

// 隐藏下方Cesium logo

viewer.cesiumWidget.creditContainer.style.display = "none"

    console.log(viewer)

  },

}

</script>

<style scoped>

.map-box {

  width: 100%;

  height: 100%;

}

#cesiumContainer {

  width: 100%;

  height: 100%;

}

</style>

这样得到一个只有球体的页面，方便我们接下来的开发。