如何在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-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）的高度和宽度指定为相对值 ({ height: '100%', width: '100%'})，则地图不会渲染。不知道为什么。任何使其响应的建议将不胜感激。

Answer 2

您不需要像 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