如何在ReactJs项目中使用Esri Arcgis Map？

Question

我正在尝试使用Esri地图。 要在我的项目中包含地图，我发现这是：

require([
    "esri/map",
    "esri/dijit/Search",
    "esri/dijit/LocateButton",
    "esri/geometry/Point",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",

但是没有任何esri文件夹或npm包。 因此，我在这里很困惑。 如何在项目中导入esri？

Answer 1

上面的另一种方法是在esri-react-router-example中演示的方法。 该应用程序使用名为esri-loader的库来仅在需要它的组件/路由中延迟加载ArcGIS API。 例：

首先，安装esri-loader libary：

npm install esri-loader --save

然后在任何react模块中导入esri-loader函数：

import * as esriLoader from 'esri-loader'

然后延迟加载ArcGIS API：

componentDidMount () {
  if (!esriLoader.isLoaded()) {
    // lazy load the arcgis api
    const options = {
      // use a specific version instead of latest 4.x
      url: '//js.arcgis.com/3.18compact/'
    }
    esriLoader.bootstrap((err) => {
      if (err) {
        console.error(err)
      }
      // now that the arcgis api has loaded, we can create the map
      this._createMap()
    }, options)
  } else {
    // arcgis api is already loaded, just create the map
    this._createMap()
  }
},

然后加载创建地图所​​需的ArcGIS API（Dojo）模块：

_createMap () {
  // get item id from route params or use default
  const itemId = this.props.params.itemId || '8e42e164d4174da09f61fe0d3f206641'
  // require the map class
  esriLoader.dojoRequire(['esri/arcgis/utils'], (arcgisUtils) => {
    // create a map at a DOM node in this component
    arcgisUtils.createMap(itemId, this.refs.map)
    .then((response) => {
      // hide the loading indicator
      // and show the map title
      // NOTE: this will trigger a rerender
      this.setState({
        mapLoaded: true,
        item: response.itemInfo.item
      })
    })
  })
}

使用esri-loader而不是上面显示的方法的好处是，您不必使用Dojo加载程序和工具链来加载和构建整个应用程序。 您可以使用您选择的React工具链（webpack等）。

这篇博客文章解释了这种方法的工作原理，并将其与esri-redux等应用程序中使用的其他（类似）方法进行了比较。

Answer 2

使用esri-loader加载所需的esri模块。 这是一个组件渲染底图。

import React, { Component } from 'react';
import { loadModules } from 'esri-loader';

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

const styles =  {
  container: {
    height: '100vh',
    width: '100vw'
  },
  mapDiv: {
    padding: 0,
    margin: 0,
    height: '100%',
    width: '100%'
  },
}

class BaseMap extends Component {

  constructor(props) {
    super(props);
    this.state = {
      status: 'loading'
    }
  }

  componentDidMount() {
    loadModules(['esri/Map', 'esri/views/MapView'], options)
      .then(([Map, MapView]) => {
        const map = new Map({ basemap: "streets" });
        const view = new MapView({
          container: "viewDiv",
          map,
          zoom: 15,
          center: [78.4867, 17.3850]
        });
        view.then(() => {
          this.setState({
            map,
            view,
            status: 'loaded'
          });
        });
      })

  }

  renderMap() {
    if(this.state.status === 'loading') {
      return <div>loading</div>;
    }
  }

  render() {

    return(
          <div style={styles.container}>
            <div id='viewDiv' style={ styles.mapDiv } >
              {this.renderMap()}
            </div>
          </div>
    )
  }
}

export default BaseMap;

这会呈现一个基本地图，但这不是响应。 如果我删除视图div周围的div或者我将外部div（周围的viewDiv）的高度和宽度设置为relative（{height：'100％'，width：'100％'}），则地图不会渲染。 不知道为什么。 任何建议，使其响应将不胜感激。

Answer 3

您不需要像对ReactJS那样导入esri api。 由于react文件最终会编译成js文件，你需要按原样编写esri部分并混合使用ReactJS部分来处理dom节点，这是ReactJS的主要目的。

以下链接中的示例如下所示

define([  
   'react',  
   'esri/toolbars/draw',  
   'esri/geometry/geometryEngine',  
   'dojo/topic',  
   'dojo/on',  
   'helpers/NumFormatter'  
 ], function(  
   React,  
   Draw, geomEngine,  
   topic, on,  
   format  
 ) {  
  var fixed = format(3);  
  var DrawToolWidget = React.createClass({  
    getInitialState: function() {  
       return {  
         startPoint: null,  
         btnText: 'Draw Line',  
         distance: 0,  
         x: 0,  
         y: 0  
       };  
     },  
     componentDidMount: function() {  
      this.draw = new Draw(this.props.map);  
      this.handler = this.draw.on('draw-end', this.onDrawEnd);  
      this.subscriber = topic.subscribe(  
        'map-mouse-move', this.mapCoordsUpdate  
       );  
     },  
     componentWillUnMount: function() {  
       this.handler.remove();  
       this.subscriber.remove();  
     },  
     onDrawEnd: function(e) {  
       this.draw.deactivate();  
       this.setState({  
       startPoint: null,  
         btnText: 'Draw Line'  
       });  
    },  
    mapCoordsUpdate: function(data) {  
      this.setState(data);  
      // not sure I like this conditional check  
      if (this.state.startPoint) {  
        this.updateDistance(data);  
      }  
    },  
    updateDistance: function(endPoint) {  
      var distance = geomEngine.distance(this.state.startPoint, endPoint);  
      this.setState({ distance: distance });  
    },  
    drawLine: function() {  
      this.setState({ btnText: 'Drawing...' });  
      this.draw.activate(Draw.POLYLINE);  
      on.once(this.props.map, 'click', function(e) {  
         this.setState({ startPoint: e.mapPoint });  
         // soo hacky, but Draw.LINE interaction is odd to use  
        on.once(this.props.map, 'click', function() {  
          this.onDrawEnd();  
        }.bind(this));  
      }.bind(this))  
    },  
    render: function() {  
      return (  
        <div className='well'>  
          <button className='btn btn-primary' onClick={this.drawLine}>  
            {this.state.btnText}  
          </button>  
          <hr />  
          <p>  
             <label>Distance: {fixed(this.state.distance)}</label>  
          </p>  
        </div>  
       );  
     }  
  });  
  return DrawToolWidget;  
});  

以下是您可以在其中详细查找信息的链接。

http://odoe.net/blog/esrijs-reactjs/

https://geonet.esri.com/people/odoe/blog/2015/04/01/esrijs-with-reactjs-updated