基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了。在「初探篇」中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使用react+redux+react-router+less+es6+webpack 开发(故在看本篇文章之前,请先了解相关知识)。
效果图如下:
assets 存放静态资源components 组件configure 全局配置、路由、redux layout 页面redux 合并reducerstyles 样式文件utils 公共方法views 页面入口
assets 存放静态资源
layout 页面
创建项目路由 src/configure/router/index.js
创建项目路由
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 } …… ……
更多的详情见:
GIS之家店铺:GIS之家