PROSAGA码农传奇-时空索引-如何在React-Redux项目中使用Esri Arcgis Maps？

<div class =“post-text”itemprop =“text”>
   <pre>
    <code>
      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>)

}
  }

</code>
  </pre>
</DIV>