nCesium

使用vue 2.x配合cesiumJS构建一个三维webgis项目demo

构建过程

安装cnpm

cnpm是淘宝的完整npmjs.org的景象，因为服务器在**，所有下载包的速度比npm快得多，可以使用cnpm代替官方版本，目前的更新频率为10分钟，以保证尽量与官方服务器同步。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

更多cnpm信息参考官网

也可以使用yarn代替，速度也比npm官方快很多

安装vue-cli脚手架

全局安装vue/cli和vue/cli-init

$ cnpm install -g @vue/cli
$ cnpm install -g @vue/cli-init

当前的vue-cli不带init部分，所以要使用其init命令，需要另外下载@vue/cli-init包

创建Webpack模板项目

我们选用webpack模板进行创建，命令如下

$ vue init <template-name> <project-name>

其中<template-name>是使用的模板，我们键入webpack,<project-name>即为项目名

之后根据提示选择需要的配置，安装成功后便可以输入cd <project-name>进入项目文件夹

安装Cesium环境

在当前项目的文件夹根目录，通过cnpm下载cesium

$ cnpm install --save cesium

--save命令是将当前安装的包同事写入package.json文件中

下载完成后便可以在node_modules文件夹中找到cesium文件夹

Webpack环境配置

在vue中使用Cesium还需要对Webpack进行一些配置，这样才能正常打包Cesium的代码，否则将无法使用Cesium

修改webpack.base.conf.js

在工程目录的build/webpack.base.conf.js文件中，我们添加一下配置

在头部定义cesiumSource路径字符串，路径就为node_modules中的cesium/Source,即const cesiumSource = 'node_modules/cesium/Source'，然后在resolve.alias中将cesium目录添加进去

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

在module.exports中的output中，我们添加sourcePrefix: ' '，这样可以webpack正确处理多行字符串

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
    sourcePrefix: ' '
  }

在module对象中添加unknownContextCritical: false，让webpack打印载入特定库时候的警告
在module对象中添加unknowContextRegExp: /^.\/.*$/，为了解决错误Error: Cannot find module "."的错误

 rules: [
      ...
    ],
    unknownContextRegExp: /^.\/.*$/,
    unknownContextCritical: false

配置webpack.dev.conf.js和webpack.prod.conf.js

在build/webpack.dev.conf.js和build/webpack.prod.conf.js中，修改步骤如下：

首先定义source和worker的地址

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

在plugins中的webpack.DefinePlugin对象中添加cesium的baseURL

new webpack.DefinePlugin({
  'process.env': require('../config/dev.env'),
  CESIUM_BASE_URL: JSON.stringify('')
})

同样，在plugins中新添加三个插件，用于复制cesium所需的文件

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'}]),

编写Vue组件

webpack配置完成后，便可以编写组件了。

在src/components目录中新建一个cesiumViewer.vue文件，内容只需要写盛放cesium三维地球的容器

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

在App.vue中，引入cesiumViewer.vue组件，并定义样式

<template>
  <div id="app">
    <cesium-viewer></cesium-viewer>
  </div>
</template>

<script>
import cesiumViewer from './components/cesiumViewer.vue'
export default {
  name: 'App',
  components: {
    cesiumViewer
  }
}
</script>

<style>
html, body, #cesiumContainer {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
}
</style>

在main.js中，引入cesium以及css文件，并在Vue对象mounted之后创建Viewer对象

import Vue from 'vue'
import App from './App'
import router from './router'
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  mounted(){
    this.viewer = new Cesium.Viewer('cesiumContainer')
  },
  data: {
    viewer: {}
  }
})

启动项目

以上工作完成后，回到项目根目录，执行npm run dev，进入localhost:8080，若出现了三维地球，则表示可以正常工作了

执行npm run build，会自动生成一个dist文件夹，里面包含了html文件、css文件和js文件，可以将这些文件部署到服务器上，供外网访问

masakulaYOU/nCesium