Wie verwendet man Esri Arcgis Maps im React-Redux-Projekt?

Question

Ich versuche, Esri Karte zu verwenden. Um die Karte in mein Projekt aufzunehmen, bin ich verwirrt, wie man ESRI in ein Projekt importiert? Was sind die Abhängigkeiten?

Ich habe einen Beispielcode geschrieben. Aber es funktioniert nicht, und die Karte wird nicht geladen

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

    } 
    }