一·Cesium（script方式）

官网：www.cesium.com/learn/cesiu…

1.vue搭建项目

vue create cesiumdemo

2.下载cesium包

npm i cesium -S

3.在node_modules文件下找到cesium文件拉到publc文件下

4.html引入

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

5.下载sass sass-loader包

npm i sass-loader
npm i sass

6.mounted()打印Cesium 控制台查看打印测试 以及设置大盒子宽高

0. 声明一个变量等于Cesium

<template>
  <div class="cesium">
    <div class="cesiumMap"></div>
  </div>
</template>
​
<script>
const Cesium = window.Cesium
export default {
  data() {
    return {
​
    }
  },
  mounted() {
    console.log(window.Cesium);
  }
}
</script>
​
<style lang="scss" scoped>
.cesium {
  width: 100%;
  height: 100%;
}
</style>

7.mounted()声明一个变量viewer = cesium实例

 mounted() {
    // console.log(window.Cesium);打印测试
    // console.log(Cesium);
    let viewer = new Cesium.Viewer('cesiumMap')
    console.log(viewer);
  }

8.Cesium基本配置属性（初始化配置）

网址：cesium.com/learn/cesiu…

mounted()声明变量 viewer=new Cesium.Viewer （容器，选项）

注释：用于构建应用程序的基本小部件。它将所有标准的 Cesium 小部件组合到一个可重用的包中。小部件总是可以通过使用 mixins 来扩展，它添加了对各种应用程序有用的功能。

mounted() {
    // console.log(window.Cesium);打印测试
    // console.log(Cesium);
    let viewer = new Cesium.Viewer('cesiumMap', {
      animation: false,//创建动画小部件
      baseLayerPicker: false,//创建    BaseLayerPicker 小部件
      fullscreenButton: false,//创建 FullscreenButton 小部件
      vrButton: true,//创建 VRButton 小部件
    })
    console.log(viewer);
  }

9.令牌引入（重点）

token获取：cesium.com/ion/stories…

入口：cesium.com/learn/cesiu…

 mounted() {
    // console.log(window.Cesium);打印测试
    // console.log(Cesium);
    // token注入 （实例化之前）
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZWYxYTZmMS0zN2I4LTRlOWYtYTZjYS1hODE1ZTZhZjI0ZTYiLCJpZCI6MTA3MzM1LCJpYXQiOjE2NjI1NjE2MTh9.ucOflZzuy7hoFKcymdqhhceTSFv3LrtQwOBv0e5MGkI';
    let viewer = new Cesium.Viewer('cesiumMap', {
      animation: false,//创建动画小部件
      erPicker: false,//创建 BaseLayerPicker 小部件
      fullscreenButton: false,//创建 FullscreenButton 小部件
      vrButton: true,//创建 VRButton 小部件
​
    })
      .log(viewer);
  }

二·vue add vue-cli-plugin-cesium 方式直接配置好

第一步. =>

npm i cesium -S

第二步. =>

vue add vue-cli-plugin-cesium

直接=> console.log('Cesium实例',Cesium)