Как использовать карту Esri Arcgis в проекте ReactJs?

Question

Я пытаюсь использовать карту Эсри. Чтобы включить карту в моем проекте, вот что я нашел:

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

Но нет никакого ESRI пакета папку или НПМ. Поэтому я здесь смущен. Как esri импортируется в проект?

Answer 1

Вам не нужно импортировать esri api, как вы это делаете для ReactJS. Поскольку файл реакции окончательно скомпилируется в файл 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

Answer 2

Альтернативный метод выше, является одним продемонстрировано в esri-react-router-example. Это приложение использует библиотеку с именем esri-loader для ленивой загрузки API ArcGIS только в тех компонентах/маршрутах, где это необходимо. Пример:

Во-первых, установить ESRI-погрузчик libary:

npm install esri-loader --save 

затем импортировать функции ESRI-погрузчик в любом реагируют модуль:

import * as esriLoader from 'esri-loader' 

Затем ленивым нагрузки на 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() 
    } 
}, 

Затем загрузите модули ArcGIS API (Dojo), необходимые для создания карты:

_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-погрузчиком над подход, продемонстрированный выше, что вы не должны использовать загрузчик Dojo и набор инструментов для загрузки и строить все приложение. Вы можете использовать инструментальную цепочку React по вашему выбору (webpack и т. Д.).

Этот blog post объясняет, как работает этот подход, и сравнивает его с другими (аналогичными) подходами, используемыми в таких приложениях, как esri-redux.

Answer 3

Используйте 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 или если я даю высоту и ширину внешнего div (окружающий viewDiv) как относительный ({height: '100%', width: '100%'}), карта не отображает , Не знаю, почему. Любые предложения, чтобы сделать его отзывчивым, были бы оценены.