Comment utiliser Esri Arcgis Map dans le projet ReactJs?

Question

J'essaie d'utiliser la carte Esri. Pour inclure la carte dans mon projet, voici ce que je trouve:

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

Mais il n'y a pas de package de dossier ou esri NPM. Par conséquent, je suis confus ici. Comment esri est-il importé dans le projet?

Answer 1

Vous n'avez pas besoin d'importer une API comme vous le faites pour ReactJS. Comme le fichier de réaction sera finalement compilé dans un fichier js, vous devez écrire les parties d'esri telles qu'elles sont et mélanger la partie ReactJS pour gérer le nœud dom, ce qui est l'objectif principal de ReactJS.

Un échantillon des liens ci-dessous est ici

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

Voici les liens où vous pouvez trouver des informations en détail.

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

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

Answer 2

Une méthode alternative à ce qui précède est celle démontrée dans esri-react-router-example. Cette application utilise une bibliothèque appelée esri-loader pour charger paresseux l'API ArcGIS uniquement dans les composants/routes où cela est nécessaire. Exemple:

Tout d'abord, installez le libary esri-chargeur:

npm install esri-loader --save 

importer ensuite les fonctions esri-chargeur dans un module RÉACTION:

import * as esriLoader from 'esri-loader' 

Puis paresseux charge l'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() 
    } 
}, 

Ensuite, chargez les modules de l'API ArcGIS (Dojo) nécessaires pour créer une carte:

_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'avantage d'utiliser esri chargeur sur l'approche ci-dessus est que vous ne devez pas utiliser le Dojo chargeur et toolchain pour charger et construire votre application entière. Vous pouvez utiliser la chaîne d'outils React de votre choix (webpack, etc.).

Cette blog post explique comment cette approche fonctionne et la compare à d'autres approches (similaires) utilisées dans des applications telles que esri-redux.

Answer 3

Utilisez esri-loader pour charger les modules esri requis. Ceci est un fond de carte de rendu de composant.

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; 

Cela rend une carte de base, mais cela ne répond pas. Si je supprime la div autour de la vue div ou si je donne la hauteur et la largeur de la div externe (entourant viewDiv) comme relatif ({height: '100%', width: '100%'}), la carte ne rend pas . Aucune idée pourquoi. Toutes les suggestions pour le rendre sensible seraient appréciées.