在react项目中使用arcgis

之前的项目使用的是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 (
        

      );
    }
  }

部署本地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"

按这三步来设置后，就大功告成了。
个人博客