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");