vue+cesium入门学习01

1安装cesium

我使用的软件是idea ,基于node.js进行开发，目前还有挺多东西是不了解的，所以现在跟着教程学习，创建三维球。
安装命令：

npm  install cesium 

2创建vue.config.js文件

这里主要是vue继承cesium的配置。在项目文件夹下创建vue.config.js文件。
然后复制粘贴以下代码。现在我依然理解不了某部分代码的意思，后续在了解吧。

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
    // 基本路径
    publicPath: "./",
    // 输出文件目录
    outputDir: "dist",
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === "darwin",
        host: "0.0.0.0",
        port: 5000,
        https: false,
        hotOnly: false
    },
    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可以开始创建三维球了

新建一个vue文件.然后就可以得到一个三维球了

<template>
    <div class="mapBox">
        <div id="earthContainer">
        </div>
    </div>

</template>

<script>
    var Cesium=require("cesium/Cesium");
    var widgets=require("cesium/Widgets/widgets.css");
    Cesium.Ion.defaultAccessToken = '你的token';//不需要token也可以加载球，
    //想要知道token是什么东西，建议看一下原博主，也是我参考的教程，很详细：https://blog.csdn.net/sinat_36226553/article/details/107910880
    export default {
        name: "earth",
        mounted() {
            var viewer = new Cesium.Viewer("earthContainer",{
                // geocoder: false,//地理位置查询定位控件，默认使用bing地图服务
                homeButton: false,//默认相机位置
                sceneModePicker: false, //是否显示投影方式控件//3D、2D和哥伦布模式的切换按钮
                baseLayerPicker: true,  //是否显示图层选择控件//选择地形、影像等图层
                navigationHelpButton: false, //是否显示帮助信息控件//显示默认的相机控制提示
                geocoder:false, //是否显示地名查找控件
                animation: false, //是否显示动画控件//控制场景动画的播放速度.
                timeline: false, //是否显示时间线控件
                fullscreenButton: false,//是否全屏显示
                vrButton: false,
                shadows: true, //影子
                infoBox: false //是否显示点击要素之后显示的信息
            });
            viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息
        },

    }
</script>

<style scoped>
.mapBox{
    height: 100%;
    width: 100%;
}
    #earthContainer{
        height: 100%;
        width: 100%;
    }
</style>

参考博文：

https://blog.csdn.net/sinat_36226553/article/details/105896271

https://blog.csdn.net/qq_26610239/article/details/114044263