2018-01-15

ArcGIS For JS之二——与React集成

看着前端技术日益蓬勃发展，而我们却不能随心去用，岂不惋惜。好在，esri考虑到了这一点，为我们提供了相应的适配技术。本文讲解基于Webpack，babel，React与ArcGIS For JS的集成技术。

esri-loader

我们知道，IE严重拖了前端发展的后腿，而我们的很多客户只会用IE不知道有啥FF，Chrome。那么先进的ES6等就不能在这些宿主上运行了，对应的就出现了，babel和各种各样的loader。同样，arcgis for javascript api不能在没有dojo的环境中加载，因此为了加载这些api，esri为我们提供相应的loader，这里使用的是webpack，那么就需要esri-loader。

Install

1	npm install --save esri-loader

使用

Loading Styles

 /* esri styles */
@import url('https://js.arcgis.com/4.6/esri/css/main.css');
/* esri styles */
@import url('https://js.arcgis.com/3.23/esri/css/esri.css');

Loading Modules from the ArcGIS API for JavaScript

 // first, we use Dojo's loader to require the map class
esriLoader.loadModules(['esri/views/MapView', 'esri/WebMap'])
.then(([MapView, WebMap]) => {
  // then we load a web map from an id
  var webmap = new WebMap({
    portalItem: { // autocasts as new PortalItem()
      id: 'f2e9b762544945f390ca4ac3671cfa72'
    }
  });
  // and we show that map in a container w/ id #viewDiv
  var view = new MapView({
    map: webmap,
    container: 'viewDiv'
  });
})
.catch(err => {
  // handle any errors
  console.error(err);
});

在4.x的api中esri用了大量的Promise,正如上面的loadModules()它返回的也是一个Promise,它会以懒加载的形式去加载项目中还没有通过loadScript()被加载的被请求的模块。注意：在项目中一旦木块被loadScript()加载成功，那么loadModules()将不会再次去加载它。

esri-loader-react

esri-loader-react是使用React组件对esri-loader的一层封装，以更方便的在React中使用。

Version 2.x of this library is compatible with esri-loader 1.5.0 and higher.

install

1	npm install react react-dom prop-types esri-loader esri-loader-react

使用

import React, {PureComponent} from 'react';
import EsriLoaderReact from 'esri-loader-react';

class AppMain extends PureComponent {

  render() {
    const options = {
      url: 'https://js.arcgis.com/4.6/'
    };

    return (
      <EsriLoaderReact 
        options={options} 
        modulesToLoad={['esri/Map', 'esri/views/MapView']}    
        onReady={({loadedModules: [Map, MapView], containerNode}) => {
          new MapView({
            container: containerNode,
            map: new Map({basemap: 'oceans'})
          });
        }}
      />
    );
  }
}

该组件有如下属性：

EsriLoaderReact.propTypes = {
  renderMapContainer: PropTypes.bool, // default is true
  mapContainerClassName: PropTypes.string, // default is 'map-view'
  modulesToLoad: PropTypes.arrayOf(PropTypes.string),
  options: PropTypes.shape({
    url: PropTypes.string,
    dojoConfig: PropTypes.object
  }),
  onError: PropTypes.func, // (error, info) => also called from componentDidCatch, default is onError: (error, info) => console.error(error),
  onReady: PropTypes.func, // ({loadedModules, containerNode}) => containerNode is null if renderMapContainer !== true
};