assets 存放靜態資源

components 組件configure 全局配置、路由、redux

layout 頁面

redux 合併reducerstyles 樣式文件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" stylex={{}}>
<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
}
……
……

更多的詳情見：

arcgis api 4.x for js 結合 react 入門開發系列react全家桶實現載入天地圖（附源碼下載） － 小專欄?

xiaozhuanlan.com

GIS之家店鋪：GIS之家