1、打造精彩纷呈的WebGIS应用 -ArcGIS API for Flex篇,Esri中国信息技术有限公司 韩兴刚,ArcGIS API for Flex简介 精彩应用展示 ArcGIS Viewer for Flex 总结,主要内容,ArcGIS API for Flex简介,用户 界面美观 用户体验好 一个字：炫！开发者 语法似曾相识 前后端整合性强 跨平台、跨浏览器 开发周期短,为什么选择Flex？,Query GeoprocessingGeometry Services Edit Ect.,GIS地图应用的组成,Maps,Layers,Graphics,Task,Flex API的角色,
2、ArcGIS Server(s),API,MapsEditingQueryingGeoprocessing.etc,ArcGIS API for Flex历史,Flex API的功能,More ?,Base Task,API组织结构,Map是API中最为核心的组件 Event: MouseEvent & KeyboardEvent & Navigation Components: Scale bar & Pan arrows & Zoomslider Properties: Collection of layers & Spatial reference & Scale levels Func
3、tions:AddLayer & RemoveLayer etc.,常用对象 Map,常用对象 Layer,DynamicMapServiceLayer ArcGISDynamicMapServiceLayer ArcGISImageServiceLayer ArcIMSMapServiceLayer TiledMapServiceLayer ArcGISTiledMapServiceLayer GraphicsLayer FeatureLayer GPResultImageLayer KMLLayer MapImageLayer OpenStreetMapLayer WMSLayer,常用对
4、象 Graphics,Graphics,geometry,symbol,Extent（矩形范围）MapPoint（点）Multipoints（多点）Polygon（多边形）Polyline（折线）,InfoSymbol TextSymbol MarkerSymbol LineSymbol FillSymbol CompositeSymbol,“name”:”Esri China”, “address”:”东直门南大街甲3号居然大厦19层”,常用对象 Tasks,Query, Find (Search), Identify Geoprocessing Services Route, Servic
5、e Area, Closest Facility Geometry Service Locator Service,Flex API帮助,ArcGIS API for Flex开发基础,搭建环境,Demo Coming!,精彩应用展示,ArcGIS Server 10.1,新特性统计,动态图层(Dynamic layer) Layer order Layer renderer、Label (动态工作空间) Dynamic workspace 高级查询(Query) 网络编辑 当一组数据中的一个记录失败，会回滚改组的变更 Editor tracking in feature services.
6、高级打印 取消GP执行 基于ContentNavigator的“多个”pop-up window IdentityManager用户安全服务的登录 对KML Layer和Bing Map的增强,应急,新特性：http:/:8038/App101/server101New/index.html 客户端热点图渲染：http:/:8038/App1/2012UCDemo/UCdemo.html 动态标绘：http:/:8038/App10/plot2/ 仪表盘：:8038/App10/dashboarddemo/index.html 突发事件快速响应系统：http:/:8038/App10/emal
7、lTouch/ 物联网-企业监控 http:/:8038/App101/EnterpriseMonitor/EnterpriseMonitor.html,地址(行业应用),ArcGIS 10.1 for Server新特性,新特性-服务端打印,printTask.execute(printParameters);,private function printTask_executeCompleteHandler(event:PrintEvent):void var paramValue:ParameterValue = event.executeResult.results0;var data
8、File:DataFile = paramValue.value as DataFile;var maprUrl:String= dataFile.url;navigateToURL(new URLRequest(mapUrl); ,新特性-动态渲染,protected function generateRendererTask_executeCompleteHandler(event:GenerateRendererEvent):void var renderer:ClassBreaksRenderer = event.renderer as ClassBreaksRenderer;crea
9、teClassBreaksLegend(renderer);var layerDrawingOptions:LayerDrawingOptions = new LayerDrawingOptions();layerDrawingOptions.layerId = layerMapSource.mapLayerId; /states layer id in the servicelayerDrawingOptions.renderer = renderer;demographicsLayer.alpha = 0.7;var layerDrawingOptionsArr:Array = layer
10、DrawingOptions ;demographicsLayer.layerDrawingOptions = layerDrawingOptionsArr; ,客户端动态渲染,服务端渲染器,新特性-查询统计,private function execStatistic():voidvar query:Query = new Query();var statsDef1:StatisticDefinition = new StatisticDefinition();statsDef1.onStatisticField = “province_GDP_bn“;statsDef1.outStatis
11、ticFieldName = “GDP“;statsDef1.statisticType = StatisticDefinition.TYPE_SUMMATION;/ var statsDef4:StatisticDefinition = new StatisticDefinition();statsDef4.onStatisticField = “NAME“;statsDef4.outStatisticFieldName = “COUNT“;statsDef4.statisticType = StatisticDefinition.TYPE_COUNT; query.groupByField
12、sForStatistics = “Zone“ ;query.outStatistics = statsDef1,statsDef2,statsDef3,statsDef4; queryTask.execute(query); ,protected function queryTask_executeCompleteHandler(event:QueryEvent):void var fields:Array = event.featureSet.fields;var attributes:Array = event.featureSet.attributes;dg.dataProvider
13、= new ArrayCollection(attributes); ,新特性-动态调序,protected function layerOrderButton_clickHandler(event:MouseEvent):void var dynamicLayerInfo:DynamicLayerInfo = dynamicLayerInfos0;dynamicLayerInfos.shift();dynamicLayerInfos.push(dynamicLayerInfo);usaLayer.dynamicLayerInfos = dynamicLayerInfos;layerList.
14、removeItemAt(0); layerList.addItem(dynamicLayerInfo.name); ,新特性-编辑追踪,IdentityManager.instance.enabled = true;,新特性-动态图层,Dynamic Workspace,Map Service,Client,Send,relate,Find,Return,新特性-动态图层,var dynamicLayerInfos:Array = censusLayer.createDynamicLayerInfosFromLayerInfos();dynamicLayerInfos.unshift(lak
15、esDynamicLayerInfo); censusLayer.dynamicLayerInfos = dynamicLayerInfos;,物联网-企业监控系统,客户端热点图渲染,客户端热地图实现,public class HeatmapLayer extends FeatureLayer,UpdatePoints for each (var g:Graphic in ac) if (super.map.extent.contains(g.geometry) const sx:Number = (g.geometry as MapPoint).x - super.map.extent.xm
16、in ) * facX;const sy:Number = mapH - (g.geometry as MapPoint).y - super.map.extent.ymin ) * facY;m_x.push(sx);m_y.push(sy); ,drawHeatMap for (var i:int = 0; i len; i+) matrix2.tx = m_xi - _heatRadius;matrix2.ty = m_yi - _heatRadius;m_bitmapDataLayer.draw(bitmapDataShape, matrix2, null, BlendMode.SCR
17、EEN); /释放bitmapDataShape的内存 bitmapDataShape.dispose();/ paletteMap leaves some artifacts unless we get rid of the blackest colors m_bitmapDataLayer.threshold(m_bitmapDataLayer, m_bitmapDataLayer.rect, POINT, “=“, 0x00000003, 0x00000000, 0x000000FF, true);/ Replace the black and blue with the gradien
18、t. Blacker pixels will get their new colors from / the beginning of the gradientArray and bluer pixels will get their new colors from the end. m_bitmapDataLayer.paletteMap(m_bitmapDataLayer, m_bitmapDataLayer.rect, POINT, null, null, gradientArray, null);/ This blur filter makes the heat map looks q
19、uite smooth. m_bitmapDataLayer.applyFilter(m_bitmapDataLayer, m_bitmapDataLayer.rect, POINT, m_blurFilter);,仪表盘,GIS应用中涌现出对仪表盘的需求； 成熟产品收费； 开源产品不成熟； 具体项目需要特殊体验的仪表盘组件；,仪表盘特点,外观可定制； 高度可配置；,可复用； 满足现实需求； 免费提供给客户使用； 助力售前和销售工作；,汽车仪表盘,温度计仪表盘,游标仪表盘,仓储仪表盘,方形仪表盘,动态标绘,标绘,自有功能 标绘的绘制 标绘的编辑 标绘的渲染 标绘的序列化和反序列化与ArcGIS
20、 Flex API集成可实现的功能 ArcGIS Flex API实现的所有功能，比如保存到空间数据库,标绘API功能,标绘API特点,扩展自ArcGIS Flex API 与ArcGIS Flex API无缝集成 良好设计，易于扩展 学习曲线平缓，方便使用 集成ArcGIS Flex API相关接口,ArcGIS Flex API,Plot API,DrawTool,EditTool,PlotDrawTool,PlotEditTool,Graphic,Geometry,Symbol,ArcGIS Symbol,Plot Symbol,ArcGIS Geometry,Plot Geometry
21、,标绘API价值,可复用 满足现实需求 削弱竞争对手标绘产品优势 架构设计及算法的参考价值 为ArcGIS锦上添花,标绘代码,private function activatePlotDrawTool(action:String):void plotEditTool.deactivate();this.activePlot = null;plotDrawTool.activate(action); ,private function plotMouseClickHandler(event:MouseEvent):void if (this.lastActiveEdit = “moveEditC
22、ontrolPoints“)plotEditTool.activate(PlotEditTool.MOVE | PlotEditTool.SCALE_ROTATE, Graphic(event.currentTarget);this.lastActiveEdit=“moveScaleRotate“;elseplotEditTool.activate(PlotEditTool.MOVE | PlotEditTool.EDIT_CONTROL_POINTS, Graphic(event.currentTarget);this.lastActiveEdit=“moveEditControlPoint
23、s“;this.activePlot = Graphic(event.currentTarget);EventBus.dispatchEvent(new AppEvent(AppEvent.PLOT_SELECTED, this.activePlot); ,Dynamic rendering,DynamicMapServiceLayer,GET,Before ,Dynamic rendering,DynamicMapServiceLayer,Now !,Dynamic Labeling,Label,TextSymbol,Graphics,Labeling,DynamicMapServiceLa
24、yer,A,A,A,A,A,Labeling,Before ,Now !,Dynamic Workspace,Dynamic Workspace,Map Service,Client,Send,relate,Find,Return,高级打印,缺点： 显示效果不好 不能打印标题等地图要素 不能指定比例尺和范围,以前的你，是否也用过截屏打印的方法？,用AO？,太复杂！,更多新功能,地址： http:/ Viewer for Flex,典型应用-突发事件快速响应系统,ArcGIS Viewer for Flex概览,“Open” widget (from Widget tray),Overview Map widget,Widgets汇总,Viewer管理员 config.xml,框架结构,1、Server10.1新特性 2、客户端热点图渲染 3、动态标绘 4、仪表盘组件 5、Flex Viewer,总结,ArcGIS在线体验中心,http:/,140290115,更多资源,http:/ flex-viewer/index.html,http:/ Online中国http:/ ArcGIS API for Flexhttp:/ ArcGIS Serverhttp:/ ArcGIS Viewer for Flexhttp:/ 新浪微博： QQ群：,谢谢,
