vue框架集成cesium介绍（windows环境）cesium是一个用来展示三维地球和二三维地图的开源js库，不需要安

cesium是一个用来展示三维地球和二三维地图的开源js库，不需要安装任何插件，是一个纯前端项目，但是浏览器要支持webgl规范。

本项目是在vue工程化项目上集成cesium，过程中有些坑，这里总结成文章，欢迎留言分享。

本项目开发环境依赖node npm vue vue-cli webpack cesium等工具；

1、先使用node安装vue-cli

通过cmd进入项目文件夹，并在该路径下输入：npm install -g vue-cli

命令执行完后输入：vue -V 查看版本号，确定安装成功；

2、创建webpack 模板项目

退到项目文件夹上一级（cmd命令：cd..），使用vue-cli脚手架

vue init webpack cesiumvue

其中cesiumvue 是项目名称；

后面的项目配置，按需选择；

配置好之后,npm会安装依赖，依赖安装需要一点时间，安装好了之后用cmd命令进入项目文件夹：cd cesiumvue

最后输入npm run dev就可以跑起项目了

3、安装cesium依赖包

在cesiumvue项目文件夹下输入命令安装依赖npm install cesium --save

4、配置项目文件

（1）配置cesium全局基础配置

在build 文件夹，编辑webpack.base.conf.js

增加变量cesiumSource，表示cesium源码路径；

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const cesiumSource = '…/node_modules/cesium/Source’
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

在output 里加入sourcePrefix: ’ ’ 让webpack 正确处理多行字符串；

然后配置 amd参数；

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath,
    sourcePrefix: ' '
  },
  amd: { 
    // Enable webpack-friendly use of require in Cesium
    toUrlUndefined: true
  },

定义别名cesium后，cesium就可以代表cesiumSource的文件路径。

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

在module 中加入 unknownContextCritical: false, 屏蔽webpack 打印载入特定库时候的警告：

module: {
    rules: [...],
    unknownContextCritical: false, //屏蔽警告
}

（2）配置cesium开发环境

进入build文件夹，编辑 webpack.dev.conf.js文件

定义Cesium 源码路径

const cesiumSource = ‘node_modules/cesium/Source’

定义 Cesium Workers 路径：

const cesiumWorkers = ‘../Build/Cesium/Workers’，

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

注意不要写错，这里的cesiumSource是没有../的

在plugins节点下代码对照以下输入新增内容

new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),     //flag
    new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]), 
    new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
    new webpack.DefinePlugin({ 
     'process.env': require('../config/dev.env'), 
     'CESIUM_BASE_URL': JSON.stringify('') 
    }),

（3）配置cesium生产环境

进入 build 文件夹，编辑webpack.prod.conf.js文件

定义Cesium 源码路径

const cesiumSource = ‘node_modules/cesium/Source’

定义 Cesium Workers 路径：

const cesiumWorkers = ‘../Build/Cesium/Workers’，

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

注意不要写错，这里的cesiumSource是没有../的

在plugins 中对照以下代码加入新增内容,拷贝静态资源注意这里的CESIUM_BASE_URL: JSON.stringify(’./’)与dev 配置的不同，这是cesiumvue项目打包后加载静态资源的路径，配置为相对路径。

new CopyWebpackPlugin([{
      from: path.join(cesiumSource, cesiumWorkers),
      to: 'Workers'
    }]), //flag
new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Assets'),
      to: 'Assets'    }]),
new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Widgets'),
      to: 'Widgets'    }]), 
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
      'process.env': env,
      'CESIUM_BASE_URL': JSON.stringify('./')
    }),

（4）配置config/index.js文件

进入config文件夹，打开index.js文件，将build下的assetsPublicPath

设置为''，这样就会使用相对路径；

5、在项目中引用cesium

首先在main.js文件下进行全局引用

var Cesium = require ('cesium/Cesium')
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'

注意由于cesium源码是用的是amd规范，不是es6，所以引用全局别名cesium时要用require,用import会找不到依赖而报错。

接下来就上手写一个组件初始化3D地球了

默认会有一个helloworld组件，直接删掉，增加一个cesiumView组件；

<template>
  <div id="cesiumContainer"></div>
</template>
<script>
export default {
  name: 'cesiumView',
  mounted () {
    this.Cesium.Ion.defaultAccessToken =      '申请许可证编号'
    window.eathviewer = new this.Cesium.Viewer('cesiumContainer', {
      projectionPicker: false, // 投影图选择按钮
      homeButton: false, // 主视图按钮
      animation: false, // 动画控制开关
      baseLayerPicker: false, // 基础地图选择按钮
      fullscreenButton: false, // 全屏按钮
      vrButton: false, // vr按钮
      timeline: false, // 时间轴
      infoBox: false, // 地图提示信息
      sceneModePicker: false, // 视图选择方式
      selectionIndicator: true,
      navigationHelpButton: false, // 帮助按钮
      geocoder: false // 搜索框    })
    // 隐藏版权信息
    window.eathviewer._cesiumWidget._creditContainer.style.display = 'none'  }}
</script>

以上是具体代码，我已经给了一个净化的初始版本。

在src/router文件夹下index.js文件默认的路由修改为cesiumView，就可以跑起来了

如果样式有问题，可以配置一个全局样式文件进行控制，这里提一下

html, body ,#cesiumContainer{
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

cesiumContainer的样式需要进行控制，保证3D地球是全局展示。

这是我的公众号字节逆旅，不定期分享技术总结，欢迎关注分享！

工