一、概述

在之前很長的一段時間中，使用ArcGIS JS API(以下簡稱“JS API”)開發WebGIS系統的時候，還是基於傳統的前端框架和各種前端技術來開發，這些框架和技術各位使用過的大概有這些：Dojo、jQuery、Bootstrap、CommonJS等。用這些傳統的技術框架結合JS API去開發的時候，我們引入JS API是在系統的HTML頁面中通過

目前，隨著前端技術的不斷髮展，React和Vue等前端開發技術已經成為了一名前端開發者的標配，作為GISer的我們也毫無例外，在開發許許多多的WebGIS項目系統時，我們都會去選擇目前主流的這些開發技術，其中使用最多的就是React和Vue這兩種。所以本文就主要介紹下我們如何使用React結合JS API去開發我們的項目系統。

二、開始前的技術基礎

• 有一定的React基礎知識，熟悉ES6、熟悉JSX語法
• 計算機安裝了NodeJS,聽說過npm

三、操作步驟

1、環境準備

在開始今天的介紹之前，我們要準備下開發環境，本文對開發環境只有一個要求：NodeJS環境。如果各位沒有這個環境的話，請看下文進行安裝；如果機子上有這個環境，請跳過此節，從第二節開始閱讀。

1.1、NodeJS環境安裝

1.1.1、進入到NodeJS官網(https://nodejs.org/en/)下載最新版的NodeJS，此處推薦下載LTS版本，這是穩定的並且官方長期支持更新的一個版本，如圖：

1.1.2、下載完安裝包之後，雙擊安裝包，彈出安裝界面，選擇相應的安裝目錄後，我們一路點擊【Next】按鈕即可，中間過程並沒有特別需要注意的地方。

1.1.3、安裝完成後，我們打開命令行窗口，通過以下命令查看是否安裝成功，如果出現以下版本號信息，則表示NodeJS環境安裝部署成功：

<code>node -v
npm -v/<code>

在這裡可能有人會問NodeJS和npm的關係，其實NodeJS就是javaScripe的一個運行環境，它對谷歌V8引擎做了封裝，是一個服務器端的JS解釋器。npm是NodeJS的一個包管理器。我們在開發時如果要用到什麼插件，需要先搜索、下載、安裝到NodeJS環境中，然後才可以使用這個插件來開發完成某個需求，這個過程是相當繁瑣的。有了npm包管理器，我們只需要在項目根目錄下運行命令行，然後通過npm的安裝命令將需要的插件一鍵安裝到此項目或者NodeJS環境中，這是非常便捷的一件事情，而且很多大神將自己開發好的輪子上傳到了npm網站上面，所以我們需要哪個插件，直接npm安裝即可，不需要再去進行搜索、下載、安裝這麼麻煩的過程。

1.1.4、在此處我們安裝NodeJS環境，說白了也是為了安裝npm這個包管理器才進行的操作。

1.1.5、安裝完NodeJS環境後，有人會問，我們要不要像Vue那樣安裝React環境呢，其實在此處是不需要的，我們React腳手架工具其實是在安裝NodeJS的時候已經安裝了。它就是npm的一個進化版本npx，我們後續創建React項目是通過這個npx去創建的。

到此處為止，我們的環境準備工作已經完成，接下來我們進入今天的正題，使用React結合JS API來開發。

2、初始化項目demo

2.1、在合適的目錄下新建文件夾，然後在此文件夾中打開命令行工具，通過以下命令來創建一個基礎的React項目demo，如下：

<code> npx create-react-app reactjsapi414demo/<code>

以上命令使用了React的腳手架工具來初始化一個項目demo，demo名稱為“reactjsapi414demo”，此名稱可以自己隨意取名。輸入以上命令按回車之後，會進行插件安裝和項目初始化工作。

2.2、項目初始化結束後，我們使用命令行中提示的命令進入到項目根目錄，然後通過提示命令來啟動項目，並且在瀏覽器中通過地址“localhost:3000”來查看，如下：

<code> cd .\\reactjsapi414demo\\
 npm start/<code>

2.3、此時，初始化項目操作已經完成。我們通過react腳手架來創建了一個基礎的react項目demo，接下來我們通過這個demo來介紹JS API如何跟React結合來開發使用。

3、ArcGIS JS API和React結合開發

以上過程已經完成了環境安裝部署和項目初始化工作，接下來就要進行JS API的開發介紹了。

3.1、在React項目中使用JS API時已經不像傳統的開發方式那樣在index.html中引入JS和CSS文件來使用JS API，而是通過一個叫“esri-loader”的中間件，將我們的JS API和React項目做一個無縫銜接。

3.2、在命令行中通過Ctrl+C來停止項目的運行，然後通過以下命令來安裝esri-loader，如下：

<code> npm install esri-loader --save-dev/<code>

3.3、安裝結束後，通過命令“npm start”重新啟動項目，然後用編輯器打開我們初始化的這個項目代碼，此處使用的是webStrom編輯器，各位可以使用Hbuilder、SublimeText3、VS Code等編輯器，不做強制要求，如下：

3.4、然後打開項目根目錄下的package.json文件，在這個文件中我們可以看到剛才安裝的esri-loader插件，此時使用的是V2.13.0版本，如下所示：

3.5、接下來我們就在項目根目錄下的src文件夾中，通過修改App.js這個文件來介紹如何在React中使用JS API開發。如下，我們先刪除App.js這個文件中多餘的HTML標籤和一些JS代碼，然後將默認的函數式組件修改為類組件寫法，最後這個文件代碼如下所示：

3.6、在此處我們就不新建標籤了，直接為class為“App”的這個div添加一個同名的id屬性，來實例化一個地圖。接下來我們修改下id為“app”這個div的標籤樣式。代碼如下：

<code>#app {
  position: absolute;
  width: 100%;
  height: 100%;
}/<code>

