ArcGIS API for Flex3实现Query查询定位功能

发布时间：2020-12-15 04:24:39 所属栏目：百科来源：网络整理

导读：开始： 1.启动Flex Builder3新建工程以及引入 ArcGIS API for Flex library的开发包。 2.新建QueryTest.mxml页面，这里显示的地图采用Esri提供的在线的NPS_Physical_World_2D的地图比较的漂亮，但是Tiled图没有图层以及字段等数据没有办法进行查询定位，所

开始：

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.这样就完成了所有功能的编写可以运行测试效果。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!