专栏首页ArcGIS JS API开发【番外】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-windows

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

创建demo

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

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

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

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

"start": "electron ."

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

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文件,如下:

<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>
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.xbeichenbei.com/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 【番外】 Vue中使用ArcGIS JS API 4.14开发

    本文主要介绍如何在Vue项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在Vue...

    X北辰北
  • 【番外】 React中使用ArcGIS JS API 4.14开发

    本文主要介绍如何在React项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在R...

    X北辰北
  • 【番外】 使用@arcgis/cli脚手架进行ArcGIS JS API开发

    本文主要介绍如何在Vue和React项目中使用ArcGIS JS API进行开发,与以往的esri-loader开发方式不同的是,本文使用的是@arcgis/c...

    X北辰北
  • ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core

    ArcGIS API for JavaScript 4.18中新增加了一种基于ES Modules的新开发方式@arcgis/core,这篇文章就来介绍一下如何...

    X北辰北
  • ArcGIS API For Javascript 4.15 绘制地图:GeometryEngine 和 要素之间的空间位置关系

    魏晓蕾
  • 【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评

    本文主要针对于在Vue和React项目中使用esri-loader和@arcgis/cli脚手架进行ArcGIS JS API开发时,比较两种方式的不同,供各位...

    X北辰北
  • 地理信息系统(GIS)系列——绪论

    地理信息系统(Geographic Information System 或 Geo-Information system,GIS)有时又称为“地学信息系统”。...

    魏晓蕾
  • ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

    当我们使用ArcGIS JS API开发项目时,经常会用到地图测量控件,用于测量地图上两点之间的距离、一片区域的面积或周长等,但是ArcGIS JS API测量...

    X北辰北
  • 有个机会来了!!!STEAM

    Cocos 官方今天发布了 Cocos Creator 3.3.0 版本,《奔跑吧小仙女》同步升级最新版引擎,购买过的伙伴可免费升级。

    张晓衡
  • 使用现代化的脚本进行 ArcGIS JS API 开发

    ArcGIS JS API 基于古老的 JavaScript 框架 Dojo 开发, dojo 虽然是曾经的王者, 但是2020年的前端开发, 早已是 Angu...

    beginor
  • 用 Django + Electron + Vue 写一个桌面文档客户端

    对于 Pythoner 来说,能用 Python 生态内的库写程序,就坚决不用其他语言的库。

    州的先生
  • 【学习过程】寻找合适的WebGIS开发构架

    一直想找到一个合适的构架来开发WebGIS,以前一直用的是Web ADF,然而经常遇到很大的技术阻力,因为,自己的JAVASCRIPT不怎么好,所以一直想尽量避...

    用户1170933
  • 前端开发人员的桌面应用神器 Electron

    曾经的 JavaScript 脆弱、简陋、甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScript 引擎和 ...

    CSDN技术头条
  • Webpack实战-构建 Electron 应用

    Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用...

    IMWeb前端团队
  • electron打包爬坑

    一番前面用electron+nodejs+vue+python开发了一个pdf合并工具,现在的情况是:

    efonfighting
  • ArcGis API JS 4.X本地化部署与地图的基础使用

    首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19。

    Kiba518
  • ArcGIS API for JavaScript开发入门必读

    ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线...

    X北辰北
  • Electron快速入门,聊聊跨进程通信那些事儿

    有句话叫做“有需求就有市场”,技术领域也同样是如此。在过往的前端领域之上,当面临需要涉及操作系统的时候,前端coder往往显得力不从心。这便是桌面应用的需求造就...

    Sneaker-前端公虾米

扫码关注腾讯云开发者

领取腾讯云代金券