vue引入cesimu地圖

前言：很久前專案裡面使用過cesium，但是用的是jquery，而且當時是別人給配置好自己使用的不瞭解具體內容，這次有時間自己摸索著配了一版vue的，很麻煩，踩過的坑是我成功道路上漂亮的傷疤~

終於搞定了，腦子有點懵，我緩下......

百度找了好多資源基本安裝cesium有兩種方式，一個是簡單版本的，一個是複雜版本的配置。簡單版本的不適合開發，主要在index.html中引入css檔案和js檔案，不推薦，也不著重記錄，百度搜一大把，還是配置的比較有用。

1.安裝cesium依賴    npm install --save cesium

2.使用的vue-cli3啟的專案，所以在vue.config.js裡面配置（之前看到好多都是在webpack.config.js裡面配置，整的我很懵逼，後來查了下，原因是使用cli3腳手架啟專案以後，webpack的簡單配置已經內建到了node_modeules檔案裡面了，但是需要再配置的時候，vue給你提供了vue.config.js這個檔案，再裡面進行配置就可以了。）

3、配置完成以後，建立CesiumScene.vue檔案，並在路由裡面配置好可以訪問

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

<script>
    import * as Cesium from 'cesium/Cesium'
    import * as widget from "cesium/Widgets/widgets.css";
    
    export default {
        name: "CesiumScene",
        data() {
            return {
            }
        },
        methods: {
            initCesiumScene() {
                let viewerOption = {
                    geocoder: false, // 地理位置查詢定位控制元件
                    homeButton: false, // 預設相機位置控制元件
                    timeline: false, // 時間滾動條控制元件
                    navigationHelpButton: false, // 預設的相機控制提示控制元件
                    fullscreenButton: false, // 全屏控制元件
                    scene3DOnly: true, // 每個幾何例項僅以3D渲染以節省GPU記憶體
                    baseLayerPicker: false, // 底圖切換控制元件
                    animation: false // 控制場景動畫的播放速度控制元件
                };
                let viewer = new Cesium.Viewer(this.$el, viewerOption);
                viewer._cesiumWidget._creditContainer.style.display = "none";// 隱藏版權
            }
        },
        mounted() {
            this.initCesiumScene()
        }
    }
</script>

<style lang="less" scoped>
    #cesiumContainer{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
</style>