Arcgis for flex 地图基本操作与基本数据查询(三)

 

环境要求：

         安装FLASH-BULID4.5 版本相对比较稳定

         Arcgis 10.0环境  需安装Arc desktop 和 Arcgis server

         需要搭建的图层的矢量数据，需要切片

一切准备就绪开始创建一个gis的RIA应用吧，

 

 

1.在FLEX-BUILD的开发环境下 新建FLEX 项目

项目名 ：DEMO

点击确定后在默认包下你会看到 DEMO.mxml。这个就是应用的主入口了

 

2.导入ags-lib包见附件，包的作用的ARCGIS提供的对FLEX操作的一些借口应用

  右键工程名-- 点击属性，选择 FLEX构建路径 -- 添加SWC，选择ags-lib包点击确定。

3.DEMO.mxml

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:esri="http://www.esri.com/2008/ags"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:nav="com.component.*"
			   pageTitle="arcgis for flex"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		
		
		<!-- Symbol for Find Result as Point -->
		<esri:SimpleMarkerSymbol id="smsFind"
								 alpha="0.9"
								 color="0xFFFF00"
								 size="11"
								 style="square">
			<esri:SimpleLineSymbol color="0x000000"/>
		</esri:SimpleMarkerSymbol>
		
		<!-- Symbol for Find Result as Polyline -->
		<esri:SimpleLineSymbol id="slsFind"
							   width="3"
							   alpha="0.9"
							   color="0xFFFF00"
							   style="solid"/>
		
		<!-- Symbol for Find Result as Polygon -->
		<esri:SimpleFillSymbol id="sfsFind"
							   alpha="0.7"
							   color="0xFFFF00"/>
		
		
		<!-- Find Task -->
		<esri:FindTask id="findTask"
					   executeComplete="findTask_executeCompleteHandler(event)"
					   url="http://localhost:8399/arcgis/rest/services/canada_new/MapServer"/>
		<!-- 查询参数：
			contains:是否接受模糊查找。 
			
			layerIds：查询图级。 
			
			searchFields：查询字段。 
			
			searchText：查询的字符串。 
			
			executeComplete：完成后触发 
		 -->
		<esri:FindParameters id="myFindParams"
							 contains="true" 
							 layerIds="[0,1,2]"
							 outSpatialReference="{geoMap.spatialReference}"
							 returnGeometry="true"
							 searchFields="[GEO_ID]"
							 searchText="{fText.text}"	 />
		
		<esri:NavigationTool id="navToolbar" map="{geoMap}"/>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		
		
	</fx:Declarations>
	
	
	<fx:Script>
		<![CDATA[
			
			import com.esri.ags.events.MapMouseEvent;
			import com.esri.ags.geometry.MapPoint;
			import com.esri.ags.utils.WebMercatorUtil;
			import com.esri.ags.Graphic;
			import com.esri.ags.events.FindEvent;
			import com.esri.ags.events.MapMouseEvent;
			import com.esri.ags.geometry.Geometry;
			import com.esri.ags.tasks.FindTask;
			import com.esri.ags.tools.NavigationTool;
			
			import mx.events.ListEvent;
			
			private function doFind():void
			{
				findTask.execute(myFindParams);
			}
			
			protected function findTask_executeCompleteHandler(event:FindEvent):void
			{
				myGraphicsLayer.clear();
				var graphic:Graphic;
				
				resultSummary.text = "Found " + event.findResults.length + " results.";
				
				var resultCount:int = event.findResults.length;
				for (var i:Number = 0; i < resultCount; i++)
				{
					graphic = event.findResults[i].feature;
					
					event.findResults[i].displayFieldName =   event.findResults[i].feature.attributes.GEO_ID;
					event.findResults[i].layerName = event.findResults[i].feature.attributes.NAME;
					
					
					graphic.toolTip = event.findResults[i].foundFieldName + ": " + event.findResults[i].value;
					
					switch (graphic.geometry.type)
					{
						case Geometry.MAPPOINT:
						{
							graphic.symbol = smsFind;
							break;
						}
						case Geometry.POLYLINE:
						{
							graphic.symbol = slsFind;
							break;
						}
						case Geometry.POLYGON:
						{
							graphic.symbol = sfsFind;
							break;
						}
					}
					myGraphicsLayer.add(graphic);
				}

				
			}
			
			//itemList 点击事件
			protected function dataGrid_itemClickHandler(event:ListEvent):void
			{
					var a:ListEvent =  event;
			}
			
			protected function geoMap_mapClickHandler(event:MapMouseEvent):void
			{
				var latlong:MapPoint = WebMercatorUtil.webMercatorToGeographic(event.mapPoint) as MapPoint;
				geoMap.infoWindow.label = "You clicked at "
					+ event.mapPoint.x.toFixed(1) + " / " + event.mapPoint.y.toFixed(1)
					+ "\nLat/Long is: " + latlong.y.toFixed(6)
					+ " / " + latlong.x.toFixed(6);
				geoMap.infoWindow.show(event.mapPoint); // "Show the click"
			}
			
		]]>
	</fx:Script>
	

	
	

	
	
		
	
	
	
	
	
	
	
	
	<mx:VDividedBox width="100%" height="100%" >
		<s:Label id="resultSummary" height="15"/>
		<esri:Map crosshairVisible="true" id="geoMap" width="100%" height="100%"  mapClick="geoMap_mapClickHandler(event)" >
			<esri:extent>
				<esri:Extent xmin="-123.22" ymin="31.12" xmax="-67.41" ymax="58.45">
					<esri:SpatialReference wkid="4326"/>	
				</esri:Extent>
			</esri:extent>
			<esri:ArcGISTiledMapServiceLayer url="http://localhost:8399/arcgis/rest/services/canada_new/MapServer" />
			<esri:GraphicsLayer id="myGraphicsLayer"/>
		</esri:Map>
		
		<mx:DataGrid id="dataGrid" width="100%" height="40%" dataProvider="{findTask.executeLastResult}" itemClick="dataGrid_itemClickHandler(event)">
			<mx:columns>
				<mx:DataGridColumn width="200" dataField="displayFieldName" headerText="图层ID"/>
				<mx:DataGridColumn dataField="layerName" headerText="名称"/>		
			</mx:columns>
		</mx:DataGrid>
		
	</mx:VDividedBox>

	<s:HGroup y="240">
		<nav:Buttons/> <!--导航栏组件-->	
	</s:HGroup>
	
	<s:BorderContainer width="100%" height="40"
					   backgroundColor="0xDDDDFF">
		<s:layout>
			<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
		</s:layout>
		<s:Label text="Search for names of States, Cities, and Rivers:"/>
		<s:TextInput id="fText"
					 enter="doFind()"
					 maxWidth="400"
					 text=""/>
		<s:Button click="doFind()" label="查询"/>
	</s:BorderContainer>
	
	
	
	
