1.token申请

网站地址:

登录后，会在右侧看到access token

复制token,在项目中使用

Cesium.Ion.defaultAccessToken = '你的 token'

2.vue项目创建

webstrom右击新建项目，然后选择模板，：

3.vue中引入cesium

最快捷方便的方式：

npm install cesium 

然后复制下载下来的，cesium/build目录下的cesium文件到项目的根目录public目录下

如下图所示

然后在public/index.html中加入如下两段代码

<script src="./Cesium/Cesium.js"></script>

<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">

4.新建文件，启动项目

新建cesium.vue 名称随意定义

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

<script>
export default {
  name: "cesium",
  mounted() {
    Cesium.Ion.defaultAccessToken= '你的token';
    const viewer = new Cesium.Viewer('cesiumContainer');
  }
}
</script>

<style scoped>
#cesiumContainer{
  width: 100%;
  height: 100%;
}
</style>

app.vue

<template>
  <div id="app">
    <Cesium/>
  </div>
</template>

<script>
import Cesium from "./components/cesium.vue"
export default {
  name: "index",
  components:{
    Cesium
  },
  data: function () {
    return {
      fullHeight: document.documentElement.clientHeight
    }
  },
  methods: {
    get_BodyHeight(){  //动态获取浏览器的高度
      const that = this
      window.onresize = () => {
        return (()=>{
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
        })
      }
    }
  }
}
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

此时我们会出现提示错误：

但是我们已经引入了，此时报错，cesium没找到，我们在package.json中新增一段代码，如下图所示，重启项目即可。

我们会出现提示错误：

[外链图片转存中…(img-1Ql8nHzF-1648735123133)]

但是我们已经引入了，此时报错，cesium没找到，我们在package.json中新增一段代码，如下图所示，重启项目即可。