मैं ReactJs प्रोजेक्ट में Esri Arcgis मानचित्र का उपयोग कैसे कर सकता हूं?

Question

मैं एस्सी मानचित्र का उपयोग करने की कोशिश कर रहा हूं।

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

लेकिन वहाँ किसी भी ESRI फ़ोल्डर या NPM पैकेज नहीं है: अपने प्रोजेक्ट में नक्शे में शामिल करने के लिए, यहाँ मैं क्या पाया है। इसलिए, मैं यहाँ उलझन में हूँ। परियोजना में एएसआरआई कैसे आयात किया जाता है?

Answer 1

आपको रेक्टजेएस के लिए एएसआरआई एपीआई आयात करने की आवश्यकता नहीं है। चूंकि प्रतिक्रिया फ़ाइल अंततः एक जेएस फ़ाइल में संकलित हो जाएगी, इसलिए आपको एएसआरई भागों को लिखने की आवश्यकता है और डोम नोड को संभालने के लिए ReactJS भाग को मिलाकर, जो 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

Answer 2

ऊपर लिए एक वैकल्पिक पद्धति esri-react-router-example में प्रदर्शन से एक है। वह एप्लिकेशन esri-loader नामक लाइब्रेरी का उपयोग करता है जो आर्कजीआईएस एपीआई को केवल घटकों/मार्गों में आलसी लोड करता है जहां इसकी आवश्यकता होती है। उदाहरण:

पहले, ESRI-लोडर पुस्तकालय स्थापित:

npm install esri-loader --save 

फिर ESRI-लोडर कार्यों आयात किसी भी मॉड्यूल प्रतिक्रिया में:

import * as esriLoader from 'esri-loader' 

तो आलसी लोड 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() 
    } 
}, 

फिर लोड और आर्कजीआईएस एपीआई (डोजो) मॉड्यूल जो नक्शा बनाने के लिए आवश्यक हैं:

_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-लोडर उपयोग करने का लाभ आप लोड और अपने पूरे आवेदन का निर्माण करने के डोजो लोडर और toolchain उपयोग करने के लिए की जरूरत नहीं है कि है। आप अपनी पसंद के रीक्ट टूलचैन (वेबपैक, आदि) का उपयोग कर सकते हैं।

यह blog post बताता है कि यह दृष्टिकोण कैसे काम करता है और esri-redux जैसे अनुप्रयोगों में उपयोग किए जाने वाले अन्य (समान) दृष्टिकोणों की तुलना करता है।

Answer 3

आवश्यक एएसआई मॉड्यूल लोड करने के लिए एएसआई-लोडर का उपयोग करें। यह एक घटक प्रतिपादन बेसमैप है।

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 (आसपास के दृश्यडिव) की ऊंचाई और चौड़ाई को सापेक्ष ({ऊंचाई: '100%', चौड़ाई: '100%'}) देता हूं, तो नक्शा प्रस्तुत नहीं करता है । कोई विचार क्यों नहीं। इसे उत्तरदायी बनाने के लिए कोई सुझाव सराहना की जाएगी।