学习【Cesium】第一篇，安装CesiumJS并初始化创建一个页面（学不会揍我）

1.打开Cesium官网，进入CesiumJS界面

2.在Vue项目中，利用NPM安装Cesium 

$ npm install cesium

安装过程中，出现如下报错信息

 解决方式：

npm install cesium --legacy-peer-deps

说明：–legacy-peer-deps标志是在v7中引入的，
目的是绕过peerDependency自动安装；
它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，
保证各个引入的依赖之间对自身所使用的不同版本modules共存。

 3. 创建账户并获取访问令牌
创建Cesium账户地址：Cesium ion
创建成功后，登录Cesium ion ，进入Access Tokens 获取访问令牌：

 4. 项目引入cesium及样式文件
根据个人的操作习惯，引入代码即可，我这边分两步去操作：
第一步：引入样式文件到main.js中，设置静态路径

import 'cesium/Build/Cesium/Widgets/widgets.css'
window.CESIUM_BASE_URL = '/static/Cesium/'

第二部：在调用cesiumJS 脚本的页面引入Cesium 并配置token

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

<script >
import { ref } from 'vue'

// 导入Cesium
import * as Cesium from 'cesium'

export default {
    name: 'Map3DCesium',
    components: {  },
    setup() {
        return {
            viewer: ref(null)
        }
    },
    mounted() {
    },
    created() {
        this.$nextTick(() => {
            this.initMap()
        })

    },
    methods: {
        initMap() {
            Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNzRlODZkNy1mM2Q0LTQ1ZWUtYmI0MC03YTAwMjJmZjkyYzciLCJpZCI6OTEwNDEsImlhdCI6MTY1MDc3MTI5OX0.ZAKTDaZUlZ0u3Mrk64msTO2b9DRgsdzOU9FFv7t2fVs'

            this.viewer = new Cesium.Viewer('cesiumContainer', {
                terrainProvider: Cesium.createWorldTerrain()
            })    
            this.viewer.scene.primitives.add(
                new Cesium.Cesium3DTileset({
                    url: Cesium.IonResource.fromAssetId(96188)
                })
            )

            // Add Cesium OSM Buildings, a global 3D buildings layer.
            this.viewer.scene.primitives.add(Cesium.createOsmBuildings())   
            // Fly the camera to San Francisco at the given longitude, latitude, and height.
            this.viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),
                    pitch: Cesium.Math.toRadians(-15.0)
                }
            })
        }
      
    }
}
</script>

<style lang="scss" scoped>
.map3DCesium {
  padding: 0 12px 12px 12px;
  border-radius: 5px;
  height: calc(100vh - 69px); 
  .cesiumContainer{
    width: 100%;
    height:100%;
  }
}
</style>

5.运行项目，查看页面效果