开始:
1.启动Flex Builder3新建工程以及引入
ArcGIS API for Flex library的开发包
。
2.新建QueryTest.mxml页面,这里显示的地图采用Esri提供的在线的NPS_Physical_World_2D的地图比较的漂亮,但是Tiled图没有图层以及字段等数据没有办法进行查询定位,所以在Tiled图的基础上在叠加一个DynamicMap图层就是上面发布的usa的数据,我们对usa的数据进行查询然后结果显示在NPS_Physical_World_2D的地图上面。由于是2个Layer的叠加就需要esri:ArcGISTiledMapServiceLayer和ArcGISDynamicMapServiceLayer,具体的显示代码如下:
<mx:Canvas width="434" height="370" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="-140" verticalCenter="34">
<esri:Extent id="myExtent" xmin="-127.968857954995" ymin="25.5778580720472" xmax="-65.0742781827045" ymax="51.2983251993735" />
<esri:Map id="myMap" extent="{myExtent}">
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer" />
<esri:ArcGISDynamicMapServiceLayer id="myMapServiceLayer" url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" creationComplete="loadMapLayer(event)">
<esri:visibleLayers>
<mx:ArrayCollection>
</mx:ArrayCollection>
</esri:visibleLayers>
</esri:ArcGISDynamicMapServiceLayer>
<esri:GraphicsLayer id="myGraphicsLayer" symbolFunction="{mySymbolFunction}" />
</esri:Map>
</mx:Canvas>
3.上面的代码中为Map控件设置了以为USA范围的Extent,为ArcGISDynamicMapServiceLayer设置了creationComplete事件就是用来执行loadMapLayer(event)把地图图层名称以及index添加到ComboBox来选择用。
loadMapLayer(event) 方法代码如下:
//获取地图图层名称和index到ComboBox上
private function loadMapLayer(event:Event):void
{
//获取图层信息数组
var layerInfos:Array;
layerInfos=myMapServiceLayer.layerInfos;
var layers:Array = new Array();
//遍历图层信息数组然后把图层的名称和index值添加到新的数组中
for(var i:int=0;i<layerInfos.length;i++)
{
layers.push({label:layerInfos[i].name ,data:i});
}
//给ComboBox设定数据源
layerList.dataProvider=layers;
}
ComboBox的显示代码:
<mx:ComboBox id="layerList" x="10" y="10" width="117"></mx:ComboBox>
4.上面还为
ArcGISDynamicMapServiceLayer设置了
可视图层<esri:visibleLayers><mx:ArrayCollection></mx:ArrayCollection></esri:visibleLayers>,这样设置的为空就是不想用来显示只是用来数据查询用。
5.还添加了GraphicsLayer对象用来进行高亮显示用,并且为它设置了symbolFunction="{mySymbolFunction}"这样是在 mySymbolFunction方法中对点、线、面的显示样式进行设置,代码如啊:
private function mySymbolFunction(graphic:Graphic):Symbol
{
var result:Symbol;
//根据元素的类型进行显示样式的设定
switch(graphic.geometry.type)
{
case Geometry.GEOMETRY_POINT:
{
result=sms;
break;
}
case Geometry.GEOMETRY_POLYLINE:
{
result=sls;
break;
}
case Geometry.GEOMETRY_POLYGON:
{
result=sfs;
break;
}
}
return result;
}
对上面的sms、sls、sfs等定义:
<esri:SimpleLineSymbol id="sls" style="solid" color="0x0000FF" width="2" alpha="0.6"/>
<esri:SimpleMarkerSymbol id="sms" style="circle" color="0x0000FF" alpha="0.6" size="15"/>
<esri:SimpleFillSymbol id="sfs" color="0x0000FF" alpha="0.6"/>
6.接下来在页面上添加一个TextInput、Button、mx:DataGrid分别为查询语句输入框、查询按钮、查询结果显示表,具体显示代码如下:
<mx:Canvas width="434" height="48" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="-139" verticalCenter="-183">
<mx:ComboBox id="layerList" x="10" y="10" width="117"></mx:ComboBox>
<mx:TextInput id="qText" x="135" y="10" width="223" enter="doQuery()" text="STATE_NAME like '%a%'"/>
<mx:Button x="366" y="10" label="查询" fontSize="12" height="22" click="doQuery()"/>
</mx:Canvas>
<mx:DataGrid id="resultTable" change="clickHandler(event)" height="426" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="179" verticalCenter="6" width="188">
</mx:DataGrid>
7.上面的代码中为TextInput添加了enter事件用来实现回车后进行调用doQuery()方法进行查询,为Button添加了click事件点击后调用doQuery()方法进行查询。8.要进行Query还需要esri:QueryTask控件,在页面上添加如下显示代码:
<esri:QueryTask id="queryTask" >
<esri:Query id="query" />
</esri:QueryTask>
9.doQuery()方法代码如下,具体说明看注解:
private function doQuery():void
{
//清除原来的高亮显示
myGraphicsLayer.clear();
//设置queryTask的url,就是设置要查询的图层
queryTask.url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer/"+layerList.value;
//queryTask.query.text=qText.text;
//queryTask.query.where="STATE_NAME like '%"+qText.text+"%'";
//设置查询语句
queryTask.query.where=qText.text;
//查询结果是否返回Geometry
queryTask.query.returnGeometry=true;
queryTask.query.spatialRelationship="esriSpatialRelEnvelopeIntersects";
//设置要查询的字段
var fields:Array=new Array();
fields.push("OBJECTID");
fields.push("STATE_NAME");
fields.push("POP2000");
queryTask.query.outFields=fields;
//进行查询成功调用onResult方法,错误失败调用onFault
queryTask.execute(query,new AsyncResponder(onResult,onFault));
}
//查询成功活进行高亮显示已经数据Grid显示
private function onResult(featureSet:FeatureSet,token:Object = null):void
{
var resultlist:Array=new Array();
for each(var griphic:Graphic in featureSet.features)
{
myGraphicsLayer.add(griphic);
resultlist.push({"ID":griphic.attributes.OBJECTID,"STATE_NAME":griphic.attributes.STATE_NAME})
}
//Grid设置数据源进行查询结果显示
resultTable.dataProvider=resultlist;
}
//查询失败提示
private function onFault(info:Object, token:Object = null ):void
{
//Alert.show(info.toString());
Alert.show("输入的查询语句不正确!");
}
10.更加查询语句查询到结果显示到Grid中后还需要实现一个点击Grid的行进行地图定位的功能,上面添加Grid的时候已经为它添加了change事件就是点击某一行后调用clickHandler(event)方法进行定位功能,代码说明如下:
//Grid点击事件进行对点击对象进行定位居中显示
public function clickHandler(event:ListEvent):void
{
//获取点击行的id
var idstr:String=event.itemRenderer.data.ID;
//设置查询的图层
queryTask.url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer/"+layerList.value;
//是否返回Geometry
queryTask.query.returnGeometry=true;
queryTask.query.spatialRelationship="esriSpatialRelEnvelopeIntersects";
//查询语句
queryTask.query.where="OBJECTID="+idstr;
//执行查询
queryTask.execute(query,new AsyncResponder(onResult2,onFault2));
}
private function onResult2(featureSet:FeatureSet,token:Object = null):void
{
var resultlist:Array=new Array();
for each(var griphic:Graphic in featureSet.features)
{
myGraphicsLayer.add(griphic);
var geo:Geometry= griphic.geometry;
var ex:Extent=new Extent();
switch(geo.type)
{
//点对象
case Geometry.GEOMETRY_POINT:
{
//转成MapPoint
var pnt :MapPoint = geo as MapPoint ;
//定位中心
myMap.centerAt(pnt);
break;
}
//线对象
case Geometry.GEOMETRY_POLYLINE:
{
//转成Polyline
var pline:Polyline=geo as Polyline;
//设置地图视图范围
ex=pline.extent;
myMap.extent=ex;
break;
}
//面对象
case Geometry.GEOMETRY_POLYGON:
{
//转成Polygon
var pgon:Polygon=geo as Polygon;
//设置地图视图范围
ex=pgon.extent;
myMap.extent=ex;
break;
}
}
break;
}
}
private function onFault2(info:Object, token:Object = null ):void
{
Alert.show("出差啦!");
}
11.这样就完成了所有功能的编写可以运行测试效果。