基于两篇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之家小专栏

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

arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图(附源码下载)的更多相关文章

  1. arcgis api 3.x for js 实现克里金插值渲染图不依赖 GP 服务(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  2. arcgis api 3.x for js 入门开发系列十四最近设施点路径分析(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  3. 【JavaScript】使用纯JS实现多张图片的懒加载(附源码)

    一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...

  4. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. arcgis api 3.x for js 解决 textSymbol 文本换行显示(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. 【 js 模块加载 】【源码学习】深入学习模块化加载(node.js 模块源码)

    文章提纲: 第一部分:介绍模块规范及之间区别 第二部分:以 node.js 实现模块化规范 源码,深入学习. 一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须 ...

  7. arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)

    你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...

  8. arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 3.x for js 入门开发系列二十二地图模态层(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. javascript基础修炼(12)——手把手教你造一个简易的require.js

    目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...

  2. Git - Git分支管理策略

    前言 通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的c ...

  3. Java操作数据库——在JDBC里使用事务

    Java操作数据库——在JDBC里使用事务 摘要:本文主要学习了如何在JDBC里使用事务. 使用Connection的事务控制方法 当JDBC程序向数据库获得一个Connection对象时,默认情况下 ...

  4. JavaScript中的循环和闭包

    看一段比较经典的错误代码: // 希望获取页面上的所有div,在点击的时输出对应的编号 var oDom = document.querySelectorAll("div"); / ...

  5. Java 网络编程初探

    Java 网络编程 网络编程 网络编程:进行服务器端与客户端编程的开发操作实现. java.net:网络操作包 B/S结构: 浏览器/服务器模式(Browser/Server) 不在开发客户端代码 开 ...

  6. swift字符串截取实例

    截取字符串 let deviceStr = deviceInfoLabel.attributedText?.string var device  = "" if let len : ...

  7. OPENGL 入门

    检测设备支持版本,判断是否支持opengl 2.0版本 初始化设置OpenGLES2.0 实现接口GLSurfaceView.Renderer 渲染 绘制图形 1.检测设备支持版本,判断是否支持ope ...

  8. [20191106]善用column格式化输出.txt

    [20191106]善用column格式化输出.txt # man columnDESCRIPTION     The column utility formats its input into mu ...

  9. Linux iotop工具简介

    iotop的简介: iotop是一款开源.免费的用来监控磁盘I/O使用状况的类似top命令的工具,iotop可以监控进程的I/O信息.它是Python语言编写的,与iostat工具比较,iostat是 ...

  10. 零售行业下MongoDB在产品目录系统、库存系统、个性推荐系统中的应用【转载】

    Retail Reference Architecture Part 1: Building a Flexible, Searchable, Low-Latency Product Catalog P ...