之前的项目使用的是jquery，为了跟上前端技术，本次项目使用了react和typescript来开发，创建react项目的脚手架使用的是create-react-app，没有使用webpack，所以在引入ArcGis的API时使用的是esri-loader，相关文档可以查看官网的react安装指南。
安装
首先使用如下命令进行安装：
npm install --save esri-loader
安装完esri-loader后，再安装esri-loader的ts声明文件。如下所示：
npm install --save @types/arcgis-js-api
使用
使用arcgis的API之前，需要先引入loadModules，然后在loadModules中引用相关的包。如下所示
import React from 'react';
import { loadModules } from 'esri-loader';
export default class JTMap extends React.Component {
view: any;
mapRef:any;
constructor(props:any) {
super(props);
this.mapRef = React.createRef();
}
componentDidMount() {
// 懒加载库文件和CSS样式
loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
.then(([ArcGISMap, MapView]) => {
const map = new ArcGISMap({
basemap: 'topo-vector'
});
this.view = new MapView({
container: this.mapRef.current,
map: map,
center: [-118, 34],
zoom: 8
});
});
}
componentWillUnmount() {
if (this.view) {
// 销毁地图
this.view.container = null;
}
}
render() {
return (
<div id="map" ref={this.mapRef} />
);
}
}
部署本地API
由于esri-loader使用的是异步加载的方式，并且API是放在arcgis服务器上的，访问起来就很慢，需要把API部署在本地服务器上加快访问速度。怎么搭建本地环境这里不做介绍，可以直接参考我之前写的ArcGis 4.13 for javascript本地部署。这里主要是介绍下怎么设置esri-loader的本地环境。设置也比较简单，主要是设置setDefaultOptions相关的参数，通过如下方式先进行引用。
import { loadModules ,setDefaultOptions} from 'esri-loader';
然后再设置js和CSS的地址。
setDefaultOptions({
url:'//localhost/arcgis/4.13/dojo/dojo.js',
css:'//localhost/arcgis/4.13/esri/themes/light/main.css'
})
如果react项目和arcgis js不在同一域名下，需要设置下跨域。在package.json中可以加入如下配置：
"proxy": "http://localhost"
按这三步来设置后，就大功告成了。
个人博客
