【番外】Electron和ArcGIS API for JavaScript的开发
【番外】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环境了，具体搭建环境其实也直接可以参考官网文档，写的很详细，地址如下：
https://www.electronjs.org/docs/tutorial/development-environment#setting-up-windows3、其实Electron的环境只要你安装部署了NodeJS环境的话从某种意义上来说就已经部署好了。我们接下来看一下如何创建一个demo。
创建demo
1、新建一个文件夹，然后在此文件夹中打开命令行窗口或者powershell窗口，通过npm init命令初始化一个项目，如下：
2、初始化完成之后，在此文件夹中可以看到如下文件：
package.json文件里是一些关于我们新建的项目的描述，包括项目的入口文件信息等。
3、用编辑器打开这个文件，然后在”scripts”标签下添加启动命令，如下：
"start": "electron ."
4、项目跟录下打开命令行工具，通过如下命令安装electron，如下：
npm install --save-dev electron5、然后在项目根目录新建index.js入口文件和index.html文件。并在index.js文件中添加如下代码：
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文件中添加如下代码：
<!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命令启动项目，最终结果如下：
7、这样一来就完成了一个Electron项目demo的创建。
引入ArcGIS API for JavaScript，地图实例化
1、在index.html文件里，引入ArcGIS API for JavaScript相关的css样式包和JS文件，如下：
<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，并设置样式：
<div id="mapview"></div><style>
#mapview {
position: absolute;
height: 100%;
width: 100%;
}
</style>3、新建<script>标签，实例化地图：
<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、启动项目，查看效果：
总结
其实Electron结合ArcGIS API for JavaScript开发的关键是要了解Electron的渲染机制，如果不了解的话中间肯定会报错。
附：
index.js源码
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源码
<!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>腾讯云开发者
