Cesium+Electron 打造桌面端程序

优质

小牛编辑

287浏览

2023-12-01

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的使用可以参考