cesium+electron打造桌面端程序
所属分类: HTML 2019-03-18 16:46:20 编辑：admin 浏览次数 992 次
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> <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的使用可以参考
猜你喜欢
- 纯html实现流布局 2018-07-25
- 移动前端常用meta标签 2018-12-14
- HTML转Excel，并实现打印，下载功能 2019-02-28
- 前端怎么展示excel和ppt和word 2019-03-01
- html 的textarea自适应内容 2020-05-15
- 判断ie浏览器，加载js 2022-06-11