打造精彩紛呈的WebGIS應(yīng)用-ArcGISAPIforFlex篇課件

打造精彩紛呈的WebGIS應(yīng)用

-ArcGISAPIforFlex篇Esri中國信息技術(shù)有限公司韓興剛ArcGISAPIforFlex簡介精彩應(yīng)用展示ArcGISViewerforFlex總結(jié)主要內(nèi)容ArcGISAPIforFlex簡介用戶界面美觀用戶體驗好一個字：炫！開發(fā)者語法似曾相識前后端整合性強跨平臺、跨瀏覽器開發(fā)周期短為什么選擇Flex？QueryGeoprocessingGeometryServicesEditEct.GIS地圖應(yīng)用的組成MapsLayersGraphicsTaskRestAPIFlexAPI的角色WebBrowserMobileAirArcGISServer(s)APIMapsEditingQueryingGeoprocessing.etc20123.0ArcGIS10.1ArcGISAPIforFlex歷史201120102.0ArcGIS10

FeatureLayer–WebeditSelectionetc.

GeometryService–DistanceBufferProjectetc.

NetworkAnalyst–ClosestfacilityRoutingServicearea1.0

Maps–Dynamic

Cached(tiled)

Graphcis–AttributesGeometryPop-upwindow

Tasks–QueryingFindingIdentifyingGeoprocessing20092008ArcGIS9.3FlexAPI的功能More?SOEBaseTaskMapsQueryNetWorkAnalystGeoprocessingEditGeometryTaskAPIAPI組織結(jié)構(gòu)layerstasksagsgeometrysymbolscomponentstoolsMap是API中最為核心的組件Event:MouseEvent&KeyboardEvent&NavigationComponents:Scalebar&Panarrows&ZoomsliderProperties:Collectionoflayers&Spatialreference&ScalelevelsFunctions:AddLayer&RemoveLayer

etc.常用對象——Map常用對象——LayerDynamicMapServiceLayerArcGISDynamicMapServiceLayerArcGISImageServiceLayerArcIMSMapServiceLayerTiledMapServiceLayerArcGISTiledMapServiceLayerGraphicsLayerFeatureLayerGPResultImageLayerKMLLayerMapImageLayerOpenStreetMapLayerWMSLayer常用對象——GraphicsGraphicsgeometrysymbolAExtent（矩形范圍）MapPoint（點）Multipoints（多點）Polygon（多邊形）Polyline（折線）InfoSymbolTextSymbolMarkerSymbolLineSymbolFillSymbolCompositeSymbol{“name”:”EsriChina”,“address”:”東直門南大街甲3號居然大廈19層”}常用對象——TasksQuery,Find(Search),IdentifyGeoprocessingServicesRoute,ServiceArea,ClosestFacilityGeometryServiceLocatorServiceFlexAPI幫助ArcGISAPIforFlex開發(fā)基礎(chǔ)搭建環(huán)境AdobeFlashBuilder4.6developmentenvironmentArcGISAPIforFlex3.0/cfusion/tdrc/index.cfm?product=flash_builder/en/communities/flex-api/ClientsFlashPlayerAIR/cn/flashplayer/ArcGISServerArcGISServerArcGISServer/en/help/flex-api/concepts/index.html#//017p0000000m000000#GUID-6D1447E1-BFE8-4FF3-A26E-9BCFDCFA9EABDemoComing!精彩應(yīng)用展示ArcGISServer10.1新特性統(tǒng)計動態(tài)圖層(Dynamiclayer)LayerorderLayerrenderer、Label(動態(tài)工作空間)Dynamicworkspace高級查詢(Query)網(wǎng)絡(luò)編輯當(dāng)一組數(shù)據(jù)中的一個記錄失敗，會回滾改組的變更Editortrackinginfeatureservices.高級打印取消GP執(zhí)行基于ContentNavigator的“多個”pop-upwindowIdentityManager用戶安全服務(wù)的登錄對KMLLayer和BingMap的增強變化類型總數(shù)newclasses62newevents33newproperties140newmethods128應(yīng)急新特性：:8038/App101/server101New/index.html客戶端熱點圖渲染：:8038/App1/2012UCDemo/UCdemo.html動態(tài)標(biāo)繪：:8038/App10/plot2/儀表盤：:8038/App10/dashboarddemo/index.html突發(fā)事件快速響應(yīng)系統(tǒng)：:8038/App10/emallTouch/物聯(lián)網(wǎng)-企業(yè)監(jiān)控:8038/App101/EnterpriseMonitor/EnterpriseMonitor.html地址(行業(yè)應(yīng)用)ArcGIS10.1forServer新特性新特性-服務(wù)端打印<esri:PrintTaskid="printTask" executeComplete="printTask_executeCompleteHandler(event)" fault="Alert.show(event.fault.faultString,'printerror')” getResultDataComplete="printTask_getResultDataCompleteHandler(event)" jobComplete="printTask_jobCompleteHandler(event)” showBusyCursor="true"url="{url}"/>printTask.execute(printParameters);private

