WebGIS经典例子 - 图文

开始：

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，具体的显示代码如下： 1 2

xmax=”-65.0742781827045″ ymax=”51.2983251993735″ />

borderColor=”#D6D7D8″ horizontalCenter=”-140″ verticalCenter=”34″> 3 4/> 5

url=”http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer” creationComplete=”loadMapLayer(event)”> 6

url=”http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer”

7 8 9

10 11

id=”myGraphicsLayer”

symbolFunction=”{mySymbolFunction}” /> 12 13

3.上面的代码中为Map控件设置了以为USA范围的Extent，为ArcGISDynamicMapServiceLayer

设置了

creationComplete

事件就是用来执行

loadMapLayer(event)把地图图层名称以及index添加到ComboBox来选择用。 loadMapLayer(event)方法代码如下：

1//获取地图图层名称和index到ComboBox上

2 private function loadMapLayer(event:Event):void 3 {

4 //获取图层信息数组 5 var layerInfos:Array;

6 layerInfos=myMapServiceLayer.layerInfos; 7 var layers:Array = new Array();

8 //遍历图层信息数组然后把图层的名称和index值添加到新的数组中 9 for(var i:int=0;i

11 layers.push({label:layerInfos[i].name ,data:i}); 12 }

13 //给ComboBox设定数据源 14 layerList.dataProvider=layers; 15 }

ComboBox的显示代码：

1

4.上面还为

ArcGISDynamicMapServiceLayer

设置了可视图层

，这样设置的为空就是不想用来显示只是用来数据查询用。

5.还添加了GraphicsLayer对象用来进行高亮显示用，并且为它设置了symbolFunction=”{mySymbolFunction}”这样是在mySymbolFunction方法中对点、线、面的显示样式进行设置，代码如啊：

1private function mySymbolFunction(graphic:Graphic):Symbol 2

{

3 var result:Symbol;

4 //根据元素的类型进行显示样式的设定

5 switch(graphic.geometry.type) 6

{

7 case Geometry.GEOMETRY_POINT: 8

{

9 result=sms; 10 break; 11 }

12 case Geometry.GEOMETRY_POLYLINE: 13

{

14 result=sls; 15 break; 16 }

17 case Geometry.GEOMETRY_POLYGON: 18

{

19 result=sfs; 20 break; 21 } 22 }

23 return result; 24 }

对上面的sms、sls、sfs等定义：

1 2

3

6.接下来在页面上添加一个TextInput、Button、mx:DataGrid分别为查询语句输入框、查询按钮、查询结果显示表，具体显示代码如下： 1

borderColor=”#D6D7D8″ horizontalCenter=”-139″ verticalCenter=”-183″>

2 34

click=”doQuery()”/> 5 6

id=”resultTable”

change=”clickHandler(event)”

height=”426″

borderStyle=”solid” borderThickness=”3″ borderColor=”#D6D7D8″ horizontalCenter=”179″

verticalCenter=”6″ width=”188″> 7

7.上面的代码中为TextInput添加了enter事件用来实现回车后进行调用doQuery()方法进行查询，为Button添加了click事件点击后调用doQuery()方法进行查询。 8.要进行Query还需要esri:QueryTask控件，在页面上添加如下显示代码： 1 2 3

9.doQuery()方法代码如下，具体说明看注解： 1private function doQuery():void 2

{

3 //清除原来的高亮显示 4 myGraphicsLayer.clear();

5 //设置queryTask的url,就是设置要查询的图层 6

queryTask.url=“http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer/“+layerList.value; 7 //queryTask.query.text=qText.text;

8 //queryTask.query.where=”STATE_NAME like ?%”+qText.text+”%?”; 9 //设置查询语句

10 queryTask.query.where=qText.text; 11 //查询结果是否返回Geometry 12 queryTask.query.returnGeometry=true;

13 queryTask.query.spatialRelationship=“esriSpatialRelEnvelopeIntersects“; 14 //设置要查询的字段 15 var fields:Array=new Array(); 16 fields.push(“OBJECTID“); 17 fields.push(“STATE_NAME“); 18 fields.push(“POP2000“);

19 queryTask.query.outFields=fields;

20 //进行查询成功调用onResult方法，错误失败调用onFault 21 queryTask.execute(query,new AsyncResponder(onResult,onFault)); 22 } 23

24 //查询成功活进行高亮显示已经数据Grid显示

25 private function onResult(featureSet:FeatureSet,token:Object = null):void 26

{

27 var resultlist:Array=new Array();

28 for each(var griphic:Graphic in featureSet.features)

29 {

30 myGraphicsLayer.add(griphic); 31

resultlist.push(

{“ID“:griphic.attributes.OBJECTID,“STATE_NAME“:griphic.attributes.STATE_NAME}) 32 }

33 //Grid设置数据源进行查询结果显示 34 resultTable.dataProvider=resultlist; 35 } 36

37 //查询失败提示

38 private function onFault(info:Object, token:Object = null ):void 39

{

40 //Alert.show(info.toString());

41 Alert.show(“输入的查询语句不正确！“); 42 }

10.更加查询语句查询到结果显示到Grid中后还需要实现一个点击Grid的行进行地图定位的功能，上面添加Grid的时候已经为它添加了change事件就是点击某一行后调用clickHandler(event)方法进行定位功能，代码说明如下： 1//Grid点击事件进行对点击对象进行定位居中显示

2 public function clickHandler(event:ListEvent):void 3

{

4 //获取点击行的id

5 var idstr:String=event.itemRenderer.data.ID; 6 //设置查询的图层 7

queryTask.url=“http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer/“+layerList.value; 8 //是否返回Geometry

9 queryTask.query.returnGeometry=true;

10 queryTask.query.spatialRelationship=“esriSpatialRelEnvelopeIntersects“; 11 //查询语句

12 queryTask.query.where=“OBJECTID=“+idstr; 13 //执行查询

14 queryTask.execute(query,new AsyncResponder(onResult2,onFault2)); 15 } 16

17 private function onResult2(featureSet:FeatureSet,token:Object = null):void 18

{