3.7、然後加載引入我們安裝的esri-loader插件，如下：

<code> import esriLoader from 'esri-loader';/<code>

3.8、引入esri-loader之後，接下來就讓我們的項目系統和JS API做一個銜接。在這裡大家一定要理解一個概念：我們在React中使用JS API時，調的接口這些還是我們傳統開發調的那些接口API，esri-loader在這裡僅僅是充當一個橋樑的作用，所以大家不要誤認為esri-loader也是一個開發包哈。也就是說，你最終使用的JS API開發包還是我們本地部署或者JS API官網的開發包，並不是esri-loader裡面的開發包。

做銜接之前，我們先創建一個componentDidMount生命週期函數，然後在這個函數里進行地圖初始化工作，代碼如下：

<code>import React,{Component} from 'react';
import esriLoader from 'esri-loader';
import './App.css';

class App extends Component{

    state = {

    }

    componentDidMount = () => {
        const _self = this;
        const options = {
            url: 'https://js.arcgis.com/4.14/init.js', // 這裡的API地址可以是官網提供的CDN，也可在此配置離線部署的地址 

            css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
        };

        esriLoader.loadModules([], options) // 傳入需要使用的類
            .then(([]) => {
                // doSomeThing

            })
            .catch(err => {
                console.error('地圖初始化失敗', err);
            })
    }

    render () {
        return (
            

            

        )
    }
}

export default App;/<code>

通過以上的代碼，就將我們的項目系統代碼和JS API做了一個銜接，其實就是在我們React項目中引入了JS API。接下來進行JS API的開發。

3.9、本文主要是通過實例化一張地圖來介紹如何使用JS API開發。接下來的操作跟我們傳統的開發方式就變得類似了，先是加載相應的JS API模塊，然後在實例化各個模塊，如下所示：

<code>   \t\tesriLoader.loadModules([
            "esri/Map",
            "esri/views/MapView"], options) // 傳入需要使用的類
            .then(([Map,
                       MapView
                   ]) => {
                // doSomeThing 


                let map = new Map({
                    basemap: 'osm'
                });

                let view = new MapView({
                    container: "app",
                    map: map,
                    center: [104.072044,30.663279],
                    zoom: 10
                });

            })
            .catch(err => {
                console.error('地圖初始化失敗', err);
            })
/<code>

3.10、通過以上步驟，就實例化了一張二維地圖，最終的效果如下所示：

四、總結

本文沿著React基礎項目demo搭建到JS API的引入，並最終生成一張二維地圖的過程進行了詳細的介紹。本篇文章適合有一定React基礎和JS API開發基礎的人員查看學習，在本文中我們使用的JS API是官網的JS API，大家也可以將API地址換成本地的，只需要修改options這個對象的屬性值即可，類似於下面：

<code>const options = {      //定義一個包含有JS API中js開發包和css樣式文件的對象
    url: 'http://localhost/4.14/init.js',
    css: 'http://localhost/4.14/esri/themes/light/main.css',
};/<code>

通過修改如上的代碼，就將JS API的引用地址換成了本地地址，只不過在此處運行的時候需要注意下跨域的問題。如果遇到跨域問題，可以通過配置React的配置文件來解決，具體操作不在本文範圍內，可自行百度解決。大家在React和JS API結合開發時如果遇到什麼問題，請聯繫博主解答。

附：

項目demo全部代碼：

https://gitee.com/XuQianWen/use_of_arcgis_js_api_in_react

App.js全部代碼：

<code>import React,{Component} from 'react';
import esriLoader from 'esri-loader';
import './App.css';

class App extends Component{

    state = {

    }

    componentDidMount = () => {
        const _self = this;
        const options = {
            url: 'https://js.arcgis.com/4.14/init.js', // 這裡的API地址可以是官網提供的CDN，也可在此配置離線部署的地址
            css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
        };

        esriLoader.loadModules([
            "esri/Map",
            "esri/views/MapView"], options) // 傳入需要使用的類
            .then(([Map,
                       MapView
                   ]) => {
                // doSomeThing

                let map = new Map({
                    basemap: 'osm'
                });

                let view = new MapView({
                    container: "app",
                    map: map,
                    center: [104.072044,30.663279],
                    zoom: 10
                });

            })
            .catch(err => {
                console.error('地圖初始化失敗', err);
            })
 

    }

    render () {
        return (
            

            

        )
    }
}

export default App;
/<code>

閱讀更多 X北辰北 的文章

關鍵字: Node.js jQuery 電腦