基于webpack搭建cesium+vue应用-CFANZ编程社区

前言

Cesium是什么？

Cesium是一个跨平台、跨浏览器的展示三维地球和地图的js库。

Cesium使用WebGL来进行硬件加速图形，使用时不需要任何的插件支持，但是浏览器必须支持WebGL。（webgl web graphic library 是一种3D绘图协议，他允许将js和opengl es 2.0结合在一起，）

Cesium是基于Apache2.0许可的开源软件。
Cesium能做什么？

1、支持2D、2.5D、3D形式的地图展示

2、可以绘制各种几何图形、高亮区域，支持导入图片，甚至3D模型等多种数据可视化展示

3、可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和mobile。

4、cesium还支持基于时间轴的动态数据展示
正文

安装环境

1、安装node.js

2、安装vue-cli脚手架

3、创建webpack模版项目

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

vue init webpack cesium-vue

// router Y  ESlink n   tests n   e2e n

npm run dev

4、安装Cesium环境

npm install cesium

Webpack配置

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

1.1、在build/webpack.base.conf.js中定义cesium源码路径

Const cesiumSource = ‘../node_modules/cesium/Source’

1.2、在build/webpack.base.conf.js下的output中加入sourcePrefix: ' '，让webpack正确缩进多行字符串

1.3、配置amd参数

amd:{
    toUrlUndefined: true
}

1.4、在resolve中设置别名'cesium': path.resolve(__dirname, cesiumSource)

1.5、在bulid/webpack.base.conf.js下的module中加入unkonwContextCritical:false，让webpack打印载入特定库时候的警告

1.6、在bulid/webpack.base.conf.js下的module中加入unknownContextRegExp: /^./.*$/，为了解除Error：cannot find module “.”的错误

2、配置webpacl.dev.conf.js文件

2.1、定义cesium源码/ Workers路径

const cesiumSource = 'node_modules/cesium/Source'

const cesiumWorkers = '../Build/Cesium/Workers'

2.2在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({

// Define relative base path in cesium for loading assets

CESIUM_BASE_URL: JSON.stringify('')

}),

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

3.1、定义cesium源码/ Workers路径

const cesiumSource = 'node_modules/cesium/Source'

const cesiumWorkers = '../Build/Cesium/Workers'

3.2、在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({

// Define relative base path in cesium for loading assets

//定义 Cesium 从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./',使用相对路径

CESIUM_BASE_URL: JSON.stringify('./')

}),

4、配置config/index.js文件

配置 build 下的assetsPublicPath 为''

assetsPublicPath: ''

编写Vue组件

1、在src/components下新建cesiumViewer.vue组件

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'cesiumViewer',
  mounted() {
    var viewer = new this.Cesium.Viewer('cesiumContainer')
  }
}
</script>
<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

2、修改src/router下的index.js 文件为

import Vue from 'vue'
import Router from 'vue-router'
import cesiumViewer from '@/components/cesiumViewer'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'cesiumViewer',
      component: cesiumViewer
    }
  ]
})

3、修改 src 下的 App.vue 文件

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

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

4、修改 src 下的 main.js

import Vue from 'vue'

import App from './App'
import router from './router'


import Cesium from 'cesium/Cesium'

import 'cesium/Widgets/widgets.css'


Vue.prototype.Cesium = Cesium
Vue.config.productionTip = false


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