0%

【番外】Electron和ArcGIS API for JavaScript的开发

最近学了一些Electron.js开发桌面应用的知识,然后作为一名专业的GISer,脑海里马上想到的是,它能不能和我们的ArcGIS JS API整合呢,意思就是,用我们的ArcGIS JS API去开发桌面应用,试了下,好像可以。

概述

写这篇文章主要是想折腾下,因为我看到JS可以通过Electron来做桌面应用程序,那么Electron能不能和ArcGIS API for JavaScript进行结合开发呢,这样一来是不是可以从某种意义上理解成我们的ArcGIS API for JavaScript可以做桌面应用了呢?带着这样的疑问,这篇文章就出来了。

具体操作

Electron环境搭建

1、Electron环境搭建之前要求大家的机子上要有NodeJS环境,关于NodeJS环境的搭建过程,大家直接网上找资料即可,下载安装包之后直接安装就可以,这篇文章不做详细介绍。

2、NodeJS环境安装部署之后,我们就可以搭建Electron环境了,具体搭建环境其实也直接可以参考官网文档,写的很详细,地址如下:

1
https://www.electronjs.org/docs/tutorial/development-environment#setting-up-windows

3、其实Electron的环境只要你安装部署了NodeJS环境的话从某种意义上来说就已经部署好了。我们接下来看一下如何创建一个demo。

创建demo

1、新建一个文件夹,然后在此文件夹中打开命令行窗口或者powershell窗口,通过npm init命令初始化一个项目,如下:

img

2、初始化完成之后,在此文件夹中可以看到如下文件:

img

package.json文件里是一些关于我们新建的项目的描述,包括项目的入口文件信息等。

3、用编辑器打开这个文件,然后在”scripts”标签下添加启动命令,如下:

1
"start": "electron ."

img

4、项目跟录下打开命令行工具,通过如下命令安装electron,如下:

1
npm install --save-dev electron

5、然后在项目根目录新建index.js入口文件和index.html文件。并在index.js文件中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const { app, BrowserWindow } = require('electron')

function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

// 加载index.html文件
win.loadFile('index.html')
}

app.whenReady().then(createWindow)

index.html文件中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

6、最后在命令行通过npm start命令启动项目,最终结果如下:

img

img

7、这样一来就完成了一个Electron项目demo的创建。

引入ArcGIS API for JavaScript,地图实例化

1、在index.html文件里,引入ArcGIS API for JavaScript相关的css样式包和JS文件,如下:

1
2
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/init.js"></script>

2、新建存放地图的div,并设置样式:

1
<div id="mapview"></div>
1
2
3
4
5
6
7
<style>
#mapview {
position: absolute;
height: 100%;
width: 100%;
}
</style>

3、新建<script>标签,实例化地图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "mapview",
map: map,
zoom: 4,
center: [15, 65]
});

});
</script>

4、启动项目,查看效果:

img

总结

其实Electron结合ArcGIS API for JavaScript开发的关键是要了解Electron的渲染机制,如果不了解的话中间肯定会报错。

附:

index.js源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const {app, BrowserWindow} = require('electron');

function createWindow() {

//创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
// webPreferences: {
// nodeIntegration: true
// }
});

//加载index.html文件
win.loadFile('index.html');

//开启调试工具
win.webContents.openDevTools();

}

app.whenReady().then(createWindow);

index.html源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<style>
#mapview {
position: absolute;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
</head>
<body>
<div id="mapview"></div>
<script>
var nodereq = window.require;
</script>
<script src="https://js.arcgis.com/4.15/init.js"></script>
<script>
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "mapview", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
zoom: 4, // Sets zoom level based on level of detail (LOD)
center: [15, 65] // Sets center point of view using longitude,latitude
});

});
</script>
</body>
</html>