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

基于两篇react+arcgis的文章介绍，相信大家也能体会两者的开发区别了。在“初探篇”中作者也讲述了自己的选择，故废话不多说，本篇带大家体验在@arcgis/webpack-plugin环境下，使用react+redux+react-router+less+es6+webpack 开发（故在看本篇文章之前，请先了解相关知识）。

效果图如下：

文件目录

• 主要开发文件目录

assets 存放静态资源
components 组件
configure 全局配置、路由、redux
layout 页面
redux 合并reducer
styles 样式文件
utils 公共方法
views 页面入口

代码开发

创建项目路由
src/configure/router/index.js

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

初始化地图页面
src/view/Map/index.js

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

初始化地图组件、加载天地图
src/components/Map/DMap.js

 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 
 }
……
……

更多的详情见：GIS之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波