环境要求:
安装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>