/**第一种:地图为静态地图,不因主屏地图比例尺的改变而改变。
*调用方法:绑定主屏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)
);
}
}
}