</s:Application>

 

在com.component中加入button的扩展组件ButtonControls.as

 

package com.component
{
	import com.esri.ags.Map;
	import com.esri.ags.tools.NavigationTool;
	
	import flash.events.MouseEvent;
	
	import mx.containers.DividedBox;
	import mx.controls.Alert;
	import mx.core.Application;
	import mx.core.FlexGlobals;
	import mx.events.FlexEvent;
	
	import spark.components.Button;

	public class ButtonControls extends DividedBox
	{
		
		public var fd:Button;
		public var sx:Button;
		public var yd:Button;
		public var geoMap:Map;
		
		public var navToolbar:NavigationTool;
		
		public function ButtonControls()
		{
			geoMap = FlexGlobals.topLevelApplication.geoMap;//获取全局的geoMAP
			navToolbar = FlexGlobals.topLevelApplication.navToolbar;//地图浏览控件
			super();
			addEventListener(FlexEvent.CREATION_COMPLETE,registerEvent);//构造方法，当组件构建完成之后 会执行creationCompleteHandler方法
		}
		//注册事件
		protected function registerEvent(event:FlexEvent):void{
			fd.addEventListener(MouseEvent.CLICK,function():void{
				navToolbar.activate(NavigationTool.ZOOM_IN);
			});
			
			sx.addEventListener(MouseEvent.CLICK,function():void{
				navToolbar.activate(NavigationTool.ZOOM_OUT);
			});
			
			yd.addEventListener(MouseEvent.CLICK,function():void{
				navToolbar.activate(NavigationTool.PAN);
			});
			
		}
		
	}
}

 

以及Button的布局页面 Buttons.mxml

 

<?xml version="1.0" encoding="utf-8"?>
<ss:ButtonControls xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx" 
		  xmlns:ss="com.component.*">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
		<s:Button label="放大" id="fd">
			
		</s:Button>
		
		<s:Button label="缩小" id="sx">
			
		</s:Button>
		
		<s:Button label="移动" id="yd">
			
		</s:Button>
	
</ss:ButtonControls>