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

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-dev

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');
  </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 --version 1.4.14 --overwrite --ignore=node_modules

mac上面打包成app

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

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注