cesium编程中级(十二)cesium+electron打造桌面端程序

Elusive Cesium编程中级

cesium+electron打造桌面端程序

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。vscode就是用它来实现的。本篇介绍使用electron和cesium搭建简单的三维桌面环境。

先来搭建electron的环境

这里  写的太详细了。我都不好意思抄一遍。

这里我们直接clone工程electron-quick-start

# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ cnpm install
# 运行应用
$ cnpm start

不能科学上网的同学最好使用cnpm，不然那个叫一个慢。。。

完成之后,可以看到这界面

添加cesium

看完上面的步骤，有可能大家已经想到了接下来要做什么，没错，我们只要把index.html里面的内容换成cesium就可以了

再来安装cesium

cnpm install cesium --save

index.html内容换成下面的(这应该很熟悉吧)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>My Cesium App</title>
    <script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script>
    <style>
        @import url(./node_modules/cesium/Build/Cesium/Widgets/widgets.css);
        html,
        body,
        #cesiumContainer {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: new Cesium.TileMapServiceImageryProvider({
                url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
            })
        });
    </script>
</body>

</html>

再来执行一次 cnpm start

没错。。。。就是这么简单

打包

安装electron-packager

cnpm install --save-dev electron-packager

win上面打包成exe

:: electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version版本号 --overwrite --ignore=node_modules

electron-packager . app --win --out presenterTool --arch=x64 --app-version 1.4.14 --overwrite --ignore=node_modules

mac上面打包成app

./node_modules/.bin/electron-packager . <ourAppName> --platform=darwin --arch=x64 --overwrite

进一步了解electron的使用可以参考

问题1. electron-packager 下载特别慢，使用： 

 electron-packager . --platform=win32 --arch=x64 --out=./dist --asar --app-version=0.1.0 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --download.mirrorOptions.customDir=15.0.0 --overwrite

问题2. 打包的时候 node_modules里的cesium没有打包，执行

npm install cesium --save

不使用 --ignore=node_modules

8 thoughts to “cesium编程中级(十二)cesium+electron打造桌面端程序”

  1. 我的title可以正常显示，但是内容是空白的，还有一个菜单栏（File,Edit,View,Window,Help），我反复确认了install和index.html都没有问题的

发表评论