一、vue-cli3+cesium
1、vue create 'your project-name'
新建你的项目
2、安装cesium依赖 npm install cesium --save
3、新建cesiumContainer.vue
文件,src/views/cesiumContainer.vue
<template>
<div id="cesiumContainer"></div>
</template>
<script>
// 哪个组件需要 在哪里引入 也可以在main.js全局引入
/*
全局:
import Cesium from 'cesium/Cesium'
// noinspection ES6UnusedImports
import widget from 'cesium/Widgets/widgets.css'
在全局的mounted阶段:
this.$nextTick(() => {
let viewer = new Cesium.Viewer('cesiumContainer')
})
*/
// 局部组件引用
import Cesium from 'cesium/Cesium'
// noinspection ES6UnusedImports
import widget from 'cesium/Widgets/widgets.css'
export default {
name: "cesiumContainer",
mounted () {
this.$nextTick(() => {
this.cesiumInit()
})
},
methods: {
cesiumInit(){
let viewer = new Cesium.Viewer('cesiumContainer');
}
}
}
</script>
4、在router.js
配置cesiumContainer
组件路由
export default new Router({
routes: [
{
path: '/',
name: 'CComponent',
component: () => import(/* webpackChunkName: "cesiumContainer" */ './views/cesiumContainer.vue')
}
]
})
5、在App.vue
使用全局样式
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
6、最后一步配置:新建vue.config.js
文件进行配置(和vuecli2
差不多,但是vuecli3
在一个文件中配置即可)
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
publicPath: './',
devServer: {
port: 8080
},
configureWebpack: {
output: {
sourcePrefix: ' ' // 1
},
amd: { // 2
toUrlUndefined: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src'),
'cesium': path.resolve(__dirname, cesiumSource) // 3
}
},
plugins: [ // 4
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({ // 5
CESIUM_BASE_URL: JSON.stringify('./')
})
],
module: {
unknownContextCritical: /^.\/.*$/,
unknownContextCritical: false // 6
}
}
}
经过以上步骤即可完成vuecli3+cesium
初始化
cesium官网学习使用: