vue-electron Cesium 配置

最新推荐文章于 2025-06-16 18:09:53 发布

原创最新推荐文章于 2025-06-16 18:09:53 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue-electron #cesium

electron 专栏收录该内容

2 篇文章

订阅专栏

1、首先利用Vue@cli 创建一个项目

vue init simulatedgreg/electron-vue my-project

2、安装cesium模块

npm install cesium --save

3、手动复制Cesium编译好的静态文件到static文件夹中

进入node_modules\cesium\Build文件夹中，将编译好的Cesium文件复制到根目录下的static中，并把其中Cesium.js删除

4、将根目录下的.electron-vue文件夹下的webpack.main.config.js下的output中加入sourcePrefix: ' '，让Webpack正确缩进多行字符串

sourcePrefix: ' '

module中加入unknownContextCritical: false，让Webpack打印载入特定库时候的警告

unknownContextCritical: false

module中加入unknownContextRegExp: /^.\/.*$/，为了解决Error: Cannot find module "."该错误

unknownContextRegExp: /^.\/.*$/

5、在所需要的组件中导入并使用

<template>
    //放置Cesium的容器
    <div id="cesiumContainer"></div>
</template>

<script>
//导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
//我们刚才所说的如何让Cesium知道静态资源在哪里的API
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
//导入必须的样式表
import "cesium/Source/Widgets/widgets.css";

export default{
    name:"cesiumContainer"，
    mounted:function () {
        //设置静态资源目录
        buildModuleUrl.setBaseUrl('../static/Cesium/')
        //创建viewer实例
        this.viewer = new Viewer('cesiumContainer');
    }，
    data () {
        return {
            'viewer' : {}
        }
    }
}
</script>

6、其他方法

将Cesium所有文件放到static目录下，在index.html 中直接通过script标签引入（参见cesium官网引入方式），或者在.vue文件中动态创建标签引入。

参考链接：基于Webpack的Cesium+Vue应用_马骏超的博客-优快云博客_vue使用cesium

示例代码：https://github.com/vmanas/vue-electron-Cesium