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

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

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