16 ArcGIS API for JavaScript 4.18基于ES Modules的新開發方式@arcgis/core

寫在前面

隨著前端主流框架Vue和React的發展，大家在做WebGIS專案開發時是不是也在vue或者react專案里使用ArcGIS API for JavaScript呢，之前我們在vue或者react專案里使用ArcGIS API for JavaScript的時候一直給大家推薦"esri-loader"的AMD方式，示例代碼如下所示(在這里僅僅演示React專案中的使用，Vue中的使用方式見文章后半部分)：

//直接使用esri-loader的then()方法鏈式回呼
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 (
            <div className='App' id='app'>
            </div>
        )
    }
}
 
export default App;


//或者是這樣子
//直接使用ES7的async和await來做
import React, { Component } from 'react';
import { loadModules } from 'esri-loader';
import './App.css';

const options = {
	url: 'https://js.arcgis.com/4.17/',
	css: 'https://js.arcgis.com/4.17/esri/themes/light/main.css',
};

class App extends Component {
	componentDidMount = () => {
		this.initMap();
	};

	initMap = async () => {
		 const [Map, MapView] = await loadModules(
		 	['esri/Map', 'esri/views/MapView'],
		 	options
		 );

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

		const view = new MapView({
			container: 'mapview',
			map: map,
			zoom: 10,
		});
	};

	render() {
		return <div id="mapview"></div>;
	}
}

export default App;

以上我們演示了在React專案中通過"esri-loader"使用ArcGIS API for JavaScript開發的兩種方式，至于在Vue中的使用方式見下面的文章即可，里面有詳細的介紹流程，文章串列如下：

• 【番外】 Vue中使用ArcGIS JS API 4.14開發
• 【番外】 React中使用ArcGIS JS API 4.14開發
• 【番外】 使用@arcgis/cli腳手架進行ArcGIS JS API開發

以上的方式不管我們怎么優化，都有一個問題：我們在組件代碼的某一個地方如果需要ArcGIS API for JavaScript中的某一個API模塊的話，就需要通過"esri-loader"的loadModules方法來異步加載進來，然后才能進行相應的功能開發，這樣其實很不方便我們的代碼撰寫，我們更希望的一種方式是：如果需要什么ArcGIS API for JavaScript的API模塊，我們直接在組件代碼的頂部引入即可，這樣在組件代碼的任何地方都可以使用這個API模塊了，這樣的一種使用方式其實通過"esri-loader"是沒法實作的，除非你對ArcGIS API for JavaScript的介面根據專案需要再進行封轉，

但是隨著ArcGIS API for JavaScript 4.18的發布，這種尷尬的局面被打破了，ArcGIS API for JavaScript 4.18新增了一種使用方式——@arcgis/core，通過這種方式，我們可以實作直接在組件頂部引入所需的API模塊，然后在組件代碼任何地方即可使用，

具體操作

1、初始化一個Vue或者React專案demo(如果不會創建的話，閱讀上面提到的三篇文章即可，里面有詳細的介紹)，在此處為了演示我新建了一個React專案demo，專案demo新建完成后按照官網所示在專案demo根目錄下打開命令列視窗，然后安裝@arcgis/core這個包：

npm install @arcgis/core

安裝完成后我們可以在"package.json"檔案中看到安裝后的版本號，其實就是API的版本號：

2、安裝完成之后，我們打開專案根目錄下的"package.json"檔案，修改專案啟動命令：

	"scripts": {
		"start": "npm run copy && react-scripts start",
		"build": "npm run copy && react-scripts build",
		"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
	},

以上的啟動命令中我們修改了默認的start和build命令，然后新增了一個copy命令，這條命令主要是將@arcgis/core這個包里面的靜態資源拷貝到了專案的public目錄下，

可以看到copy命令里面使用了ncp這個命令，所以我們要通過以下命令來全域安裝一下這個工具：

npm install ncp -g

3、然后在React專案的"App.js"或者"index.js"檔案中通過如下命令引入ArcGIS API for JavaScript所需的樣式檔案包，如下：

import '@arcgis/core/assets/esri/themes/light/main.css';

4、最后在組件代碼檔案頂部位置引入所需要的API模塊，此處我們僅僅創建一張二維地圖，所以代碼直接寫在了App.js檔案里，如下所示：

import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

5、寫一個生命周期函式，然后在函式里面撰寫實體化二維地圖的代碼，如下：

	componentDidMount = () => {
		this.initMap();
	};

	initMap = () => {
		const map = new Map({
			basemap: 'osm',
		});

		const view = new MapView({
			container: 'mapview',
			map: map,
			zoom: 10,
		});
	};

6、最后就可以看到結果了，如下：

7、以上就是全部的關于@arcgis/core方式的介紹了，

總結

隨著@arcgis/core方式的出現，目前我們在Vue或者React專案中使用ArcGIS API for JavaScript的開發方式由以前的一種變為了目前的兩種方式："esri-loader"和"@arcgis/core"，因為是新出現的使用方式，目前僅僅是測驗版，但是能滿足大部分的開發需求，就博主目前來開發的功能來說，沒有出現過任何問題，所以大家可以放心使用，但是在@arcgis/core的方式中目前還沒找到如何使用特定版本API的方式，因為目前通過"npm install @arcgis/core"安裝的話，里面包含的API默認就是最新版4.18，在這里僅僅是猜測，或許通過"npm install @arcgis/core@4.17.0"這種方式可以安裝4.17版本的API，但是沒有試過，或許也不行，因為@arcgis/core是在4.18才出現的嘛，有興趣的小伙伴可以自己試試，

最后我們來看看"@arcgis/core"的這種ES Modules方式和傳統的"esri-loader"的AMD方式有什么區別吧，下圖是一張官網的截圖，里面大概的比較了兩種方式的區別：