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