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>

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

标签：控件,vue,false,viewer,Cesium,DAY12,cesium,true,隐藏
来源： https://www.cnblogs.com/xynblog/p/15785427.html