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这个文件，再里面进行配置就可以了。）

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const cesiumSource = './node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';


// 第三方插件配置
    pluginOptions: {},
    //cesium配置
    configureWebpack: {
        output: {
          sourcePrefix: ' '
        },
        amd: {
          toUrlUndefined: true
        },
        resolve: {
          alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve('src'),
            'cesium': path.resolve(__dirname, cesiumSource)
          }
        },
        plugins: [
          new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
          new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
          new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
          new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
          new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify('./')
          })
        ],
        module: {
          unknownContextCritical: /^.\/.*$/,
          unknownContextCritical: false
        }
    }

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>