Cesium+vue 环境部署

部署过程主要参考了该作者的文章

Cesium系列4 — Vue+Cesium开发环境搭建（基于Cesium1.74）_bitree1的博客-CSDN博客

补充：

• 主要是引入方式改变：

import * as Cesium from 'cesium/Cesium'
import * as widgets from 'cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

• 自己cesiumview.vue组件

<template><div id="container" class="box"><div id="cesiumContainer"></div></div>
</template>
<script>
import * as Cesium from "cesium/Cesium";
export default {name: "cesiumPage",data() {return {};},mounted() {let viewer = new Cesium.Viewer("cesiumContainer", {//terrainProvider: Cesium.createWorldTerrain()animation: false //左下角图案});viewer.scene.globe.depthTestAgainstTerrain = true;},methods: {}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#cesiumContainer {width: 100%;height: 100%;
}
#app {font-family: "Avenir" ， Helvetica， Arial， sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #2c3e50;width: 100%;height: 100%;
}
.box {height: 100%;
}
</style>

• 修改跳转路由

• 结果

资源下载：Cesium+Vue-Javascript文档类资源-CSDN下载

QQ群（GIS开发交流、数据共享、软件使用）：993836992