ArcGis 地图局部切换【原创】

首页 | 新闻 | 交流 | 问吧 | 文档 | 手册 | 下载 | 博客

ArcGis 地图局部切换【原创】

作者:  时间: 2010-12-27

  

 

 

 

代码
<?xml version="1.0" encoding="utf-8"?>
<BaseWidget xmlns="com.esri.solutions.flexviewer.*"
xmlns:mx
="http://www.adobe.com/2006/mxml"
x
="600"
y
="300"
creationComplete
="init()">


<mx:Script>
<![CDATA[
import com.esri.ags.events.PanEvent;
import com.esri.ags.layers.Layer;
import com.esri.solutions.flexviewer.EventArgExtend;
import com.esri.solutions.flexviewer.MapManager;
import com.esri.solutions.flexviewer.utils.WidgetEffects;

import mx.core.Application;
import mx.core.UIComponent;
import mx.rpc.events.
*;

private
var mapManger:MapManager;

[Bindable]
private
var size:uint=75;

[Embed(
"com/esri/solutions/flexviewer/assets/images/icons/Magnifier2.png")]
private
var cursorClass:Class;

private
var g:Graphics;

private
var streetLayer:Layer;

private
var masks:UIComponent;

private
function init():void
{
if (configXML)
{
wTemplate.addTitlebarButton(configXML.magnifier.@icon, configXML.magnifier.@label, EventArgExtend.create(SwitchViewState,
0, configXML.magnifier.@label));
}
//显示所有图层,注意图层顺序,街道图层在卫星图层上方
mapShow();
//index 全局对象
var app:index=Application.application as index;
//地图管理对象
mapManger=app.container.mapManager;
//街道地图
streetLayer=map.getLayer("StreetMap");
//马克赛蒙版图层
masks=mapManger.getChildByName("masks") as UIComponent;

streetLayer.visible
=false;

}


public
function SwitchViewState(event:MouseEvent=null, value:int=0, titleValue:String=null, duration:Number=400):void
{
wTemplate.setTitle(titleValue);
WidgetEffects.flipWidget(
this, viewStack, "selectedIndex", value, duration);
}



/**********************
* 显示卫星图和街道图
* ******************
*/
private
function mapShow():void
{

var configBasemaps:Array=configData.configBasemaps;
for (var i:Number=0; i < configBasemaps.length; i++)
{
var id:String=configBasemaps[i].id;
var lyr:Layer=map.getLayer(id);

lyr.visible
=true;
configBasemaps[i].visible
=true;
}
}


/**
* 窗体关闭
*/
public
function widgetClosedHandler():void
{
clear();
}


/**
*添加放大镜事件
*
*/
private
function onClick_magnifier():void
{
streetLayer.mask
=masks;
g
=masks.graphics;

map.addEventListener(MouseEvent.MOUSE_DOWN, mapMouseDown);
map.addEventListener(MouseEvent.MOUSE_UP, mapMouseUp);
map.addEventListener(MouseEvent.MOUSE_OVER, onMapMouseOver);
map.addEventListener(MouseEvent.MOUSE_OUT, onMapMouseOut);

//禁止漫游
map.panEnabled=false;
}

/**放大镜半径更改*/
private
function optionsChanged():void
{
size
=size_control.value;
}

/**画圆**/
private
function drawCircle():void
{
g.beginFill(
0);
g.lineStyle(
0, 0);
g.drawCircle(stage.mouseX, stage.mouseY, size);
g.endFill();
}

/**隐藏鼠标并画圆**/
private
function hideCursorDraw():void
{
cursorManager.hideCursor();
g.clear();
drawCircle();
}

/**鼠标右键按下*/
private
function mapMouseDown(event:MouseEvent):void
{
if (map.panEnabled)
{
map.addEventListener(PanEvent.PAN_UPDATE, panUpdae);
}
else
{
map.addEventListener(MouseEvent.MOUSE_MOVE, onMapMove);
}

if (!streetLayer.visible)
streetLayer.visible
=true;

hideCursorDraw();
}


/**鼠标右键弹起清空画布*/
private
function mapMouseUp(event:MouseEvent):void
{
map.removeEventListener(PanEvent.PAN_UPDATE, panUpdae);
map.removeEventListener(MouseEvent.MOUSE_MOVE, onMapMove);

cursorManager.showCursor();
g.clear();
}

/**鼠标经过地图时设置样式*/
private
function onMapMouseOver(event:MouseEvent):void
{
cursorManager.removeAllCursors();
cursorManager.setCursor(cursorClass,
2, 0, 0);
}

/**鼠标离开地图时清除样式*/
private
function onMapMouseOut(event:MouseEvent):void
{
cursorManager.removeAllCursors();
}

/**鼠标在地图上移动实时画圆*/
private
function onMapMove(event:MouseEvent):void
{
hideCursorDraw();
}

/**地图漫游实时画圆*/
private
function panUpdae(event:PanEvent):void
{
hideCursorDraw();
}


/**清空*/
private
function clear():void
{
map.panEnabled
=true;
streetLayer.visible
=false;
streetLayer.mask
=null;
g
=null;

if (map.hasEventListener(MouseEvent.MOUSE_MOVE))
map.removeEventListener(MouseEvent.MOUSE_MOVE, onMapMove);
if (map.hasEventListener(PanEvent.PAN_UPDATE))
map.removeEventListener(PanEvent.PAN_UPDATE, panUpdae);
if (map.hasEventListener(MouseEvent.MOUSE_DOWN))
map.removeEventListener(MouseEvent.MOUSE_DOWN, mapMouseDown);
if (map.hasEventListener(MouseEvent.MOUSE_UP))
map.removeEventListener(MouseEvent.MOUSE_UP, mapMouseUp);
if (map.hasEventListener(MouseEvent.MOUSE_OVER))
map.removeEventListener(MouseEvent.MOUSE_OVER, onMapMouseOver);
if (map.hasEventListener(MouseEvent.MOUSE_OUT))
map.removeEventListener(MouseEvent.MOUSE_OUT, onMapMouseOut);
}
]]
>
</mx:Script>

