ArcGIS API for Flex实现Query查询定位中心功能

xuqiang · 发表于 2010-6-21 13:10

目的：
1.ArcGIS API for Flex实现Query查询定位中心功能，进行属性查图的功能，选择图层然后输入查询语句进行查询把查到的地理元素高亮显示同时在右边的Grid中显示查到的数据，然后点击Grid中的数据进行对该条数据进行定位中心的显示。
准备工作：
1.在ArcGIS.Server.9.3发布一个叫usa的Map Service，并且把这个Service启动起来。
2.采用Esri在线数据http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer
完成后的效果图：

开始：

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

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

--> 1

<esri:Extent id="myExtent" xmin="-127.968857954995" ymin="25.5778580720472" xmax="-65.0742781827045" ymax="51.2983251993735" />

 2

    <mx:Canvas width="434" height="370" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="-140" verticalCenter="34">

 3

    <esri:Map id="myMap" extent="{myExtent}">

 4

        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer" />

 5

        <esri:ArcGISDynamicMapServiceLayer id="myMapServiceLayer"  url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" creationComplete="loadMapLayer(event)">

 6

            <esri:visibleLayers>

 7

            <mx:ArrayCollection>

 8

            </mx:ArrayCollection>

 9

            </esri:visibleLayers>

10

        </esri:ArcGISDynamicMapServiceLayer>

11

        <esri:GraphicsLayer id="myGraphicsLayer"  symbolFunction="{mySymbolFunction}" />

12

    </esri:Map>

13

    </mx:Canvas>

3.上面的代码中为Map控件设置了以为USA范围的Extent，为ArcGISDynamicMapServiceLayer设置了creationComplete事件就是用来执行loadMapLayer(event)把地图图层名称以及index添加到ComboBox来选择用。

loadMapLayer(event)方法代码如下：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

--> 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<layerInfos.length;i++)

10

                {

11

                    layers.push({label:layerInfos.name ,data:i}); 

12

                }

13

                //给ComboBox设定数据源

14

                layerList.dataProvider=layers;

15

            }

ComboBox的显示代码：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

-->1

<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方法中对点、线、面的显示样式进行设置，代码如啊：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

--> 1

private 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等定义：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

-->1

<esri:SimpleLineSymbol id="sls" style="solid" color="0x0000FF" width="2" alpha="0.6"/>

2

    <esri:SimpleMarkerSymbol id="sms" style="circle" color="0x0000FF" alpha="0.6" size="15"/>

3

    <esri:SimpleFillSymbol id="sfs" color="0x0000FF" alpha="0.6"/>

6.接下来在页面上添加一个TextInput、Button、mx

ataGrid分别为查询语句输入框、查询按钮、查询结果显示表，具体显示代码如下：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

-->1

<mx:Canvas width="434" height="48" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="-139" verticalCenter="-183">

2

        <mx:ComboBox id="layerList" x="10" y="10" width="117"></mx:ComboBox>

3

        <mx:TextInput id="qText" x="135" y="10" width="223" enter="doQuery()" text="STATE_NAME like '%a%'"/>

4

        <mx:Button x="366" y="10" label="查询" fontSize="12" height="22" click="doQuery()"/>

5

    </mx:Canvas>

6

<mx:DataGrid  id="resultTable" change="clickHandler(event)"  height="426" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="179" verticalCenter="6" width="188">

7

    </mx:DataGrid>

7.上面的代码中为TextInput添加了enter事件用来实现回车后进行调用doQuery()方法进行查询，为Button添加了click事件点击后调用doQuery()方法进行查询。

8.要进行Query还需要esri

ueryTask控件，在页面上添加如下显示代码：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

-->1

<esri:QueryTask id="queryTask" >

2

    <esri:Query id="query" />

3

    </esri:QueryTask>

9.doQuery()方法代码如下，具体说明看注解：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

--> 1

private 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)方法进行定位功能，代码说明如下：

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

--> 1

//Grid点击事件进行对点击对象进行定位居中显示

 2

            public function clickHandler(event

istEvent):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

{

19

                var resultlist:Array=new Array();

20

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

21

{

22

                    myGraphicsLayer.add(griphic);

23

                    var geo:Geometry= griphic.geometry;

24

                    var ex:Extent=new Extent();

25

                    switch(geo.type)

26

{

27

                        //点对象

28

case Geometry.GEOMETRY_POINT:

29

{

30

                            //转成MapPoint

31

var pnt :MapPoint = geo as MapPoint ;

32

                            //定位中心

33

                            myMap.centerAt(pnt);

34

                            break;

35

                        }

36

                        //线对象

37

case Geometry.GEOMETRY_POLYLINE:

38

{

39

                            //转成Polyline

40

var pline

olyline=geo as&#160

olyline;

41

                            //设置地图视图范围

42

                            ex=pline.extent;

43

                            myMap.extent=ex;

44

                            break;

45

                        }

46

                        //面对象

47

case Geometry.GEOMETRY_POLYGON:

48

{

49

                            //转成Polygon

50

var pgon:Polygon=geo as Polygon;

51

                            //设置地图视图范围

52

                            ex=pgon.extent;

53

                            myMap.extent=ex;

54

                            break;

55

                        }

56

                    }

57

58

                    break;

59

                }

60

61

            }

62

63

            private function onFault2(info:Object, token:Object = null ):void

64

{

65

                Alert.show("出差啦！");

66

            }

yczcc · 发表于 2010-6-25 11:17

[s:131] [s:131]

YWTA · 发表于 2013-7-25 18:11

好的资料，谢谢分享！！！

小狼牙 · 发表于 2013-7-25 18:53

很不错啊，学习一次啊

x0300670513 · 发表于 2022-10-24 12:25

多谢分享！

sskcdn · 发表于 2022-12-2 17:53

谢谢楼主分享

[二次开发] ArcGIS API for Flex实现Query查询定位中心功能

斑竹勋章

爱心勋章

活跃勋章

宣传勋章

优秀斑主

地信元老

灌水勋章

贡献勋章