arcgis api for flex 两种鹰眼的实现方法

 /**第一种：地图为静态地图，不因主屏地图比例尺的改变而改变。

*调用方法：绑定主屏map，给予鹰眼显示的图层。

**/

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:esri="http://www.esri.com/2008/ags" xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       >
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.events.ExtentEvent;
   import com.esri.ags.events.MapMouseEvent;
   import com.esri.ags.geometry.Extent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.layers.GraphicsLayer;
   import com.esri.ags.symbols.SimpleFillSymbol;
   import com.esri.ags.symbols.SimpleLineSymbol;
   public var mapXml:XML;
   private var overviewMode:String;
   
   private var graphicLineSym:SimpleLineSymbol = new SimpleLineSymbol("solid", 0xFF0000, 0.8, 3);
   
   private var graphicPolySym:SimpleFillSymbol = new SimpleFillSymbol(null, 0xFF0000, 0.01, graphicLineSym);
   
   private var graphicsLayer:GraphicsLayer;
   
   private var ovGraphic:Graphic;
   
   private var xOff:Number;
   
   private var yOff:Number;
   [Bindable]
   public var map:Map=new Map();
   public  function  ini():void
   {
    if (mapXml)
    {
     var mapType:String=mapXml.@mapType;
     var mapUrl:String=mapXml.@url;
     var initextent:String=mapXml.@initextent;
     var fullextent:String=mapXml.@fullExtent;
     var cacheMap:CacheMap=new CacheMap();
     cacheMap._fullextent=fullextent;
     var extArr1:Array=fullextent.split(",");
     var extent:Extent=new Extent(Number(extArr1[0]), Number(extArr1[1]),
      Number(extArr1[2]), Number(extArr1[3]));
     cacheMap._baseURL=mapUrl;
     cacheMap.getXml();
     ovMap.extent=extent;
//     ovMap.zoomSliderVisible=true;
     ovMap.addLayer(cacheMap);
     
     
     graphicsLayer = new GraphicsLayer();
     graphicsLayer.symbol = graphicPolySym;
     ovMap.addLayer(graphicsLayer);
     
     ovGraphic = new Graphic();
     ovGraphic.geometry = map.extent;
     ovGraphic.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
     ovGraphic.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
     graphicsLayer.add(ovGraphic);
     map.addEventListener(ExtentEvent.EXTENT_CHANGE, setOverviewExtent);
     updateOverviewExtent();
    }
   }
   private function setOverviewExtent(event:ExtentEvent):void
   {
    ovGraphic.geometry = map.extent;
    if (overviewMode == "dynamic")
     ovMap.extent = map.extent.expand(3);
   }   
   
   private function updateOverviewExtent():void
   {
    ovGraphic.geometry = map.extent;
    if (overviewMode == "dynamic")
     ovMap.extent = map.extent.expand(3);
   }   
   
   private function mouseDownHandler(event:MouseEvent):void
   {
    var ext:Extent = ovGraphic.geometry as Extent;
    var mPt:MapPoint = ovMap.toMapFromStage(event.stageX, event.stageY);
    xOff = ext.center.x - mPt.x;
    yOff = ext.center.y - mPt.y;
    ovGraphic.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
   }          
   
   private function mouseMoveHandler(event:MouseEvent):void
   {
    var mPt:MapPoint = ovMap.toMapFromStage(event.stageX, event.stageY);
    var tempX:Number = mPt.x + xOff;
    var tempY:Number = mPt.y + yOff;
    var ext:Extent = ovGraphic.geometry as Extent;
    var newext:Extent = new Extent(tempX - ext.width / 2, tempY - ext.height/ 2, tempX + ext.width / 2, tempY + ext.height / 2);
    ovGraphic.geometry = newext;
    if (!event.buttonDown)
     ovGraphic.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
   }         
   
   private function mouseUpHandler(event:MouseEvent):void
   {
    map.extent = ovGraphic.geometry as Extent;
    ovGraphic.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);   
   }     
   
   private function widgetOpenedHandler(event:Event):void
   {
    map.addEventListener(ExtentEvent.EXTENT_CHANGE, setOverviewExtent);
    setTimeout(updateOverviewExtent, 1000);
   }   
   
   private function widgetClosedHandler(event:Event):void
   {
    map.removeEventListener(ExtentEvent.EXTENT_CHANGE, setOverviewExtent);
   }   
   
   private function widgetMinimizedHandler(event:Event):void
   {
    map.removeEventListener(ExtentEvent.EXTENT_CHANGE, setOverviewExtent);
   }
   private function mapclick(e:MapMouseEvent):void{
    var mPt:MapPoint = ovMap.toMapFromStage(e.stageX, e.stageY);
    var tempX:Number = mPt.x ;
    var tempY:Number = mPt.y ;
    var ext:Extent = ovGraphic.geometry as Extent;
    var newext:Extent = new Extent(tempX - ext.width / 2, tempY - ext.height/ 2, tempX + ext.width / 2, tempY + ext.height / 2);
    ovGraphic.geometry = newext;
    map.extent = ovGraphic.geometry as Extent;
   }
   
   
  ]]>
 </fx:Script>
 
 <esri:Map id       ="ovMap"
    width      ="100%"
    height      ="100%"
    mapClick="mapclick(event)"
    panArrowsVisible   ="false"
    zoomSliderVisible   ="false"
    logoVisible     ="false"
    scaleBarVisible    ="false"
    panEnabled     ="false"
    clickRecenterEnabled  ="false"
    doubleClickZoomEnabled  ="false"
    keyboardNavigationEnabled ="false"
    rubberbandZoomEnabled  ="false"
    scrollWheelZoomEnabled  ="false">
 </esri:Map>