<WidgetTemplate id="wTemplate"
fontFamily
="微软雅黑"
fontSize
="12"
color
="#ffffff"
widgetClosed
="widgetClosedHandler()">
<mx:ViewStack id="viewStack"
width
="100%"
height
="100%"
creationPolicy
="all"
x
="10"
y
="10">
<mx:Canvas width="100%"
height
="100%">
<mx:Label x="47"
y
="2"
text
="放大镜半径:{size}"/>
<mx:HSlider value="{size}"
thumbCount
="1"
id
="size_control"
minimum
="25"
maximum
="200"
snapInterval
="1"
dataTipPrecision
="0"
tickValues
="{[25,50,75,100,125,150,175,200]}"
change
="optionsChanged()"
x
="141"
y
="5"/>
<mx:Image source="com/esri/solutions/flexviewer/assets/images/icons/spotlight.png"
click
="onClick_magnifier()"
x
="122"
y
="43"
toolTip
="放大镜"/>

<mx:Image source="com/esri/solutions/flexviewer/assets/images/icons/i_clear.png"
x
="176"
y
="43"
toolTip
="清除"
click
="clear()"/>
<mx:HRule x="5"
y
="91"
width
="100%"
left
="5"
right
="5"
strokeColor
="#1F69ED"
strokeWidth
="1"/>
</mx:Canvas>


</mx:ViewStack>
</WidgetTemplate>



</BaseWidget>

 

代码中的masks是一个UIComponent;原理是这样的,首先街道底图和卫星地图层叠顺序一定要对,街道地图置顶,因为UIComponent是透明的控件,所以当进行遮罩的时候(街道地图的mask属性赋值为UIComponent),街道地图就会被遮挡,而现实卫星地图,原理很简单,其关键在于UIComponent的cacheAsBitmap,设置该属性必须为true,否则当地图漫游的时候,会出现问题。