Jak korzystać z mapy Esri Arcgis w projekcie ReactJs?

Question

Próbuję użyć mapy Esri. Aby dołączyć mapę do mojego projektu, oto co znalazłem:

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

Ale nie ma żadnego folderu lub pakietu npm. Dlatego jestem zdezorientowany tutaj. W jaki sposób esri jest importowany do projektu?

Answer 1

Nie musisz importować esri api tak jak w przypadku ReactJS. Ponieważ plik reagujący zostanie ostatecznie skompilowany do pliku js, musisz napisać części esri tak jak jest i wymieszać część ReactJS do obsługi węzła dom, który jest głównym celem ReactJS.

próbka z poniższych linków jest tu

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

Poniżej znajdują się linki, gdzie można znaleźć informacje w szczegółach.

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

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

Answer 2

Alternatywnym sposobem wyżej jedną pokazano na esri-react-router-example. Ta aplikacja używa biblioteki o nazwie esri-loader do leniwego ładowania interfejsu API ArcGIS tylko w komponentach/trasach, gdzie jest to potrzebne. Przykład:

najpierw zamontować Libary ESRI ładującego:

npm install esri-loader --save 

Następnie importowania funkcji ESRI załadunku dowolnego reagowania modułu:

import * as esriLoader from 'esri-loader' 

Następnie leniwa obciążenia API ArcGIS:

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() 
    } 
}, 

Następnie załaduj moduły interfejsu ArcGIS API (Dojo), które są potrzebne do utworzenia mapy:

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

Zaletą korzystania z esri-loader w porównaniu z podejściem przedstawionym powyżej jest to, że nie trzeba używać programu ładującego Dojo i zestawu narzędzi do ładowania i kompilowania całej aplikacji. Możesz użyć wybranego zestawu narzędzi React (webpack itp.).

Ten blog post wyjaśnia, w jaki sposób działa to podejście i porównuje je z innymi (podobnymi) podejściami stosowanymi w aplikacjach takich jak esri-redux.

Answer 3

Użyj programu esri-loader, aby załadować wymagane moduły esri. To jest komponent renderujący mapę bazową.

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; 

Czyni mapę bazową, lecz nie reaguje. Jeśli usunę element div wokół widoku div lub jeśli podaję wysokość i szerokość zewnętrznego div (otaczającego widokuDiv) jako względny ({wysokość: '100%', szerokość: '100%'}), mapa nie będzie renderować . Nie mam pojęcia dlaczego. Sugerowane będą wszelkie sugestie, które pozwolą mu reagować.