【Cesium】基础教程01-vue项目中引入cesium文件，新建地球

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 = thiswindow.onresize = () => {
    return (()=>{
    window.fullHeight = document.documentElement.clientHeightthat.fullHeight = window.fullHeight})}}}
}
</script><style scoped>
#cesiumContainer {
    width: 100%;height: 100%;
}
</style>

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

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

我们会出现提示错误：

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

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