function

printTask_executeCompleteHandler(event:PrintEvent):void{

var

paramValue:ParameterValue=event.executeResult.results[0];

var

dataFile:DataFile=paramValue.value

as

DataFile;

var

maprUrl:String=dataFile.url;

navigateToURL(new

URLRequest(mapUrl));}新特性-動態(tài)渲染<esri:ArcGISDynamicMapServiceLayerid="usaLayer"url="">

<esri:layerDrawingOptions>

<esri:LayerDrawingOptions

layerId="0">

<esri:SimpleRenderer>

<esri:SimpleMarkerSymbolcolor="0x9C968B“

size="5”style="circle">

<esri:SimpleLineSymbolalpha="0.2"color="0x8A4442"/>

</esri:SimpleMarkerSymbol>

</esri:SimpleRenderer>

<esri:labelClasses>

<esri:LabelClassid="labelExpressionOne” labelExpression="[POP2000]"

labelPlacement="esriServerPointLabelPlacementAboveCenter”

minScale="36112”where="POP2000<=61">

<esri:LabelOptionscolor="0xFF0000”fontSize="11” fontStyle="italic” fontWeight="bold”haloAlpha="1"

haloColor="0xDCDCDC”haloSize="2"/>

</esri:LabelClass>

</esri:labelClasses>

</esri:LayerDrawingOptions>

</esri:layerDrawingOptions></esri:ArcGISDynamicMapServiceLayer>protected

function

generateRendererTask_executeCompleteHandler(event:GenerateRendererEvent):void{

var

renderer:ClassBreaksRenderer=event.renderer

as

ClassBreaksRenderer;

createClassBreaksLegend(renderer);

var

layerDrawingOptions:LayerDrawingOptions=new

LayerDrawingOptions();

layerDrawingOptions.layerId=layerMapSource.mapLayerId;//stateslayeridintheservice

layerDrawingOptions.renderer=renderer;

demographicsLayer.alpha=0.7;

var

layerDrawingOptionsArr:Array=[layerDrawingOptions];

demographicsLayer.layerDrawingOptions=layerDrawingOptionsArr;}<esri:GenerateRendererTaskid="generateRendererTask"

executeComplete="generateRendererTask_executeCompleteHandler(event)" fault="esriService_faultHandler(event)"

url="{renderTaskURL}"/>客戶端動態(tài)渲染服務(wù)端渲染器新特性-查詢統(tǒng)計private

function

