zoukankan      html  css  js  c++  java
  • ArcGIS.Server.9.3和ArcGIS API for Flex实现Identify的功能图查属性(六)

    目的:
    1.ArcGIS API for Flex实现Identify的功能,进行图查属性的功能,这样选择图层然后进行点、线、面的查询最好查到的地理元素高亮显示同时在右边的Grid中显示查到的数据
    准备工作:
    1.在ArcGIS.Server.9.3发布一个叫usa的Map Service,并且把这个Service启动起来
    完成后的效果图:


    开始:
    1.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包
    2.新建IdentifyTest.mxml页面,然后在页面上添加esri:Map控件设置esri:ArcGISDynamicMapServiceLayer等,这里还需要高亮显示被查询到的元素所以还需要esri:GraphicsLayer,具体代码如下:
    1<mx:Canvas width="490" height="311" borderStyle="solid" borderThickness="3" borderColor="#425DE2" verticalCenter="-20" x="11">
    2    <esri:Map id="myMap">
    3        <mx:Panel x="209" y="-10" width="250" height="200" layout="absolute">
    4        </mx:Panel>
    5        <esri:ArcGISDynamicMapServiceLayer id="myMapServiceLayer" url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" complete="mapHandler(event)"/>
    6        <esri:GraphicsLayer id="myGraphicsLayer" symbolFunction="{mySymbolFunction}"/>
    7    </esri:Map>
    8    </mx:Canvas>
    3.上面的代码中给ArcGISDynamicMapServiceLayer添加了一个complete事件用来当地图载入完成后获取地图的图层名称显示在地图上方的mx:ComboBox上,代码如下:
     1//获取地图图层名称和index到ComboBox上
     2            private function mapHandler(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[i].name ,data:i}); 
    12                }

    13                //给ComboBox设定数据源
    14                layerList.dataProvider=layers;
    15            }
    mx:ComboBox显示代码:
    1<mx:ComboBox id="layerList" verticalCenter="-195" x="139"></mx:ComboBox>
    4.上面的GraphicsLayer也添加了一个symbolFunction的功能,这个功能是当有元素添加到
    GraphicsLayer时进行元素显示样式的设置,这样分别对点、线、面进行样式设定,代码如下:
     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            }
    5.上面代码中的sms、sls、sfs是定义好的Symbol的id,具体定义如下:
    1<esri:SimpleLineSymbol id="sls" style="solid" color="0x00FF00" width="2" alpha="1"/>
    2    <esri:SimpleMarkerSymbol id="sms" style="diamond" color="0x00FF00" size="15"/>
    3    <esri:SimpleFillSymbol id="sfs"/>
    6.要画图肯定还需要esri:Draw这个控件了,上一篇有比较详细的讲了这里就不说了,代码如下:
    1<esri:Draw id="drawToolbar" map="{myMap}" graphicsLayer="{myGraphicsLayer}" drawEnd="drawEndHandler(event)" />
    7.接着添加mx:ToggleButtonBar了,添加3个子按钮分别是点、线、面的操作,具体代码如下:
    1<mx:ToggleButtonBar verticalCenter="-195"  itemClick="itemClickHandler(event)" x="11" toggleOnClick="true">
    2        <mx:dataProvider>
    3        <mx:Array>
    4        <mx:Object icon="{point}" />
    5        <mx:Object icon="{polyline}" />
    6        <mx:Object icon="{polygon}" />
    7        </mx:Array>
    8        </mx:dataProvider>
    9    </mx:ToggleButtonBar>
    8.ToggleButtonBar的itemClickHandler事件代码:
     1private function itemClickHandler(event:ItemClickEvent):void
     2            {
     3                switch(event.index)
     4                {
     5                    case 0:
     6                    {
     7                        drawToolbar.activate(Draw.MAPPOINT);
     8                        break;
     9                    }

    10                    case 1:
    11                    {
    12                        drawToolbar.activate(Draw.POLYLINE);
    13                        break;
    14                    }

    15                    case 2:
    16                    {
    17                        drawToolbar.activate(Draw.POLYGON);
    18                        break;
    19                    }

    20                }

    21            }
    9.这样就实现了能在GraphicsLayer上画点、线、面的功能,接下来就是今天主要的代码就是在上面添加esri:Draw的时候给它添加了一个drawEnd="drawEndHandler(event)",这个就是当绘图完成后执行drawEndHandler(event)这个方法了,主要功能就是在这个方法里实现Identify的功能的,要实现Identify的功能还需要添加一个esri:IdentifyTask控件,这个就是实现Identify的功能的控件,添加控件代码如下:
    1<esri:IdentifyTask id="identifyTask" identifyComplete="identifyCompleteHandler(event)" url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>
    mx:DataGrid的显示代码:
    1<mx:DataGrid id="datalist" height="311" borderStyle="solid" borderThickness="3" verticalCenter="-20" borderColor="#1B67D9" left="509">
    drawEndHandler(event)
    的代码如下:
     1private function drawEndHandler(event:DrawEvent):void
     2            {
     3                //获取绘图结果Geometry
     4                var geometry:Geometry=event.geometry;
     5                var identifyParams:IdentifyParameters=new IdentifyParameters();
     6                //查询结果需要返回Geometry
     7                identifyParams.returnGeometry=true;
     8                //查询冗余范围
     9                identifyParams.tolerance=3;
    10                //
    11                identifyParams.width = myMap.width;
    12                //
    13                identifyParams.height = myMap.height;
    14                //设置查询的Geometry
    15                identifyParams.geometry=geometry;
    16                //从ComboBox获取选择的图层index设置要查询的图层
    17                var layers:Array=new Array();
    18                layers.push(layerList.value);
    19                identifyParams.layerIds=layers;
    20                //查询可见图层
    21                identifyParams.layerOption=IdentifyParameters.LAYER_OPTION_VISIBLE;
    22                
    23                identifyParams.mapExtent=myMap.extent;
    24                //进行查询
    25                identifyTask.execute(identifyParams);
    26            }

    27            
    28            //查询完成后执行的事件
    29            private function identifyCompleteHandler(event:IdentifyEvent):void
    30            {
    31                var datas:Array=new Array();
    32                //myGraphicsLayer.clear();
    33                //遍历查询结果把查询到的feature添加到GraphicsLayer进行高亮显示
    34                //同时把查询到的元素的名称添加到datas对象数组用来DataGrid显示用
    35                for each (var result:IdentifyResult in event.identifyResults)
    36                {
    37                    myGraphicsLayer.add(result.feature);
    38                    //datas.push(result.feature.attributes);    
    39                    datas.push({"value":result.value});
    40                }

    41                //设置mx:DataGrid的数据源
    42                datalist.dataProvider=datas;
    43            }
    10.这样就完成了所有的代码可以运行测试效果了。
  • 相关阅读:
    通过class定位打包后的resour路径
    maven-antrun-plugin
    maven-shade-plugin Premain-Class
    mac settings 在idea位置
    (第七天)[js] 统计某一字符或字符串在另一个字符串中出现的次数
    (第六天)[jS] 写一个去除制表符和换行符的方法
    (第五天)[js] 写一个把字符串大小写切换的方法
    (第四天)[js] 写一个方法把下划线命名转成大驼峰命名
    (第三天)[js] 去除字符串中最后一个指定的字符
    详解python中的*与**用法
  • 原文地址:https://www.cnblogs.com/hll2008/p/1317091.html
Copyright © 2011-2022 走看看