一、Cesium环境配置
1.安装Cesium
npm install cesium --save
2.在build/webpack.base.conf.js下
①定义cesium源码路径
const cesiumSource = '../node_modules/cesium/Source'
②在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: ' '
},
③在output后面,添加amd模式支持
output: {...},
amd: {
toUrlUndefined: true
},
④在resolve中设置cesium别名,引入的时候直接根据别名就可以找到cesium包了
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,
// unknownContextRegExp: /^.\/.*$/, //这个很多都推荐了,但是实测的时候发现会报错,先不用
},
3.配置webpack.dev.conf.js
①配置路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
②在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('')
})
]
4.配置webpack.prod.conf.js文件
①配置路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
②在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('./')
})
]
5.修改config里index.js文件,build中的assetsPublicPath:"./
assetsSubDirectory: 'static',
assetsPublicPath: '',
二、调用Cesium
1、全局配置
在main.js中
import * as Cesium from 'cesium/Cesium'
import * as widgets from 'cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets
在vue中使用时
let Cesium = this.Cesium
let viewer = new Cesium.Viewer(this.$refs.cesiumViewer, {
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
animation: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
// creditContainer: "creditBar",
skyBox: false,
skyAtmosphere: false,
timeline: false,
navigationHelpButton: false,
scene3DOnly: true,
allowDataSourcesToSuspendAnimation: false
})
2、组件中使用
import * as Cesium from 'cesium/Cesium'
import * as widgets from 'cesium/Widgets/widgets.css'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
let viewer = new Cesium.Viewer(this.$refs.cesiumViewer, {
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
animation: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
// creditContainer: "creditBar",
skyBox: false,
skyAtmosphere: false,
timeline: false,
navigationHelpButton: false,
scene3DOnly: true,
allowDataSourcesToSuspendAnimation: false
})
window.viewer = viewer
}
}
原文链接:https://www.jianshu.com/p/ff26886f7255