arcgis api for flex 高级主题(二) 自定义控件的开发
arcgis api for flex 本身只提供了Navigation和ScaleBar两个控件,并且api中
对如何开发自定义的控件做详细的描述(也可能有,是我没找到)、
下面就介绍一下我的方法。以实现一个能在地图上动态显示当前鼠标经纬度的控
件。
1 定义控件类,集成UIComponent ,实现IMapAware接口
2 重载createChildren函数
3 实现public function set map(map:Map) : void 函数
4 添加自己的功能代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
package com.esri
{
import com.esri.ags.*;
import com.esri.ags.events.*;
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.utils.*;
import flash.display.*;
import flash.events.MouseEvent;
import flash.filters.*;
import flash.text.*;
import flash.geom.Point;
import mx.core.*;
import mx.events.*;
public class ESRIStatusBar extends UIComponent implements
IMapAware
{
private var m_map:Map;
private var m_stateLabel:TextField;
public function ESRIStatusBar()
{
m_stateLabel = new TextField();
m_stateLabel.width = 152;
}
override protected function updateDisplayList(log:Number,
pow:Number) : void
{
super.updateDisplayList(log, pow);
return;
}// end function
override protected function createChildren() : void
{
super.createChildren();
var pnt:Point = new Point;
if(m_map.loaded)
{
var mapPnt:MapPoint = new MapPoint
(m_map.extent.xmax,m_map.extent.ymin);
pnt = m_map.toScreen(mapPnt);
m_stateLabel.x = pnt.x-150;
m_stateLabel.y = pnt.y-16;
}
addChild(m_stateLabel);
return;
}// end function
private function mouseMoveHandler
(event:MouseEvent):void
{
if(m_map)
{
if(m_map.loaded)
{
var mapPoint : MapPoint =
m_map.toMapFromStage(event.stageX, event.stageY);
m_stateLabel.text =
"x="+mapPoint.x.toString()+" , y="+mapPoint.y.toString();
}
}
}
private function extentChangeHandler
(event:ExtentEvent):void
{
var pnt:Point = new Point;
var mapPnt:MapPoint = new MapPoint
(m_map.extent.xmax,m_map.extent.ymin);
pnt = m_map.toScreen(mapPnt);
m_stateLabel.x = pnt.x-150;
m_stateLabel.y = pnt.y-16;
}
public function set map(map:Map) : void
{
m_map = map;
m_map.addEventListener
(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
m_map.addEventListener(ExtentEvent.EXTENT_CHANGE,
extentChangeHandler);
}// end function
}
}
把这个控件添加到map上
var statusBar:ESRIStatusBar = new ESRIStatusBar();
IMapAware(statusBar).map = EsriMap;
EsriMap.addChild(statusBar);
放代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:esri="http://www.esri.com/2008/ags"
styleName="plain" >
<mx:Script>
<![CDATA[
import com.esri.*;
import com.esri.ags.*;
private function EsriMapCreateComplete():void
{
var statusBar:ESRIStatusBar = new
ESRIStatusBar();
IMapAware(statusBar).map = EsriMap;
EsriMap.addChild(statusBar);
}
]]>
</mx:Script>
<esri:Map crosshairVisible="true" id="EsriMap"
creationComplete="EsriMapCreateComplete()">
<esri:ArcGISTiledMapServiceLayer
url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap
_World_2D/MapServer" />
</esri:Map>
</mx:Application>