ARCGIS viewer入门（4） 简单图查

第一步：在config.xml中添加创建的widget；打开config.xml文件添加下面几行代码到<widget>标记块，你可以为创建的widget使用自己的图标，可以是40×40的一个png图像文件，或者gif、jpg文件。

<widgetlabel = "My First Widget"

icon   = " com/esri/solutions/flexviewer/assets/images/icons/i_globe.png"menu  = "menuWidgets"

config = "";>

mywidgets/MyFirstWidget.swf

</widget>

第二步：添加图层

建议为每一个新创建的widget添加一个图层，这个图层能够被添加到地图服务中去，具体是在widgetConfigLoaded这个事件处理器中的init方法进行相关初始化操作。当所有的widget的配置信息加载完毕并且待命时就会传出一个widgetConfigLoaded事件。相应代码如下：

<?xml version="1.0" encoding="utf-8"?>

<BaseWidgetx="600" y="300" xmlns:esri="http://www.esri.com/2008/ags" xmlns="com.esri.solutions.flexviewer.*"xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mxeffects="com.adobe.ac.mxeffects.*" xmlns:widgets="com.esri.solutions.flexviewer.widgets.*"widgetConfigLoaded="init()">

<mx:Script>

<![CDATA[

…

 

private functioninit():void

{

graphicPointSym = newPictureMarkerSymbol(widgetIcon, 30, 30)

graphicsLayer = newGraphicsLayer();graphicsLayer.symbol= graphicPointSym;map.addLayer(graphicsLayer);

 

…

一旦添加了图层，你接下来就能使用标准的ArcGIS API for Flex中的各个方法来给图层加上各种图形元素。当点击open/minimize的图标时打开/关闭widget图层。WidgetTemplate模板设置了两个窗口状态事件：widgetOpened以及widgetClosed事件。他们都是扩展于flash.events.Event这个类。你可以使用这两个事件来同步同步图层的可见性。在这个例子里，我们先添加两个事件处理器到WidgetTemplate模板：

 <viewer:WidgetTemplate id="wTemplate" height="82"
      closed ="widgetClosedHandler(event)"  open="widgetOpenedHandler(event)">
   <s:Label id="lbl"
     width="100%"
     fontSize="18"
     fontStyle="italic"
     fontWeight="bold"/>
 </viewer:WidgetTemplate>

 private function widgetClosedHandler(event:Event):void    
   {
       graphicsLayer.visible = false;   
   }
   
   private function widgetOpenedHandler(event:Event):void
   {
        graphicsLayer.visible = true;    
   }

第三步：从地图接收数据(通过单击，画线等操作实现)

对于GIS网络应用，除了可视化数据这个特殊用途外，地图还是一个允许用户收集并且处理地图数据的数据源。或许在用户与地图进行交互的过程中，我们创建的widget需要接收如点和直线或多边形这一类的数据来进行处理。那么Sample Flex Viewer以及widget编程模型就能够用微件通过内置的setMapAction方法来请求或是接收这一类的地图数据。下面这段代码展示了如何激活画图工具来追踪用户在地图上面的点击操作：

 

 private function activateTool():void
    
   {
    drawSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, 0x3FAFDC, 1);

    setMapAction(DrawTool.MAPPOINT, "Click Point",drawSymbol, drawEnd);
    
   }
   
   private function drawEnd(event:DrawEvent):void
    
   {
    
    var geom:Geometry =  event.graphic.geometry;
    
    var pt:MapPoint = geom as MapPoint;
    
    Alert.show("Click location: " + pt.x + ", " + pt.y);
    activateTool();
    
   }

在上面的示例中，点击widget中的按钮会调用activeTool()方法。当一个指定的任务需要用户点击widget上的按钮时，程序就能够随时从地图上获取一个点的坐标信息。用户下一步需要做的就是点击地图上任意位置，然后widget就能够接收这个点击行为传送的点信息。具体由一个回调函数drawEnd()传回参数到setMapAction()方法来实现具体操作。

setMapAction方法

公共方法setMapAcion定义在BaseWidget类里（在BaseWidget.as文件中），这样所有继承该类的widget就能够自动继承这个特性。该方法定义如下：public function setMapAction(action:String, status:String, callback:Function):void，其中参数:

action:这个字符串标记表示ArcGIS API相应的画图工具被激活。下面列出的是ArcGIS Flex API提供的能够用来访问各种画图工具的字符串标记:

extent  (Draw.EXTENT) point     (Draw.MAPPOINT) line  (Draw.LINE) polyline      (Draw.POLYLINE) polygon (Draw.POLYGON)

multipoint   (Draw.MULTIPOINT)

freehandpolyline      (Draw.FREEHAND_POLYLINE)

freehandpolygon      (Draw.FREEHAND_POLYGON)

status:在控制条的状态栏显示的文本文字；

callback:画图操作完成后Map Manager回调的函数。

 

 

完整源代码：

<?xml version="1.0" encoding="utf-8"?>
<!--
///////////////////////////////////////////////////////////////////////////
// Copyright (c) 2010-2011 Esri. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////
-->
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:viewer="com.esri.viewer.*"
       widgetConfigLoaded="init()">
 <fx:Script>
  <![CDATA[
   import com.esri.ags.events.DrawEvent;
   import com.esri.ags.geometry.Geometry;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.layers.GraphicsLayer;
   import com.esri.ags.symbols.PictureMarkerSymbol;
   import com.esri.ags.symbols.SimpleMarkerSymbol;
   import com.esri.ags.tools.DrawTool;
   
   import mx.controls.Alert;
   private var graphicPointSym:PictureMarkerSymbol;
   private var graphicsLayer : GraphicsLayer;
   private var status:String;
   var drawSymbol :SimpleMarkerSymbol;
   //this function called when the widget's configuration is loaded
   private function init():void   
   {
    
    graphicPointSym = new PictureMarkerSymbol(widgetIcon, 30, 30)
    graphicsLayer = new GraphicsLayer();
    graphicsLayer.symbol = graphicPointSym;
    map.addLayer(graphicsLayer);
    lbl.text = configXML.content || getDefaultString("helloContent");
    activateTool();
   }
   private function widgetClosedHandler(event:Event):void    
   {
       graphicsLayer.visible = false;   
   }
   
   private function widgetOpenedHandler(event:Event):void
   {
        graphicsLayer.visible = true;    
   }
   private function activateTool():void
    
   {
    drawSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, 0x3FAFDC, 1);

    setMapAction(DrawTool.MAPPOINT, "Click Point",drawSymbol, drawEnd);
    
   }
   
   private function drawEnd(event:DrawEvent):void
    
   {
    
    var geom:Geometry =  event.graphic.geometry;
    
    var pt:MapPoint = geom as MapPoint;
    
    Alert.show("Click location: " + pt.x + ", " + pt.y);
    activateTool();
    
   }

  ]]>
 </fx:Script>
 <viewer:WidgetTemplate id="wTemplate" height="82"
      closed ="widgetClosedHandler(event)"  open="widgetOpenedHandler(event)">
   <s:Label id="lbl"
     width="100%"
     fontSize="18"
     fontStyle="italic"
     fontWeight="bold"/>
 </viewer:WidgetTemplate>
</viewer:BaseWidget>