vue+cesium环境搭建

一、基本环境安装

• 编辑器：webstorm

• 服务：node.js npm

• CesiumJS: Cesium-v1.9.1

• vue v2.9.6

二、vue项目搭建

1.创建项目

在准备存放项目的位置打开cmd

vue init webpack project_name // 若还未创建项目敲这行，用自己的项目名替代project_name
vue init webpack // 若已经建好了项目文件夹敲这行

2.启动项目

进入项目并安装工具，然后运行项目

cd project_name //进入项目
cnmp install // 安装所需依赖包/插件
npm run dev // 运行项目

3.下载安装Cesium

npm install cesium --save // 下载cesium依赖

三、Cesium环境配置

1.配置webpack.base.conf.js文件

用webstorm打开项目，在build/webpack.base.conf.js下

1. 定义cesium源码路径

   const cesiumSource =  ../node_modules/cesium/Source 
   const cesiumWorker =  ../Build/Cesium/Workers 
   

2. 在module.exports的output中，添加sourcePrefix: ，让webpack能够正确处理多行字符串

   module.exports = {
     context: path.resolve(__dirname,  ../ ),
     entry: {
       app:  ./src/main.js 
     },
     output: {
       path: config.build.assetsRoot,
       filename:  [name].js ,
       publicPath: process.env.NODE_ENV ===  production 
         ? config.build.assetsPublicPath
         : config.dev.assetsPublicPath,
       sourcePrefix:    // 新增行，修改输出bundle中每行的前缀为空字符
     },
   

3. 在output后添加amd模式支持

   output:{...},
   amd: {
       toUrlUndefined: true // 使webpack打包cesium
   }
   

4. resolve中设置cesium别名，以便在引入时能够直接根据别名找到cesium包

   resolve: {
       extensions: [ .js ,  .vue ,  .json ],
       alias: {
          vue$ :  vue/dist/vue.esm.js ,
          @ : resolve( src ),
          cesium : path.resolve(__dirname, cesiumSource),
       }
     },
   

5. module里添加unknownContextCritical:false，让webpack打印载入特定库时候告警

   module: {
      rules: [...],
      unknownContextCritical: false,
   },
   

2.配置webpack.dev.conf.js文件

1. 配置路径

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

2. 在plugins下面添加插件

     plugins: [
         ...,
       // Copy Cesium Assets, Widgets, and Workers to a static directory
       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({
         // Define relative base path in cesium for loading assets
         CESIUM_BASE_URL: JSON.stringify(  )
       })
     ]
   

3.配置webpack.prod.conf.js文件

1. 配置路径

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

2. 在plugins下面添加如下插件，拷贝静态资源。与dev配置略有不同

   plugins: [
      ...,
       // Copy Cesium Assets, Widgets, and Workers to a static directory
       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从哪里加载资源，如果使用默认的  ，却变成了绝对路径了，所以这里使用 ./ ，使用相对路径
          CESIUM_BASE_URL: JSON.stringify( ./ )
       })
     ]
   

4.修改config里的index.js文件

build中的assetsPublicPath:”./”

assetsSubDirectory:  static ,
assetsPublicPath:   ,

5.引入cesium.js

把cesium 包（路径：
ode_modulescesiumBuildCesium）拷贝到static文件夹中

然后在index.html 引入cesium.js包

<title>title</title>
<script src= ./static/Cesium/Cesium.js ></script>

至此，环境修改结束了

四、调用Cesium

1.6版本以上的Cesium配置

const Cesium = require( cesium/Cesium )
import widgets from  cesium/Widgets/widgets.css ;
<script>
export default {
  data () {...},
  mounted(){
    Cesium...
  }
}
</script>

五、vue+cesium的helloworld

1.修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from  vue 
import App from  ./App 
import router from  ./router 
import Cesium from  cesium/Cesium 
import widgets from  cesium/Widgets/widgets.css 

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el:  #app ,
  router,
  components: { App },
  template:  <App/> 
})

踩坑注意

如果在新建项目时选择了eslint regular

为了通过编译，要将main.js中的代码改为

import Cesium from  cesium/Cesium  // eslint-disable-line no-unused-vars
import widgets from  cesium/Widgets/widgets.css  // eslint-disable-line no-unused-vars

2.修改App.vue

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

<script>
  export default {
    name:  App ,
    mounted () {
        const viewer = new Cesium.Viewer( cesiumContainer )
    }
  }
</script>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  #app,#cesiumContainer {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>

然后在终端npm run dev打开所给的地址（一般是localhost:8080）
就能看到初始化的3D地球页面啦！好耶！

初始化地球

• 当我们新建了一个Viewer后,默认的场景支持鼠标交互:
  ①按住鼠标左键拖拽 – 让相机在数字地球平面平移。
  ②按住鼠标右键拖拽 – 放缩相机。
  ③鼠标滚轮滑动 – 放缩相机。
  ④按住鼠标中键拖拽 – 在当前地球的屏幕中间点，旋转相机。

  

  来源：Cesium：地球初始设置_wx612dcbdbaa821的技术博客_51CTO博客

踩坑注意

Cesium is not defined no-undef

找不到Cesium，问题出在代码检查eslint中

在package.json中(旧版.eslintrc.js)找到eslintConfig

加入

"globals": {
    "Cesium": true
}

再次运行，问题就解决了