arcgis api for flex 鹰眼 可动态缩放

<?xml version="1.0" encoding="utf-8"?><s:Application 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.commpent.widget.*" xmlns:esri="http://www.esri.com/2008/ags" xmlns:maplib="com.esri.maplib.*"pageTitle="Flex Overview Map"backgroundColor="#333333"creationComplete="init()"><fx:Script><![CDATA[import com.esri.ags.Graphic;import com.esri.ags.geometry.Extent;import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;import com.esri.ags.layers.GraphicsLayer;import com.esri.ags.layers.Layer;import mx.core.FlexGlobals;import mx.events.EffectEvent;[Bindable]private var openToolTip:String;[Bindable]private var closeToolTip:String;private var overviewGraphic:Graphic = new Graphic();private function init():void{overviewGraphic.buttonMode = true;toggleIcon.addEventListener(MouseEvent.CLICK, toggleIcon_clickHandler);viewBox.setStyle("backgroundColor", FlexGlobals.topLevelApplication.getStyle("backgroundColor"));/* //若鹰眼的地图需要动态从地图获得，可用如下代码overviewMap.mainMap.level = 2;var rectLayer:GraphicsLayer = overviewMap.layers[0];overviewMap.removeAllLayers();for(var i:int = 0; i<map.layers.length; i++){var type:String = map.layers[i].className;var otherWinLayer:Layer = null;if(type == "ArcGISDynamicMapServiceLayer"){otherWinLayer = new ArcGISDynamicMapServiceLayer(map.layers[i].url);}else if(type == "ArcGISTiledMapServiceLayer"){otherWinLayer = new ArcGISTiledMapServiceLayer(map.layers[i].url);}else{continue;}overviewMap.addLayer(otherWinLayer);}overviewMap.addLayer(rectLayer); */}private function toggleIcon_clickHandler(event:MouseEvent):void{currentState = (currentState == "collapsed") ? "expanded" : "collapsed";}]]></fx:Script><s:states><s:State name="collapsed"/><s:State name="expanded"/></s:states><s:transitions><s:Transition fromState="*" toState="*"><s:Sequence><s:Resize duration="800" target="{viewBox}"/><s:Rotate angleBy="180"  autoCenterTransform="true"  duration="300"  target="{toggleIcon}"/></s:Sequence></s:Transition></s:transitions><esri:Map id="map" extent="{new Extent(-77, 38, -71, 44)}"><esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/></esri:Map><s:BorderContainer id="viewBox" bottom="10" right="10"     width.collapsed="{toggleIcon.width}" width.expanded="250" height.collapsed="{toggleIcon.height}" height.expanded="250"   backgroundAlpha="1.0"><maplib:OverviewMap mainMap="{map}" id="overviewMap"  width="250" height="250"  clickRecenterEnabled="false"  doubleClickZoomEnabled="false"  keyboardNavigationEnabled="false"  logoVisible="false"  mask="{mapMask}"  panArrowsVisible="false"  panEnabled="false"  rubberbandZoomEnabled="false"  scaleBarVisible="false"  scrollWheelZoomEnabled="false"  wrapAround180="{map.wrapAround180}"  zoomSliderVisible="false"><esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"/><esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/Reference/ESRI_BoundariesPlaces_World_2D/MapServer"/></maplib:OverviewMap><s:BorderContainer id="mapMask"   width="{viewBox.width}" height="{viewBox.height}"/><s:Group width="{viewBox.width}" height="{viewBox.height}"><mx:Image id="toggleIcon"  width="23" height="23"  buttonMode="true"  mask="{iconMask}"  smoothBitmapContent="true"  source="assets/i_expand2.png"  toolTip.collapsed="{openToolTip}"  toolTip.expanded="{closeToolTip}"  useHandCursor="true"/><s:BorderContainer id="iconMask"   width="{toggleIcon.width}" height="{toggleIcon.height}"/></s:Group></s:BorderContainer><!--<mx:Canvas bottom="10" right="10" width="250" height="200"   backgroundColor="#333333" backgroundAlpha="1.0"   borderStyle="solid" borderColor="#000000" cornerRadius="5"><maplib:OverviewMap mainMap="{map}"><esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"/><esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/Reference/ESRI_BoundariesPlaces_World_2D/MapServer"/></maplib:OverviewMap></mx:Canvas>--></s:Application>

OverviewMap.as

/* * Copyright 2009 ESRI * * All rights reserved under the copyright laws of the United States * and applicable international laws, treaties, and conventions. * * You may freely redistribute and use this sample code, with or * without modification, provided you include the original copyright * notice and use restrictions. * * See use restrictions at http://resources.esri.com/help/9.3/usagerestrictions.htm. */package com.esri.maplib{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.FillSymbol;import com.esri.ags.symbols.SimpleFillSymbol;import com.esri.ags.symbols.SimpleLineSymbol;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 navigationmapNavigationEnabled = false;// Hide the map controlslogoVisible = 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():FillSymbol{return _boxFillSymbol;}/** * @private */public function set boxFillSymbol( value:FillSymbol ):void{_boxFillSymbol = value;// Apply the new symbol if the graphics layer is already createdif (_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 enabledif (!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 boxvar 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 boxvar 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 boxvar 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 finishedif (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 finishedif (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 enabledif (!overviewClickRecenterEnabled){return;}if (!_dragging && loaded){var mapPoint:MapPoint = toMapFromStage(event.stageX, event.stageY);// Recenter the extent boxif (_extentBox && _extentBox.geometry){var newExtent:Extent = Extent(_extentBox.geometry).centerAt(mapPoint);updateOverviewExtent(newExtent);}// Recenter the main map on the click pointif (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 boxupdateExtentBox(mainMapExtent);if (overviewMode == DYNAMIC_MODE){// Set the extent of this overview map to be 9 times larger (3x3) than the main map extentsuper.extent = mainMapExtent.expand(3);}}/** * 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 stylereturn new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 0x666666, 0.4,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0xFF0000, 1.0, 2));}}}