个人笔记|vue+cesium环境搭建

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 包（路径：\node_modules\cesium\Build\Cesium）拷贝到static文件夹中

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

至此，环境修改结束了

四、调用Cesium

1.6版本以上的Cesium配置

const Cesium = require('cesium/Cesium')
import widgets from 'cesium/Widgets/widgets.css';

五、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: ''
})

踩坑注意

如果在新建项目时选择了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

然后在终端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
}

再次运行，问题就解决了