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