execStatistic():void{

var

query:Query=newQuery();

varstatsDef1:StatisticDefinition=new

StatisticDefinition(); statsDef1.onStatisticField="province_GDP_bn"; statsDef1.outStatisticFieldName="GDP"; statsDef1.statisticType=StatisticDefinition.TYPE_SUMMATION;

//......

varstatsDef4:StatisticDefinition=new

StatisticDefinition(); statsDef4.onStatisticField="NAME"; statsDef4.outStatisticFieldName="COUNT"; statsDef4.statisticType=StatisticDefinition.TYPE_COUNT;

query.groupByFieldsForStatistics=["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=new

ArrayCollection(attributes);}新特性-動態(tài)調(diào)序protected

function

layerOrderButton_clickHandler(event:MouseEvent):void{

var

dynamicLayerInfo:DynamicLayerInfo=dynamicLayerInfos[0];

dynamicLayerInfos.shift();

dynamicLayerInfos.push(dynamicLayerInfo);

usaLayer.dynamicLayerInfos=dynamicLayerInfos;

layerList.removeItemAt(0); layerList.addItem(dynamicLayerI);}新特性-編輯追蹤IdentityManager.instance.enabled=true;新特性-動態(tài)圖層DynamicWorkspaceMapServiceClientSendrelateAAFindReturn新特性-動態(tài)圖層<!--LakesLayerDynamicLayerInfo--><esri:DynamicLayerInfoid="lakesDynamicLayerInfo"layerId="9999"

defaultVisibility="true">

<esri:LayerDataSource>

<!--FeatureClasswithintheDynamicFileGDBWorkspace(followthelinkinthesampledescriptionformoreinformationondynamicworkspaces-->

<esri:TableDataSource

dataSourceName="Lakes"workspaceId="CensusFileGDBWorkspaceID"/>

</esri:LayerDataSource></esri:DynamicLayerInfo>var

dynamicLayerInfos:Array=censusLayer.createDynamicLayerInfosFromLayerInfos();dynamicLayerInfos.unshift(lakesDynamicLayerInfo);censusLayer.dynamicLayerInfos=dynamicLayerInfos;物聯(lián)網(wǎng)-企業(yè)監(jiān)控系統(tǒng)客戶端熱點圖渲染客戶端熱地圖實現(xiàn)public

classHeatmapLayerextendsFeatureLayerUpdatePointsforeach(varg:Graphicinac){

if(super.map.extent.contains(g.geometry)){

const

sx:Number=((g.geometry

asMapPoint).x-super.map.extent.xmin)*facX;

const

sy:Number=mapH-((g.geometry

asMapPoint).y-super.map.extent.ymin)*facY;

m_x.push(sx);

m_y.push(sy);

}}drawHeatMapfor(vari:int=0;i<len;i++){ matrix2.tx=m_x[i]-_heatRadius; matrix2.ty=m_y[i]-_heatRadius;

m_bitmapDataLayer.draw(bitmapDataShape,matrix2,null,BlendMode.SCREEN);}//釋放bitmapDataShape的內(nèi)存bitmapDataShape.dispose();

//paletteMapleavessomeartifactsunlesswegetridoftheblackestcolorsm_bitmapDataLayer.threshold(m_bitmapDataLayer,m_bitmapDataLayer.rect,POINT,"<=",0x00000003,0x00000000,0x000000FF,true);

//Replacetheblackandbluewiththegradient.Blackerpixelswillgettheirnewcolorsfrom//thebeginningofthegradientArrayandbluerpixelswillgettheirnewcolorsfromtheend.m_bitmapDataLayer.paletteMap(m_bitmapDataLayer,m_bitmapDataLayer.rect,POINT,null,null,gradientArray,null);

//Thisblurfiltermakestheheatmaplooksquitesmooth.m_bitmapDataLayer.applyFilter(m_bitmapDataLayer,m_bitmapDataLayer.rect,POINT,m_blurFilter);儀表盤GIS應(yīng)用中涌現(xiàn)出對儀表盤的需求；成熟產(chǎn)品收費；開源產(chǎn)品不成熟；具體項目需要特殊體驗的儀表盤組件；儀表盤特點外觀可定制；高度可配置；可復(fù)用；滿足現(xiàn)實需求；免費提供給客戶使用；助力售前和銷售工作；汽車儀表盤<dashboard:EsriClassicGaugelabel="風(fēng)速(m/s)" backgroundColor="yellow"bigMarkNum="7" endAngle="{270}"labelFontColor="0xffff00" labelFontSize="20” longMarkSize="20"markColor="0xffffff" markNumPerBigMark="5” maxValue="80"midMarkSize="15"minValue="10" shortMarkSize="10” size="360"startAngle="{90}"value="{value}” valueFontColor="0xffff00"valueFontSize="24"/>溫度計儀表盤<dashboard:EsriTemperatureGauge

markNumPerBigMark="10" size="460"value="{value}" valueFontColor="0x00ff00" valueFontFamily="DS-Digital" valueFontSize="40"/>游標(biāo)儀表盤<dashboard:EsriCursorGaugelabel="實時" backgroundColor="blue" markLabelFontFamily="DS-Digital"

markLabelFontSize="24" maxValue="500"

minValue="0"size="460" value="{value}" valueFontColor="0xff0000"

valueFontFamily="DS-Digital" valueFontSize="36"/>倉儲儀表盤<dashboard:EsriStorageGauge size="460"value="{value}" valueFontColor="0xffff00" valueFontFamily="DS-Digital" valueFontSize="70"/>方形儀表盤<dashboard:EsriSquareGauge

label="PM2.5濃度"

bigMarkNum="6" labelFontColor="0xff0000" labelFontFamily="微軟雅黑" labelFontSize="40"

longMarkSize="40" markColor="0xffff00" markLabelFontColor="0xffff00" markLabelFontSize="30" maxValue="120"

midMarkSize="30" minValue="0"

shortMarkSize="20"

size="350"

value="{value}" valueFontFamily="DS-Digital" valueFontSize="60"/>動態(tài)標(biāo)繪標(biāo)繪自有功能標(biāo)繪的繪制標(biāo)繪的編輯標(biāo)繪的渲染標(biāo)繪的序列化和反序列化與ArcGISFlexAPI集成可實現(xiàn)的功能ArcGISFlexAPI實現(xiàn)的所有功能，比如保存到空間數(shù)據(jù)庫標(biāo)繪API功能標(biāo)繪API特點擴展自ArcGISFlexAPI與ArcGISFlexAPI無縫集成良好設(shè)計，易于擴展學(xué)習(xí)曲線平緩，方便使用集成ArcGISFlexAPI相關(guān)接口ArcGISFlexAPIPlotAPIDrawToolEditToolPlotDrawToolPlotEditToolGraphicGeometrySymbolArcGISSymbolPlotSymbolArcGISGeometryPlotGeometry標(biāo)繪API價值可復(fù)用滿足現(xiàn)實需求削弱競爭對手標(biāo)繪產(chǎn)品優(yōu)勢架構(gòu)設(shè)計及算法的參考價值為ArcGIS錦上添花標(biāo)繪代碼<s:Image

buttonMode="true"click="activatePlotDrawTool(PlotTypes.DOUBLE_ARROW)"

rollOut="rollOutHandler(event)"rollOver="rollOverHandler(event)" source="assets/images/double_arrow.png"toolTip="雙箭頭"

useHandCursor="true"/>private

function

activatePlotDrawTool(action:String):void{

plotEditTool.deactivate();

this.activePlot=null;

plotDrawTool.activate(action);}private

function

plotMouseClickHandler(event:MouseEvent):void{

if(this.lastActiveEdit=="moveEditControlPoints")

{

plotEditTool.activate(PlotEditTool.MOVE|PlotEditTool.SCALE_ROTATE,Graphic(event.currentTarget));

this.lastActiveEdit="moveScaleRotate";

}

else

{

plotEditTool.activate(PlotEditTool.MOVE|PlotEditTool.EDIT_CONTROL_POINTS,Graphic(event.currentTarget));

this.lastActiveEdit="moveEditControlPoints";

}

this.activePlot=Graphic(event.currentTarget);

EventBus.dispatchEvent(new

AppEvent(AppEvent.PLOT_SELECTED,this.activePlot));}