React-Redux Project에서 Esri Arcgis Maps를 사용하는 방법?

Question

Esri지도를 사용하려고합니다. 내 프로젝트에지도를 포함 시키려면 esri를 프로젝트로 가져 오는 방법을 혼동합니다. 의존성은 무엇입니까?

나는 샘플 코드를 작성했다. 하지만 작동하지 않고지도가로드되지 않습니다.

import * as esriLoader from 'esri-loader' 
import React from 'react' 
class esriMap extends React.Component { 

constructor(props) { 
    super(props); 
    this._createMap = this._createMap.bind(this) 
} 
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.loadScript((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 = 'f2ea5d874dad427294641d2d45097c0e' 
     // 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 
       }) 
      }) 
    }) 
} 

render() { 
    return (<div ref = "map" style={{height: 'calc(100% - 66px)'}}></div>) 
} 
} 

export default esriMap; 

Answer 1

import React, { 
    Component 
} from 'react' 
import * as esriLoader from 'esri-loader' 
require('./contentMap.css') 

export default class ContentMap extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     data: { 
     "type": "FeatureCollection", 
     "features": [{ 
      "type": "Feature", 
      "geometry": { 
       "type": "Point", 
       "coordinates": [-37.82, 2.28] 
      } 
     }, { 
      "type": "Feature", 
      "geometry": { 
       "type": "Point", 
       "coordinates": [-34.82, -1.36] 
      } 
     }, { 
      "type": "Feature", 
      "geometry": { 
       "type": "Point", 
       "coordinates": [-34.31, 0.67] 
      } 
     }, { 
      "type": "Feature", 
      "geometry": { 
       "type": "Point", 
       "coordinates": [-40.19, -0.10] 
      } 
     }] 
     } 
    }; 
    } 


    componentDidMount() { 
     esriLoader.loadModules(["esri/Map", "esri/views/SceneView", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/geometry/Point" , "esri/layers/FeatureLayer"]) 
     .then(([Map, MapView, GraphicsLayer, Graphic, Point , FeatureLayer]) => { 
      var map = new Map({ 
      basemap: "topo", 
      }); 
      var view = new MapView({ 
      map: map, 
      container: "viewDiv", 
      center: [37.82, -2.28], 
      zoom: 12, 

      }); 

      var graphicsLayer = new GraphicsLayer(); 
      map.add(graphicsLayer); 


      var markerSymbol = { 
      type: "simple-marker", // autocasts as new SimpleMarkerSymbol() 
      color: [255, 0, 0], 
      outline: { // autocasts as new SimpleLineSymbol() 
       color: [255, 255, 255], 
       width: 2 
      } 
      }; 

      this.state.data.features.forEach(function(feature) { 
       var pt = new Point(feature.geometry.coordinates, map.spatialReference); 
       graphicsLayer.add(new Graphic(pt, markerSymbol)); 
      }) 
      }) 

      .catch(err => { 
      // handle any errors 
      console.error(err); 
      }); 
     } 

    render() { 
     return (<div id = 'viewDiv' style = {{height: '700px'}}></div>) 

    } 
    }