目的:
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
完成后的效果图:

ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)
开始:
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,具体的显示代码如下:
 1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)<esri:Extent id="myExtent" xmin="-127.968857954995" ymin="25.5778580720472" xmax="-65.0742781827045" ymax="51.2983251993735" />
 2ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    <mx:Canvas width="434" height="370" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="-140" verticalCenter="34">
 3ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    <esri:Map id="myMap" extent="{myExtent}">
 4ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer" />
 5ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)        <esri:ArcGISDynamicMapServiceLayer id="myMapServiceLayer"  url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" creationComplete="loadMapLayer(event)">
 6ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)            <esri:visibleLayers>
 7ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)            <mx:ArrayCollection>
 8ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)            </mx:ArrayCollection>
 9ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)            </esri:visibleLayers>
10ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)        </esri:ArcGISDynamicMapServiceLayer>
11ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)        <esri:GraphicsLayer id="myGraphicsLayer"  symbolFunction="{mySymbolFunction}" />
12ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    </esri:Map>
13ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    </mx:Canvas>
3.上面的代码中为Map控件设置了以为USA范围的Extent,为ArcGISDynamicMapServiceLayer设置了creationComplete事件就是用来执行loadMapLayer(event)把地图图层名称以及index添加到ComboBox来选择用。
loadMapLayer(event)方法代码如下:
 1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)//获取地图图层名称和index到ComboBox上
 2ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)            private function loadMapLayer(event:Event):void
 3ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)            {
 4ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                //获取图层信息数组
 5ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                var layerInfos:Array;
 6ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                layerInfos=myMapServiceLayer.layerInfos;
 7ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                var layers:Array = new Array();
 8ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                //遍历图层信息数组然后把图层的名称和index值添加到新的数组中
 9ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                for(var i:int=0;i<layerInfos.length;i++)
10ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                {
11ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                    layers.push({label:layerInfos[i].name ,data:i}); 
12ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                }
13ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                //给ComboBox设定数据源
14ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)                layerList.dataProvider=layers;
15ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)            }
ComboBox的显示代码:
1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)<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方法中对点、线、面的显示样式进行设置,代码如啊:
 1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)private function mySymbolFunction(graphic:Graphic):Symbol
 2            }
对上面的sms、sls、sfs等定义:
1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)<esri:SimpleLineSymbol id="sls" style="solid" color="0x0000FF" width="2" alpha="0.6"/>
2ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    <esri:SimpleMarkerSymbol id="sms" style="circle" color="0x0000FF" alpha="0.6" size="15"/>
3ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    <esri:SimpleFillSymbol id="sfs" color="0x0000FF" alpha="0.6"/>
6.接下来在页面上添加一个TextInput、Button、mx:DataGrid分别为查询语句输入框、查询按钮、查询结果显示表,具体显示代码如下:
1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)<mx:Canvas width="434" height="48" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="-139" verticalCenter="-183">
2ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)        <mx:ComboBox id="layerList" x="10" y="10" width="117"></mx:ComboBox>
3ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)        <mx:TextInput id="qText" x="135" y="10" width="223" enter="doQuery()" text="STATE_NAME like '%a%'"/>
4ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)        <mx:Button x="366" y="10" label="查询" fontSize="12" height="22" click="doQuery()"/>
5ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    </mx:Canvas>
6ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)<mx:DataGrid  id="resultTable" change="clickHandler(event)"  height="426" borderStyle="solid" borderThickness="3" borderColor="#D6D7D8" horizontalCenter="179" verticalCenter="6" width="188">
7ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    </mx:DataGrid>
7.上面的代码中为TextInput添加了enter事件用来实现回车后进行调用doQuery()方法进行查询,为Button添加了click事件点击后调用doQuery()方法进行查询
8.要进行Query还需要esri:QueryTask控件,在页面上添加如下显示代码:
1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)<esri:QueryTask id="queryTask" >
2ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    <esri:Query id="query" />
3ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)    </esri:QueryTask>
9.doQuery()方法代码如下,具体说明看注解:
 1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)private function doQuery():void
 2            }
10.更加查询语句查询到结果显示到Grid中后还需要实现一个点击Grid的行进行地图定位的功能,上面添加Grid的时候已经为它添加了change事件就是点击某一行后调用clickHandler(event)方法进行定位功能,代码说明如下:
 1ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)//Grid点击事件进行对点击对象进行定位居中显示
 2ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)            public function clickHandler(event:ListEvent):void
 3            }
11.这样就完成了所有功能的编写可以运行测试效果。

相关文章: