在上节说道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>
这样得到一个只有球体的页面,方便我们接下来的开发。