0%

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

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中的使用方式见文章后半部分):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//直接使用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这个包:

1
npm install @arcgis/core

安装完成后我们可以在package.json文件中看到安装后的版本号,其实就是API的版本号:

img

2、安装完成之后,我们打开项目根目录下的package.json文件,修改项目启动命令:

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

img

以上的启动命令中我们修改了默认的startbuild命令,然后新增了一个copy命令,这条命令主要是将@arcgis/core这个包里面的静态资源拷贝到了项目的public目录下。

可以看到copy命令里面使用了ncp这个命令,所以我们要通过以下命令来全局安装一下这个工具:

1
npm install ncp -g

3、然后在React项目的App.js或者index.js文件中通过如下命令引入ArcGIS API for JavaScript所需的样式文件包,如下:

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

4、最后在组件代码文件顶部位置引入所需要的API模块,此处我们仅仅创建一张二维地图,所以代码直接写在了App.js文件里,如下所示:

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

5、写一个生命周期函数,然后在函数里面编写实例化二维地图的代码,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
componentDidMount = () => {
this.initMap();
};
initMap = () => {
const map = new Map({
basemap: 'osm',
});
const view = new MapView({
container: 'mapview',
map: map,
zoom: 10,
});
};

6、最后就可以看到结果了,如下:

img

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方式有什么区别吧,下图是一张官网的截图,里面大概的比较了两种方式的区别:

img