【番外】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命令初始化一个项目，如下：

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

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

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

1	"start": "electron ."

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

1	npm install --save-dev electron

5、然后在项目根目录新建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文件，如下：

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>

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

概述

具体操作

Electron环境搭建

创建demo

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

总结

附：

index.js源码

`index.js`源码