ArcGis 地图局部切换【原创】

来源:互联网 时间:1970-01-01

 

 

 

代码

<?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([email protected], [email protected], EventArgExtend.create(SwitchViewState, 0, [email protected]));
}
//显示所有图层,注意图层顺序,街道图层在卫星图层上方
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,否则当地图漫游的时候,会出现问题。


相关阅读:
Top