Làm cách nào để sử dụng Bản đồ Esri Arcgis trong Dự án ReactJs?

Question

Tôi đang cố gắng sử dụng bản đồ Esri. Để bao gồm bản đồ trong dự án của tôi, dưới đây là những gì tôi tìm thấy:

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

Nhưng không có bất kỳ thư mục esri hoặc gói npm nào. Vì vậy, tôi bối rối ở đây. Làm thế nào esri được nhập khẩu trong dự án?

Answer 1

Bạn không cần nhập api esri như bạn làm cho ReactJS. Khi tệp phản ứng cuối cùng sẽ biên dịch thành tệp js, bạn cần viết phần esri như nó và trộn phần ReactJS để xử lý nút dom, đó là mục đích chính của ReactJS.

Một mẫu từ các liên kết dưới đây là đây

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; 
}); 

Dưới đây là các liên kết nơi bạn có thể tìm kiếm thông tin chi tiết.

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

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

Answer 2

Một phương pháp khác để ở trên là một trong những chứng minh trong esri-react-router-example. Ứng dụng đó sử dụng một thư viện có tên là esri-loader để tải xuống ArcGIS API một cách lười biếng chỉ trong các thành phần/tuyến mà nó cần thiết. Ví dụ:

Đầu tiên, cài đặt THƯ VIỆN ESRI-loader:

npm install esri-loader --save 

Sau đó nhập các chức năng ESRI-loader trong bất kỳ phản ứng mô-đun:

import * as esriLoader from 'esri-loader' 

tải Sau đó, lười biếng 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() 
    } 
}, 

Sau đó tải và các mô-đun (Dojo) của ArcGIS API cần thiết để tạo bản đồ:

_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 
     }) 
    }) 
    }) 
} 

Lợi ích của việc sử dụng bộ tải esri theo cách tiếp cận ở trên là bạn không phải sử dụng bộ tải Dojo và chuỗi công cụ để tải và xây dựng toàn bộ ứng dụng của bạn. Bạn có thể sử dụng chuỗi công cụ React mà bạn chọn (webpack, v.v.).

Điều này blog post giải thích cách thức hoạt động của phương pháp này và so sánh nó với các phương pháp tiếp cận khác (tương tự) được sử dụng trong các ứng dụng như esri-redux.

Answer 3

Sử dụng bộ nạp esri để tải các mô đun esri được yêu cầu. Đây là sơ đồ cơ sở kết xuất thành phần.

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; 

Điều này làm cho bản đồ cơ sở nhưng điều này không phản hồi. Nếu tôi loại bỏ div xung quanh div xem hoặc nếu tôi cung cấp chiều cao và chiều rộng của div ngoài (xung quanh viewDiv) là tương đối ({height: '100%', width: '100%'}), bản đồ sẽ không hiển thị . Không biết tại sao. Bất kỳ đề xuất để làm cho nó đáp ứng sẽ được đánh giá cao.