Geomap-基于React组件化的一张图系统开发框架.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,Geomap,基于,React,组件化的一张图系统开发框架,易智瑞（中国）平台实施部 李虎,Geomap,简介,01,Geomap,背景,提高团队开发效率，协作能力和代码质量,将现代的前端技术框架与,ArcGIS,JavaScirpt,API,结合,高可用、标准化、可扩展的前端,Web,GIS,应用开发框架,Geomap,是什么,Geomap,是一套基于现代前端技术搭建的二三维一体化开发框架；借助于,Babel,提供的转译能力，支持使用,ES6+/TypeScript/Flow,等等高级的前端语言来开发应用；同时，依托于,Node.js,环境下成熟的前端开发生态，支持,Dev,环境下的热加载、前端代理、接口,Mock,等等辅助特性。,Geomap,采用,React,技术栈来开发视图层，并严格遵循,React,所倡导的组件化思想来组织编码；借助于当下流行的,MV*,设计模式，充分实现了数据和视图分离的架构。,Geomap,基于,ArcGIS JSAPI 4.x,开发，同时未来会考虑在剥离,JSAPI,相关的工具函数的基础上同时适配,JSAPI 3.x,和,4.x,版本。,Geomap,成功案例,年内基于,geomap,开发框架，已经实施的项目包括：,-,易智瑞深度学习之智能国土监察平台,-,横沥岛尖城市开发数字化平台（中交二航局）,-,智慧化全息测绘成果展示系统（上海测绘院）,-,北京大学地质系统,-,三维规划行业解决方案,-,华为智慧园区,GIS,仪表盘,Geomap,功能特色,02,风格统一的地图操作工具,Geomap,基于,React,封装了一系列的工具类微件，相比原生,ArcGIS JSAPI,中提供了更加丰富的选择，同时，所有的微件样式保持统一，能轻松在项目中批量修改达到系统风格的统一,。,基础地图操作工,具,（,Zoom,，指北针，鼠标坐标，底图库）,地图微,件,（,图层列表，测量，书签，注记，行政区划导航）,可复用的,GIS,应用功能,Geomap,提供了组件化封装的一系列,GIS,常用的应用功能,。,地图标注,/,地图纠错,三级行政区划定位,天地图服务,基于,Portal,的登录,/,认证,Geomap,实现了基于,ArcGIS Portal,的用户登录以及基于,OAuth2,的,ClientID,验证。,动态的图层服务树,Geomap,实现了基于,Portal Item,的动态图层服务树，以及各图层的开关,GP,分析工具,Geomap,实现了基于,ArcGIS JSAPI 4.x,调用,ArcGIS GP,分析,Rest,接口的功能,，,并以密度分析功能为例，实现了完整的,GP,分析应用交互流程。,Geomap,已实现功能清单,地图工具,基础地图操作工具（,Zoom,，指北针，鼠标坐标，底图库）,地图微件（图层列表，测量，书签，注记，行政区划导航）,Portal,验证（用户名登录，,clientId,验证）,图层树及开关,GP,分析,天地图,公交换乘,路径规划,POI,Geomap,关键技术,/,关键特色,03,Geomap,技术迭代,第一版：,(2017,年,海图中心项目,),dva+roadhog+react,-,React,组件与,JSAPI,微件体系无法互通数据,第二版：,(,南平电子地图,),dva+roadhog+react+redux,-,借助于,Redux,中间件实现交互，但缺乏对,IE 11,的支持,第三版：,dva+umi+react+redux+esri-loader,支持,IE11,及,Chrome/Firefox,最新版本,Geomap,技术体系,Geomap,是一套完全基于现代前端技术栈打造的高效的开发框架，底层采用了,npm,作为包管理器，使用,webpack,来打包代码。,包管理：,npm/yarn,开发语言：,ES6+,（同时支持,TypeScript,）,UI,技术栈：,React+Redux+Redux-Saga+Ant Design,Ajax,：,whatwg-fetch,样式：全局,CSS Module,（支持,Less,）,打包工具：,webpack,工具：,esri-loader,、,lodash,浏览器兼容性：,IE 11,、,Chrome/Firefox,近,2,年发布的版本,Geomap,技术架构,基于,webpack,的开发与部署,Webpack,是目前前端开发中应用最广泛的打包工具。其核心特点是借助于构建在,webpack,之上的针对不同文件类型的,loader,，将各种同类文件进行合并，简化应用部署时的工作,。,geomap,通过提供,dev,和,build,两种不同的运行脚本分别提供高效的开发环境和编译部署服务。,基于,npm,的依赖包管理,Geomap,借助于,Npm,来进行依赖包的管理，安装，更新和发布。,基于,Babel,的多语言能力支持,Geomap,基于最新的,ES6,语言标准来开发，使用,Babel,在,webpack,上的工具链,babel-loader,来实现代码转译。同时，,Geomap,配置了,awesome-typescript-loader,来支持使用,TypeScript,开发，也配置了,flowtype-loader,来直接开发者使用,Flow,语言开发应用。值得一提的是，开发者甚至可以在一个工程中同时使用以上多种语言来开发应用程序。,高效的,CSS,样式书写方式,Geomap,还预先,配置了,less-loader,，,sass-loader,来支持开发者使用习惯的,Less,或者,Sass,语言编写样式表。,基于,React,技术栈的,Ui,组件化,Geomap,使用,React,作为,UI,层框架，选用了蚂蚁金服开发的,Ant Design,作为通用控件库。,UI,层代码完全遵循,React,组件化的设计思想开发，可以支撑不同项目之间组件源代码级别的重用。,以,Redex,为核心的状态管理数据流,Geomap,采用了基于,Redux,再封装的,dva,数据流框架来管理应用的状态，通过引入,Redux,的思想以及相应的实践，,geomap,实现了系统级别的数据和视图分离架构。,浏览器兼容性支持,尽管,Geomap,引入了,babel,来针对,ES6,的新语法做转译，但是,babel,输出的,JS,文件仍然需要浏览器具备一些基础的实现。当前前端开发中主流的解决方案是通过按需引入特定的,polyfill,来平滑浏览器之间的差异。,Geomap,默认支持,IE 11,，通过在打包时引入了以下的一些底层补丁包来作为应用代码的补充：,Es6-promise,Ie11-polyfill,Es6-shim,Babel-runtime,Geomap,开发指南,04,开箱即用的前端开发体验,尽管,geomap,构建在一套复杂的前端技术体系之上，然而，对于,geomap,的使用者而言，提供了开箱即用的开发体验。开发者在本地准备,geomap,开发环境仅仅需要以下几个简单的步骤：,从,Git,克隆,geomap,的源代码到本地,在命令行中切换至本地源代码目录,cd,通过,npm,安装项目依赖工具包,npm install/yarn,启动本地开发服务器开发、调试代码，,npm start/yarn start,当,需要部署应用程序的代码时，更是只需要简单的一步即可完成：,运行代码编译命令，,npm run build,拷贝,dist,目录下的文件至,tomcat/iis,服务器并修改,JSAPI,地址等等应用程序配置文件,Geomap,工程目录,Geomap,前端路由,默认情况下，,geomap,项目配置为一个单页面的,SPA,应用。,pages,目录下的所有,j(t)sx,文件会映射到不同的,URL,二级路径下。,由于,geomap,缺省采用了基于,BrowserRouter,的路由形式，因此，对于,src/pages/pagea/index.js,，映射的访问地址为,pagea,除此之外，也可以通过配置，将路由修改为,HashRouter,的形式；针对上述路径下的文件，,HashRouter,映射的地址为,#/pagea,HTML,模板,geomap,为项目中的所有路由页面套用了一套相同的页面模板，该模板基于,ejs,编写；模板的路径位于,src/pages/document.ejs,对于模板文件来说，由于,React,的根节点会默认,mount,到,id,为,root,的,div,上，因此，模板文件必须包含下面的这一行代码：,Geomap,页面,Geomap,目前提供了丰富的系统级别的可展示页面，包括地图首页，功能介绍，,API,接口介绍，开发规范以及案例展示。,Geomap,组件,React,核心设计思想就是通过组件化来分离前端不同模块之间的耦合度。,Geomap,在开发中严格遵循了,React,组件化的设计思路，以达到最大程度的重用前端模块代码。在页面布局容器，,ArcGIS,微件，,Popup Content,，导航栏，工具栏等等的设计中，都基于组件化的思路进行了封装，以便在不同的项目中重用。,React,提供了,3,种不同的组件定义的形式，包括：,ES6 Class(,推荐,)-class MyComponent extends React.Component,Stateless function(,推荐,)-const MyComponent=()=;,React.createClass-React.createClass(.);,Home,组件代码示例,Redux Store,geomap,使用了,redux,来集中管理整个应用的状态。由于,React,采用了与,DOM,类似的树型结构，使用,redux,使得,React,组件树中每一级的组件都可以直接与,Redux Store,通信，从而避免了应用状态在树节点上的多层传递，简化代码的结构。,从应用开发的角度，,geomap,同时也对,redux,的,store,进行了合理的切分，一方面让整个程序的代码显得更加合理；同时也避免单个,store,过大而造成,diff,过程中不必要的性能损失。,Redux Store,agsmap,search,user,组件时序图,Redux,中间件,Redux,除了集中式的数据状态管理，另一大优势就在于强大的中间件能力；,众所周知，,JavaScript,是一门单线程的同步执行脚本语言。然而，在前后端交互时，基于,xhr,的请求提供了异步的,API,。前端开发中面对的一大困境就是如何有效的组织,Ajax,异步代码，避免回调函数地狱,(callback hell),。对于,Redux,集中式的状态管理来说，同样如此。,针对,Redux,的异步状态管理，有很多不同的中间件方案。,geomap,选择了,redux-saga,作为针对,ajax,的异步中间件方案。,Redux-saga,redux-saga 是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。,简单来说，一个,saga,就是一个普通的,JavaScript,对象，但是我们将每个,saga,想象成一个单独的线程，在这个线程中独立处理每个异步操作的副作用。,redux-saga 使用了 ES6 的 Generator 功能，让异步的流程更易于读取，写入和测试。,得益于,dva,对,saga,接口的二次封装，我们可以用更加简单直观的,JavaScript,对象形式来书写,saga,的副作用。,geomap modals,geomap,将,redux,的,store,抽象为一个,modal,，每个,modal,都具有相同的结构。,state-Redux Store,subscriptions-React-Router,路由监听,effects-Redux sagas(,异步操作,),reducers-Redux reducer(,同步操作,),geomap,异步操作时序图,Redux Middleware for ArcGIS JSAPI,由于,React,虚拟,DOM,的特性存在，我们无法在常规的,DOM,操作层面让,React,组件与,JSAPI,中的微件或其他交互进行数据互通，同样需要借助于,Redux,中间件的能力。,在,Geomap,中使用,JSAPI,微件,React,为,JSAPI,内置的微件提供承载的容器，从而直接在应用中使用,JSAPI,微件；包括微件的,UI,和逻辑，,React,侧不提供任何业务逻辑，仅仅在需要时提供容器的样式。（适用于图层列表，测量，图例等功能完整，交互复杂的微件）,在,Geomap,中开发微件,UI,尽管在,Geomap,中直接使用,JSAPI,封装的微件在某种程度上简化了开发者的工作，然而这种模式也存在一定的不足；主要是无法在系统层面保持微件样式与系统风格的统一，对于微件的,UX,操作缺少定制化能力。相比较而言，我们更推荐采用,React,开发微件的,UI,，同时重用,JSAPI,微件的,ViewModel,层逻辑；得益于,JSAPI 4.x,优秀的,MVVM,架构，开发者可以只需要专注在,UI,交互层的开发上，无需重复开发通用的微件业务逻辑。,Geomap,采用这种方式开发了众多的微件，这些微件提供了更好的,UI,交互体验，以及统一的系统级样式。包括：,Zoom,，,Home,，,GoTo,，,Compass,，,Measure,，,BasemapGallery,，,Measure3D,，,Overview,，,NavigationToggle,，,FullScreen,，,MousePoint,等等。给予开发者即拿即用的能力。,Home,微件代码示例,Geomap,中的,GP,分析,ArcGIS JSAPI 4x,一直以来缺少像,3x,版本中那样直接提供的用于常用,GP,分析工具的微件。因此，在基于,4.x,开发的应用中如果要引入分析的功能，开发者需要自行开发从,UI,，交互，到数据组织，,Rest API,请求流程等等一系列工作。,Geomap,开发了基于密度分析的,GP,分析功能，包括分析工具参数面板，,Portal,对象选择器，,Rest,请求工作流，为开发者提供了很好的指引。,Geomap,中的密度分析,GP,密度分析,GP Rest,接口请求流程,1.,获取当前用户的组织信息,2.,检查用户输入的,output,名称是否可用,3.,调用,createService,接口在用户目录下创建一个空要素服务,4.,调用,GP Rest,服务的submitJob接口提交分析参数,5.,检查和更新,Job,相关的参数到已创建的,Portal Item,6.,循环检查,Job,状态直至不再显示esriJobExecuting,7.,调用,Portal Item,的addResources接口更新任务执行后的结果,8.,调用,GP Rest,服务的resultLayer接口关联执行后的结果服务地址,9.,更新,Portal Item,中,Job,关联的信息,10.,调用,Portal Item,的,refresh,接口刷新结果服务,Geomap,编码指引,geomap-codestyle,upgrade eslint-config-geomap-latest,Geomap,愿景,05,geomap-utils,尽管,geomap,基于,react,技术栈打造，但出于以下的考虑，我们仍然将,geomap,中的工具类函数独立的剥离出来，并打造了一个单独的项目,geomap-utils,借助于,geomap,多个项目的积累，将可以形成一套可公用的工具类库；未来，不仅仅为,geomap,项目，同时也应该能为基于其他技术栈打造的项目所使用，比如,dojo,，,jquery,或其他类型的项目,通过在,geomap,项目中合理的抽象和分离，使得,geomap,成为一个与,JSAPI,版本无关的应用，当需要时可以在最大化重用,UI,的基础上，实现底层,JSAPI,版本甚至,3.x,和,4.x,的无缝切换,geomap-utils,geomap-utils,目前已经剥离并作为一个单独的项目来开发；该项目基于,ES6,编写，使用,babel,转译；同时采用了前端工具类库常用的,rollup,来打包，该项目将输出,4,种不同版本的类库,geomap-utils.js-,常规的,UMD,风格，支持,require,，,script,标签,geomap-utils.min.js-,经过,uglify,压缩的,UMD,风格代码,geomap-utils.es6.js-ES6,模块风格的代码，用于未来发布到,NPM,geomap-mon.js-CommonJS,风格的代码，用于,Node,环境,geomap-utils,开发路线,geomap-utils,定位于官方,JSAPI,的补充，将弥补,JSAPI 4.x,版本中部分常用功能的缺失，未来将逐步收录以下的功能,JSAPI,各种帮助类和辅助函数,JSAPI,中扩展的,Layer,类型（,ClusterLayer,、,EChartLayer,，,etc,）,JSAPI,中的事件代理总线,EventBus,多源异构数据之间的转换（,XmlDom,、,JSON,、,YAML,）,ArcGIS REST API,geomap-widgets,ArcGIS JSAPI 4.x,提供了一套优秀的微件开发架构，同时，社区以及项目中积累了一些基于,Widget Framework,开发的优秀的微件。,geomap,将提供一套微件的集合，并通过,CDN,的形式集中提供。,geomap,项目将不会打包这部分微件代码，,而是通过配置,dojoConfig,的,packages,的方式指向,geomap-widgets,所在的目录。同时，在,webpack,中为,geomap-widgets,配置,external,，允许在编码时仍然通过,import,的方式来引用。,import SampleWidget from geomap-widgets/SampleWidget;,geomap-template-*,UMI,自,2.3,版本开始提供了一种全新的方式来开发,React,页面，称之为,“,区块,”,。我认为这是我心目中最接近,geomap,未来项目开发方式的一种技术。,UMI“,区块,”,本质是一个,UMI,页面的模板，然而借助于,umi-plugin-block-dev,插件提供的能力，我们可以单独开发、调试和发布这个页面模板。,随着,geomap,应对不同项目中的不同需求，我们可以为常见的,Web GIS,应用提供基于,geomap,开发的页面布局模板，例如：,geomap-template-summaryview,geomap-template-dashboard,.,目前我们在,git,中的各种分支，未来可以转化为不同的模板，也就是,“,区块,”,geomap,的,未来,