arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图（附源码下载）

import React from ‘react‘; 
import {HashRouter, Route, Switch} from ‘react-router-dom‘; 
import Header from "Src/layout/Header"; 
import Footer from "Src/layout/Footer"; 
import MapModule from ‘Views/Map/‘; 
import NoFound from ‘Views/NoFound/NpFound‘; 
import {PrivateRoute} from "Shared/AuthorizeFilter"; 
 
export default class RouteMap extends React.Component { 
    render() { 
 return ( 
            <HashRouter basename="/"> 
                <div className="container_outer" id={‘container_outer‘}> 
                    <Header/> 
                    <div className={‘container_inner‘} id={‘container_inner‘}> 
                        <div className={‘container_inner_right‘} id={‘container_inner_right‘}> 
                            <div className={‘container_inner_main‘} id={‘container_inner_main‘}> 
                                {/* 页面 */} 
                                <Switch> 
                                    <PrivateRoute exact path="/" component={MapModule} /> 
                                    <PrivateRoute component={NoFound}/> 
                                </Switch> 
                            </div> 
                            <div className={‘container_inner_footer‘} id={‘container_inner_footer‘}> 
                                {/* 版权 */} 
                                <Footer /> 
                            </div> 
                        </div> 
                    </div> 
                    {/*<Footer/>*/} 
                </div> 
            </HashRouter> 
        ); 
    } 
} 

import React from ‘react‘; 
import PureRenderMixin from ‘react-addons-pure-render-mixin‘; 
import {connect} from ‘react-redux‘; 
/**地图样式**/ 
import ‘Views/Map/map.less‘; 
//地图相关组件 
import DciMap from ‘Components/Map/dciMap‘; 
 
 
/***地图制图模块核心组件***/ 
class MapModule extends React.Component { 
 constructor(props, context) { 
 super(props, context); 
 this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); 
    } 
 
    render() { 
 const options = { 
 dojoConfig: { 
 has: { 
 "esri-promise-compatibility": 1 
                } 
            }, 
        }; 
 const mapId = ‘dciMainMap‘; 
 return ( 
 <div className="page_maps g_clear_fix" id={‘page_maps‘}> 
 <div className="map_canvas" id="map_canvas" style={{}}> 
 <div className="container_map"> 
 <DciMap key={0} mapId={mapId} options={options}/> 
 </div> 
 </div> 
 </div> 
        ) 
    } 
} 

 const { mapId, initMap } = this.props; 
 const tileInfo = new TileInfo({ 
 "dpi": 96, 
 "format": "image/png", 
 "compressionQuality": 0, 
 "spatialReference": new SpatialReference({ 
 "wkid": 4490 
            }), 
 "rows": 256, 
 "cols": 256, 
 "origin": { 
 "x": -180, 
 "y": 90 
 }
……
……