</s:BorderContainer>

 

 /**第二种：鹰眼图因主屏地图比例尺的改变而改变，比较适用于大范围大区域的地图鹰眼制作

*代码如下：

**/

package com.dse.common.gis
{
 import com.esri.ags.Graphic;
 import com.esri.ags.Map;
 import com.esri.ags.events.ExtentEvent;
 import com.esri.ags.events.MapEvent;
 import com.esri.ags.geometry.Extent;
 import com.esri.ags.geometry.MapPoint;
 import com.esri.ags.layers.GraphicsLayer;
 import com.esri.ags.symbols.LineSymbol;
 import com.esri.ags.symbols.SimpleLineSymbol;
 import com.esri.ags.symbols.SimpleFillSymbol;
 import com.esri.ags.symbols.FillSymbol;
 
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 //--------------------------------------
 //  Other metadata
 //--------------------------------------
 
 [IconFile("overview-map.gif")]
 
 /**
  * An overview map that extends the base Map component and provides a convenience
  * for linking the overview map to the main map.
  */
 public class OverviewMap extends Map
 {
  //--------------------------------------------------------------------------
  //
  //  Constructor
  //
  //--------------------------------------------------------------------------
  
  /**
   * Creates a new overview map instance.
   *
   * @param map The main map that is linked to this overview map.
   */
  public function OverviewMap( mainMap:Map = null )
  {
   super();
   
   this.mainMap = mainMap;
   // Disable map navigation
   mapNavigationEnabled = false;
   this.scale=2000000;
   // Hide the map controls
   logoVisible = false;
   panArrowsVisible = false;
   scaleBarVisible = false;
   zoomSliderVisible = false;
   
   addEventListener(MouseEvent.CLICK, onOverviewClick);
  }
  
  //--------------------------------------------------------------------------
  //
  //  Constants
  //
  //--------------------------------------------------------------------------
  
  /**
   * Overview mode in which the overview map's extent remains constant.
   */
  public static const STATIC_MODE:String = "static";
  
  /**
   * Overview mode in which the overview map's extent changes to track the extent
   * of the associated main map.  This is the default overview mode.
   */
  public static const DYNAMIC_MODE:String = "dynamic";
  
  //--------------------------------------------------------------------------
  //
  //  Variables
  //
  //--------------------------------------------------------------------------
  
  private var _mainMap:Map;
  private var _extentBox:Graphic;
  private var _graphicsLayer:GraphicsLayer;
  private var _boxFillSymbol:FillSymbol;
  
  private var _dragging:Boolean = false;
  private var _dragStartPoint:MapPoint;
  private var _dragStartExtent:Extent;
  
  //--------------------------------------------------------------------------
  //  Property:  mainMap
  //--------------------------------------------------------------------------
  
  [Bindable("mainMapChanged")]
  /**
   * The main map that is linked to this overview map.
   */
  public function get mainMap():Map
  {
   return _mainMap;
  }
  /**
   * @private
   */
  public function set mainMap( value:Map ):void
  {
   if (value !== _mainMap)
   {
    removeMapListeners();
    _mainMap = value;
    addMapListeners();
    
    dispatchEvent(new Event("mainMapChanged"));
   }
  }
  
  //--------------------------------------------------------------------------
  //  Property:  overviewMode
  //--------------------------------------------------------------------------
  
  [Bindable]
  [Inspectable(category="Mapping", enumeration="dynamic,static", defaultValue="dynamic")]
  /**
   * The display mode of the overview.
   * Use STATIC_MODE to lock the overview map at its current extent.
   * Use DYNAMIC_MODE to allow the overview map extent to change in relation to
   * the main map's extent.
   *
   * @default dynamic
   */
  public var overviewMode:String = DYNAMIC_MODE;
  
  //--------------------------------------------------------------------------
  //  Property:  overviewClickRecenterEnabled
  //--------------------------------------------------------------------------
  
  [Bindable]
  [Inspectable(category="Mapping", defaultValue="true")]
  /**
   * Enables clicking on the overview map to recenter the main map to the clicked location.
   *
   * @default true
   */
  public var overviewClickRecenterEnabled:Boolean = true;
  
  //--------------------------------------------------------------------------
  //  Property:  overviewDragExtentBoxEnabled
  //--------------------------------------------------------------------------
  
  private var _overviewDragExtentBoxEnabled:Boolean = true;
  
  [Bindable]
  [Inspectable(category="Mapping", defaultValue="true")]
  /**
   * Enables dragging the overview indicator box to recenter the main map.
   *
   * @default true
   */
  public function get overviewDragExtentBoxEnabled():Boolean
  {
   return _overviewDragExtentBoxEnabled;
  }
  /**
   * @private
   */
  public function set overviewDragExtentBoxEnabled( value:Boolean ):void
  {
   _overviewDragExtentBoxEnabled = value;
   
   if (_extentBox)
   {
    _extentBox.buttonMode = _overviewDragExtentBoxEnabled;
    _extentBox.useHandCursor = _overviewDragExtentBoxEnabled;
   }
  }
  
  //--------------------------------------------------------------------------
  //  Property:  boxFillSymbol
  //--------------------------------------------------------------------------
  
  [Bindable("boxFillSymbolChanged")]
  /**
   * The fill symbol that is used to draw the indicator box that signifies the main map extent.
   */
  public function get boxFillSymbol():com.esri.ags.symbols.FillSymbol
  {
   return _boxFillSymbol;
  }
  /**
   * @private
   */
  public function set boxFillSymbol( value:com.esri.ags.symbols.FillSymbol ):void
  {
   _boxFillSymbol = value;
   
   // Apply the new symbol if the graphics layer is already created
   if (_graphicsLayer)
   {
    _graphicsLayer.symbol = effectiveBoxFillSymbol();
   }
   
   dispatchEvent(new Event("boxFillSymbolChanged"));
  }
  
  //--------------------------------------------------------------------------
  //
  //  Methods
  //
  //--------------------------------------------------------------------------
  
  /**
   * @private
   */
  override protected function createChildren():void
  {
   super.createChildren();
   
   // Create a graphics layer to display the extent box of the main map
   _graphicsLayer = new GraphicsLayer();
   _graphicsLayer.symbol = effectiveBoxFillSymbol();
   addLayer(_graphicsLayer);
   
   // Create the extent indicator box
   _extentBox = new Graphic();
   _extentBox.buttonMode = overviewDragExtentBoxEnabled;
   _extentBox.useHandCursor = overviewDragExtentBoxEnabled;
   _extentBox.addEventListener(MouseEvent.MOUSE_DOWN, onBoxDragStart);
   _extentBox.addEventListener(MouseEvent.CLICK, onBoxClick);
   _graphicsLayer.add(_extentBox);
   
   if (mainMap && mainMap.loaded)
   {
    updateOverviewExtent();
   }
  }
  
  private function addMapListeners():void
  {
   if (mainMap)
   {
    if (mainMap.loaded)
    {
     updateOverviewExtent();
    }
    else
    {
     mainMap.addEventListener(MapEvent.LOAD, onMainMapLoad, false, 0, true);
    }
    mainMap.addEventListener(ExtentEvent.EXTENT_CHANGE, onMainMapExtentChange, false, 0, true);
   }
  }
  
  private function removeMapListeners():void
  {
   if (mainMap)
   {
    mainMap.removeEventListener(MapEvent.LOAD, onMainMapLoad);
    mainMap.removeEventListener(ExtentEvent.EXTENT_CHANGE, onMainMapExtentChange);
   }
  }
  
  private function onMainMapLoad( event:MapEvent ):void
  {
   event.map.removeEventListener(MapEvent.LOAD, onMainMapLoad);
   updateOverviewExtent();
  }
  
  private function onMainMapExtentChange( event:ExtentEvent ):void
  {
   updateOverviewExtent();
  }
  
  private function onBoxDragStart( event:MouseEvent ):void
  {
   // Check if this map interaction is enabled
   if (!overviewDragExtentBoxEnabled)
   {
    return;
   }
   
   if (!_dragging && loaded)
   {
    addEventListener(MouseEvent.MOUSE_MOVE, onBoxDragUpdate);
    addEventListener(MouseEvent.MOUSE_UP, onBoxDragEnd);
    stage.addEventListener(MouseEvent.MOUSE_UP, stage_onBoxDragEnd);
    
    // Start dragging the extent box
    var mapPoint:MapPoint = toMapFromStage(event.stageX, event.stageY);
    _dragStartPoint = mapPoint;
    _dragStartExtent = Extent(_extentBox.geometry);
    _dragging = true;
   }
  }
  
  private function onBoxDragUpdate( event:MouseEvent ):void
  {
   if (_dragging && loaded)
   {
    // Calculate the drag delta and reposition the extent box
    var mapPoint:MapPoint = toMapFromStage(event.stageX, event.stageY);
    var dx:Number = mapPoint.x - _dragStartPoint.x;
    var dy:Number = mapPoint.y - _dragStartPoint.y;
    var newExtent:Extent = _dragStartExtent.offset(dx, dy);
    updateExtentBox(newExtent);
   }
  }
  
  private function onBoxDragEnd( event:MouseEvent ):void
  {
   if (_dragging && loaded)
   {
    removeEventListener(MouseEvent.MOUSE_MOVE, onBoxDragUpdate);
    removeEventListener(MouseEvent.MOUSE_UP, onBoxDragEnd);
    stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onBoxDragEnd);
    
    // Calculate the drag delta and reposition the extent box
    var mapPoint:MapPoint = toMapFromStage(event.stageX, event.stageY);
    var dx:Number = mapPoint.x - _dragStartPoint.x;
    var dy:Number = mapPoint.y - _dragStartPoint.y;
    var newExtent:Extent = _dragStartExtent.offset(dx, dy);
    updateOverviewExtent(newExtent);
    
    // Update the extent of the main map when dragging has finished
    if (mainMap)
    {
     mainMap.extent = newExtent;
    }
    
    _dragStartPoint = null;
    _dragStartExtent = null;
    _dragging = false;
   }
  }
  
  private function stage_onBoxDragEnd( event:MouseEvent ):void
  {
   if (_dragging && loaded)
   {
    removeEventListener(MouseEvent.MOUSE_MOVE, onBoxDragUpdate);
    removeEventListener(MouseEvent.MOUSE_UP, onBoxDragEnd);
    stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onBoxDragEnd);
    
    // Use the previously set extent box location (from onBoxDragUpdate)
    // rather than calculating the delta based on the current mouse coordinates.
    // This is because the mouse is now outside the overview map and we don't
    // want to move the extent box to some far off location.
    var newExtent:Extent = _extentBox.geometry as Extent;
    updateOverviewExtent(newExtent);
    
    // Update the extent of the main map when dragging has finished
    if (mainMap)
    {
     mainMap.extent = newExtent;
    }
    
    _dragStartPoint = null;
    _dragStartExtent = null;
    _dragging = false;
   }
  }
  
  private function onBoxClick( event:MouseEvent ):void
  {
   if (overviewDragExtentBoxEnabled)
   {
    // Prevent the click event from bubbling up to the map.
    // Otherwise the drag-end action is interfered with.
    event.stopPropagation();
   }
  }
  
  private function onOverviewClick( event:MouseEvent ):void
  {
   // Check if this map interaction is enabled
   if (!overviewClickRecenterEnabled)
   {
    return;
   }
   
   if (!_dragging && loaded)
   {
    var mapPoint:MapPoint = toMapFromStage(event.stageX, event.stageY);
    
    // Recenter the extent box
    if (_extentBox && _extentBox.geometry)
    {
     var newExtent:Extent = Extent(_extentBox.geometry).centerAt(mapPoint);
     updateOverviewExtent(newExtent);
    }
    
    // Recenter the main map on the click point
    if (mainMap && mainMap.loaded)
    {
     mainMap.centerAt(mapPoint);
    }
   }
  }
  
  /**
   * Updates the geometry of the map extent indicator box to the specified extent.
   * If the specified extent is null, then the extent of the main map is used.
   *
   * If this overview map is in dynamic overview mode, then the extent of this
   * overview is updated to track the main map's extent.
   */
  private function updateOverviewExtent( mainMapExtent:Extent = null ):void
  {
   if (!mainMapExtent)
   {
    mainMapExtent = mainMap.extent;
   }
   
   // Set the location of the extent indicator box
   updateExtentBox(mainMapExtent);
   
   if (overviewMode == DYNAMIC_MODE)
   {
    // Set the extent of this overview map to be 9 times larger (3x3) than the main map extent
    super.extent = mainMapExtent.expand(2);
   }
  }
  
  /**
   * Updates the geometry of the map extent indicator box.
   */
  private function updateExtentBox( extent:Extent ):void
  {
   if (_extentBox)
   {
    _extentBox.geometry = extent;
   }
  }
  
  /**
   * Returns the actual fill symbol to use for the extent indicator box.
   */
  private function effectiveBoxFillSymbol():FillSymbol
  {
   if (_boxFillSymbol)
   {
    return _boxFillSymbol;
   }
   
   // Default fill symbol, similar to the Map rubberband zoom box style
   return new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 0x666666, 0.4,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0xFF0000, 1.0, 2)
   );
  }
 }
}