从头搭建cesium（vue）

本文基于node.js、webpack与vue进行项目的搭建，因此默认电脑已经安装好，如果未安装请先将环境搭建好，本文基于vue-cli4进行配置

基础环境配置

node.js(检测npm包管理工具 npm -v)
Webpack安装(全局安装 npm install webpack -g)(安装检测: webpack -v)
vue-cli脚手架构建工具（npm install vue-cli -g）（检测：vue -v）

项目搭建

1.在命令行执行，vue create project_name (将“project_name”替换为想要的项目名)
2.安装项目依赖 npm install
3.启动项目 npm run serve(或者配置未npm run dev，可以通过package.json进行配置)
4.执行完成后会弹出一个网址，输入到浏览器中，如果出现下图即为搭建完成

配置cesium

1.安装cesium组件 npm install cesium --save (新版本vue不需要手打save也会默认将依赖加入package.json 的dependcies里，旧版本需要手打)
2.在vue.config.js中执行以下配置（没有该文件的话需要自己手动创建）
①.定义源码路径

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

②.module.exports下添加configureWebpack

//完整vue.config.js
const path=require("path");
const webpack = require('webpack')
var CopyWebpackPlugin = require("copy-webpack-plugin")
//配置cesium资源
const cesiumSource = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {

    publicPath: './', // 默认为'/'
    // 将构建好的文件输出到哪里
    outputDir: 'dist',
    // 放置生成的静态资源 (js、css、img、fonts) 的目录。
    assetsDir: 'static',
    indexPath: 'index.html',
    filenameHashing:true,
    lintOnSave:false,
    // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
    runtimeCompiler: false,
    //默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。    
    transpileDependencies: [],
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,
    // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
    // crossorigin:"",//浏览器跨域安全相关

    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
        }
    },
  
    devServer: {
      host: 'localhost',
      port: 8089, // 端口号
      https: false, // https:{type:Boolean}
      open: true, // 配置自动启动浏览器  open: 'Google Chrome'-默认启动谷歌
  
      // 配置多个代理
      proxy: {
        '/api': {
          target: 'http://localhost:8089',
          ws: true, //如果要代理WebSockets 需配置这个参数
          changeOrigin: true, // 是否跨域
          secure:false,//如果是https 需要配置该参数
          pathRewrite: {
            '^/api': '',
          },
        },
      },
    },
    pluginOptions:{
    }
  }

3.main.js中添加

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

Vue.config.productionTip = false

var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4.新建page文件夹，并新建组件CesiumPage.vue，文件内容：

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>

export default {
  name: 'cesiumPage',
  data () {
    return {
    }
  },
  mounted(){
    var Cesium = this.Cesium;
    
    var viewer = new Cesium.Viewer("cesiumContainer",{
      animation: false, //是否显示动画控件
      baseLayerPicker: false, //是否显示图层选择控件
      geocoder: false, //是否显示地名查找控件
      homeButton: false,
      timeline: false, //是否显示时间线控件aa
      sceneModePicker: false, //是否显示投影方式控件
      navigationHelpButton: false, //是否显示帮助信息控件
      infoBox: false, //取消原生弹窗
      selectionIndicator: false, //关闭点击绿框
      //terrainProvider : terrainProvider//启用地形
      shouldAnimate: true,//启用动画
    })
      //去除 版权图标
      viewer._cesiumWidget._creditContainer.style.display="none";
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
} 
</style>

5.修改App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
html,
body,
#app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  color: #000;
  overflow: hidden;
}
</style>

6.修改route文件夹中的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import cesiumPage from '../page/cesiumPage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'page',
    component: cesiumPage
  }
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

7.启动项目，执行 npm run dev( 有些项目使用npm run serve，具体使用哪个可以通过package.json进行设置 )

8.运行效果