寫在前面
隨着前端主流框架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 -g3、然後在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/[email protected]"這種方式可以安裝4.17版本的API，但是沒有試過，或許也不行，因爲@arcgis/core是在4.18纔出現的嘛，有興趣的小夥伴可以自己試試。
最後我們來看看"@arcgis/core"的這種ES Modules方式和傳統的"esri-loader"的AMD方式有什麼區別吧，下圖是一張官網的截圖，裏面大概的比較了兩種方式的區別：
