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之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波