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之家小专栏

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