electron-vue中使⽤Cesium
使⽤cesium源码⽅式
实现思路：参照cesium的webpack 配置⽅法
package.json 中引⽤Cesium
在fig.js 添加如下配置
electron vue教程// Cesium源码所在⽬录
const cesiumSource = '../node_modules/cesium/Source'
const cesiumSource2 = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
再增加⼀些配置项
output: {
filename: '[name].js',
path: solve(__dirname, 'dist'),
//需要编译Cesium中的多⾏字符串
sourcePrefix: ''
},
amd: {
//允许Cesium兼容 webpack的require⽅式
toUrlUndefined: true
},
node: {
// 解决fs模块的问题（Resolve node module use of fs）
fs: 'empty'
},
增加⼀个 cesium 别名（alias） ，我们就很容易的在项⽬⾥引⽤，就像⼀个传统的Node 模块
resolve: {
alias: {
// Cesium模块名称
cesium: solve(__dirname, cesiumSource)
}
},
在 rendererConfig.plugins.push 中添加如下配置，在development(!production) 环境下添加如下
// 拷贝Cesium 资源、控价、web worker到静态⽬录
new CopyWebpackPlugin([{ from: path.join(cesiumSource2, cesiumWorkers), to: 'Workers' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource2, 'Assets'), to: 'Assets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource2, 'Widgets'), to: 'Widgets' }]),
new webpack.DefinePlugin({
//Cesium载⼊静态的资源的相对路径
CESIUM_BASE_URL: JSON.stringify('')
})
在production 环境下，CESIUM_BASE_URL修改为如下
//Cesium载⼊静态的资源的相对路径
CESIUM_BASE_URL: JSON.stringify('./')
具体使⽤ ,
import Cesium from 'cesium/Cesium';
//导⼊必须的样式表
require('cesium/Widgets/widgets.css');
打包后调试
在主进程中的src/main/index.js中添加mainWindow.openDevTools()；可以在打包后显⽰F12调试⼯具
使⽤打包后的cesium，放在static ⽬录下
cesium 放在static ⽬录下在打包后不能使⽤，是因为打包后static⽬录发⽣了变化，重新指定打包后的static⽬录即可。在App.vue中的mounted添加如下代码，动态引⼊cesium的js和css⽂件即可。
let cssUlr="",jsUrl="";
if (v.NODE_ENV === "production ") {
cssUlr=__static + "/Cesium/Widgets/widgets.css";
jsUrl=__static + "/Cesium/Cesium.js";
}else{
cssUlr="static/Cesium/Widgets/widgets.css";
jsUrl="static/Cesium/Cesium.js";
}
const head = ElementsByTagName('head')[0];
const link = ateElement('link');
link.href = cssUlr;
head.appendChild(link);
const script = ateElement("script");
script.src = jsUrl;
head.appendChild(script);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。