vue项目安装配置cesium

vue项目安装配置cesium

宗旨：简单、有效、无坑！

一、cesium安装

npm install cesium --save

二、build文件中webpack.base.conf.js配置

1、定义const cesiumSource = ‘…/node_modules/cesium/Source’
2、在output中写入：sourcePrefix: ’ ',此处单引号内放有一个空格
3、与output同级写入：amd: { toUrlUndefined: true },
4、在resolve中的alias中加入：‘cesium’: path.resolve(__dirname, cesiumSource)
5、在module中加入：unknownContextCritical: false,

三、build文件中webpack.dev.conf.js配置

1、定义const cesiumSource = ‘node_modules/cesium/Source’;
2、定义const cesiumWorkers = ‘…/Build/Cesium/Workers’;
3、在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({ CESIUM_BASE_URL: JSON.stringify(’’) })

四、build文件中webpack.prod.conf.js配置

1、定义const cesiumSource = ‘node_modules/cesium/Source’;
2、定义const cesiumWorkers = ‘…/Build/Cesium/Workers’;
3、在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({ CESIUM_BASE_URL: JSON.stringify(’./’) })

五、在main.js中全局注册

let Cesium = require(‘cesium/Cesium’);
let widgets = require(‘cesium/Widgets/widgets.css’);
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

六、在页面中显示

1、地图容器：<div id="cesiumContainer"></div>
2、在mouthed中写入以下代码即可显示地图：
this.Cesium.Ion.defaultAccessToken= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYmM2NGM5NS1kZDc1LTQzMDAtYTc2Zi0xNTFhOWQ1ZDllYWYiLCJpZCI6NDExNTYsImlhdCI6MTYwOTgxNTU2OH0.p-mHEaKgCkOsgT5598hMwdf6ZG5GBk1LCR_BhxzouzQ";
let viewer = new this.Cesium.Viewer("cesiumContainer");