• 1. Esri西安办事处 彭剑 ArcGIS Server 开发之Flex实践 ——FlexViewer介绍
  • 2. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
  • 3. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
  • 4. 为什么推出FlexViewerArcGIS Server for Flex APIs很丰富,Flex也不错,但是… 一个标准的GIS客户端起码包括哪些功能? ArcGIS Server的地理处理服务怎么应用…?
  • 5. FlexViewerFlexViewer设计目标 FlexViewer的优点 高度可配置 开发简单 高内聚低耦合 高依赖注入
  • 6. FlexViewer的界面元素、地图的地址、功能模块的组合都是由一个config.xml来控制 Widget(功能模块)也是设计成一个良好的开发框架,开发简单、高度可配置——取决于开发者
  • 7. 配置文件说明Config.xml主要标签 menus Map Mapservice:type、alpha、visible… Extent(initialextent、fullextent):xmin、ymin、xmax、ymax basemap Livemap Navtool Widgets Widget Label Menu Config Links
  • 8. (本页无文本内容)
  • 9. Widget属于FlexViewer的模块 每个Widget包含一个业务逻辑 开发人员可以继承BaseWidget来扩展自定义功能
  • 10. Widget开发模式开发人员更加专注核心业务逻辑 开发过程简便继承IBaseWidget使用IWedgeTemplet布局封装业务逻辑加入到config编译运行开发过程com/esri/solutions/flexviewer/widgets/SearchWidget.swf
  • 11. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
  • 12. FlexViewer剖析IBaseWidget WidgetTemplet SiteContainer MapManager WidgetManager Appenvent
  • 13. (本页无文本内容)
  • 14. IBaseWidgetWidget基类,定义了基本属性:状态、地图和配置文件 和WidgetManager交互——管理每个Widget生命周期
  • 15. WidgetClassIBaseWidget的实现类 自定义的Widget必须继承的基类 WidgetManager会验证所有扩展了BaseWidget的MXML或AS类 扩展了BaseWidget的类可被编译为独立的SWF
  • 16. IWidgetTemplateIWidgetTemplate接口定义了WidgetTemplate和BaseWidget之间进行协作的方法
  • 17. WidgetTemplateWidget模板是UI组件,为Widget提供了基本的UI layout和行为 包括风格化的窗口面板(styled window panel),标题栏(title bar)以及自定义的图片按钮(custom image buttons) 使用模板可以使开发者专注于业务逻辑开发而且整个程序风格统一。 模板也可以定制,必须实现IWidgetTemplate WidgetTemplate id="wTemplate" widgetClosed="widgetClosedHandler(event)" widgetOpened="widgetOpenedHandler(event)">
  • 18. 模板不是必须的 也可以开发自定义的组件
  • 19. SiteContainerFlexViewer中的容器,管理所有的组件 负责事件的监听,分发——所有的全局事件都是从此进行分发 宿主——FlexViewer的管家
  • 20. Config相关类收集配置信息,根据配置设置页面布局或者读取业务资源 ConfiigData configManager 不仅读取全局的Config.xml、单个Widget也是通过它来读取 通过http方式读取
  • 21. (本页无文本内容)
  • 22. MapManagerMapManager类是地图有关对象的管理器 配置文件设置的图层、菜单等参数在这进行解析 定义了大量的事件,扩展起来非常方便——当然,你也可以自己定义事件再去扩展
  • 23. WidgetManager Widget管理器 WidgetManager管理着widget的生命周期 widget菜单点击事件添加监听,创建,加载widget
  • 24. Appenvent 定义全局事件ID
  • 25. InfoPopup弹出窗口:定义一些基本的动作,弹出内容的展现方式 BaseWidget定义了showInfoWindow方法,由MapManager来监听——widgetShowInfo 目前支持显示文字(分行显示)、图片(jpg、png、gif)、视频(Flv)——更多的元素支持需要扩展 只需要对Link进行解析加载即可
  • 26. (本页无文本内容)
  • 27. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
  • 28. 编写Widget使用WidgetTemplate模板 访问 Map 在Map上显示Widget数据 从Map接收数据 (点击, 画线, 等.) 在Widget中控制导航 开发无模板的 Widget 开发自定义Widget Template Widget 配置
  • 29. 使用WidgetTemplate
  • 30. 使用WidgetTemplate第一步: 将widget 加到config.xml 文件中 第二步: 保存文件并且编译工程 第三步: 运行Flex Viewer 应用程序mywidgets/MyFirstWidget.swf
  • 31. 第四步: 从菜单按钮点击My First Widget
  • 32. 访问MapFlex Viewer是以地图为中心的应用,程序初始化后widget就可以访问到map服务 BaseWidget类中定义了Map变量,Widget加载后,widget manger就会将当前活动map对象传递给widget对象 所有BaseWidget的派生类可以直接访问map对象
  • 33. 访问Mappublic class BaseWidget extends Module implements IBaseWidget { ………… public var configData:ConfigData; public var configXML:XML; public var map:Map; public function setMap(value:Map):void { map = value; }private function widgetMenuClicked(event:AppEvent):void { if (widgetTable.containsKey(id)) { } else { if (moduleTable.containsKey(url)) { widget.setMap(map); } } }
  • 34. 访问地图-示例
  • 35. 在Map上显示Widget数据Add Graphics Layer
  • 36. 在Map上显示Widget数据当Widget 打开/最小化时,显示/关闭 Graphics Layer …private function widgetClosedHandler(event:Event):void { graphicsLayer.visible = false; } private function widgetOpenedHandler(event:Event):void { graphicsLayer.visible = true; }
  • 37. 从Map接收数据 (点击、画线等)Widget可能需要接收来自Map的数据,如用户与Map交互操作产生的点、线、面数据 Widget模型通过内嵌的setMapAction函数接收数据private function activateTool():void { setMapAction(Draw.POINT, "Click Point", drawEnd); } private function drawEnd(event:DrawEvent):void { var geom:Geometry = event.geometry; var pt:MapPoint = geom as MapPoint Alert.show("Click location: " + pt.x + ", " + pt.y); }
  • 38. setMapAction(BaseWidget.as)public function setMapAction(action:String, status:String, callback:Function):void { var data:Object = { tool: action, status: status, handler: callback } SiteContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_ACTION, false, false, data)); }action: Draw.EXTENT Draw.MAPPOINT Draw.LINE Draw.POLYLINE Draw.POLYGON Draw.MULTIPOINT Draw.FREEHAND_POLYLINE Draw.FREEHAND_POLYGON Status:控制条上显示的状态信息 callback:画操作完成后Map Manager调用的操作
  • 39. 在Widget中控制导航可能需要在widget中控制地图的导航,如关闭widget时关闭graphics图层显示并且使地图处于Pan模式
  • 40. 在Widget中控制导航setMapNavigation(BaseWidget.as) public function setMapNavigation(navMethod:String, status:String):void { var data:Object = { tool: navMethod, status: status } SiteContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_NAVIGATION, false, false, data)); }navMethod:Navigation.PAN Navigation.ZOOM_IN Navigation.ZOOM_OUT SiteContainer.NAVIGATION_ZOOM_FULL SiteContainer.NAVIGATION_ZOOM_PREVIOUS SiteContainer.NAVIGATION_ZOOM_NEXT status:控制条上显示的状态信息
  • 41. 开发无模板的widget模板不是必须的,如显示一个时钟
  • 42. 开发自定义Widget Template自定义widget Template必须实现iwidgetTemplate接口,即实现接口中的setTitle, setIcon 和 setState函数
  • 43.
  • 44.
  • 45. Widget内容配置每个widget可以有自己的配置文件 配置文件的位置在config.xml中指定 Widget Manager将widget配置文件的url传递给BaseWidget,BaseWidget加载并解析xml配置文件,保存为一个configXML变量(一个XML类型的AS变量) Widget加载完后可以直接访问configXML变量 relative/urlpath/MyNewWidget.swf
  • 46. Widget配置文件示例 http://localhost/ArcGIS/rest/services/Geometry/GeometryServer 32618 千米 Square Meters Square Kilometers Square Feet Square Miles Acres Hectares Polution Sources http://localhost/ArcGIS/rest/services/ps/MapServer/0 RegionCode='[value]' PSName,PSCode,RegionCode
  • 47. FlexViewer介绍 FlewViewer解析 Widget开发示例 常见问题及解决思路大纲
  • 48. 如何与业务系统结合FlexViewer是很好,但仅仅是纯GIS应用,业务系统是一个复杂的系统:以数据为导向,GIS只是其中的一小部分——有时候还那么可有可无 FlexViewer如何迎合业务系统,嵌入到其他系统里面?怎么和其他的业务接口通信?——其实,这是Flex层面的问题 FlexViewer能否实现在线编辑——GIS RIA开发都要面对的问题 按权限加载地图——大数据量下的业务过滤
  • 49. 结合几种方式WebService Http Remote Object(BlazeDS) JavaScript
  • 50. 在线编辑9.3.1之前——八仙过海 WFS WebService GP Services 10问世后 FeatureService:应对之前Server API的弊端
  • 51. 按权限加载图层ArcEngine的方法运用在Web端 传统做法: 通过权限取得数据 通过数据获取图形范围 图形过滤 表面上是个在Web上进行图形过滤的问题,实际上取决于数据的完整性 解决方案:LayerDefinition
  • 52. FlexViewer后续 ArcGIS Viewer beta 基于ArcGIS Server for Flex 2.0(ArcGIS 10) 秉承FlexViewer的开发模式 集成的编辑功能 更多的主界面风格 萝卜青菜各有所爱
  • 53. 谢谢