ArcGIS Flex API 中的 Flex 技术（一）--事件
作者：Flyingis
本文严禁用于商业目的，如需转载请注明作者及原文链接，其他疑问请联系：dev.vip#gmail.com
在ArcGIS Flex API中探索Flex使用是一种不错的学习方法，可以相互辅助理解ArcGIS Flex API和Flex，这两天重新翻阅了一些官方资料，写一点小结，从之前的一篇事件开始。
ArcGIS Flex API是基于Flex API的一个开发库，开发之前需要导入agslib.swc，根据WebGIS所需的功能可以想到，事件是用户和地图进行交互的基础，没有丰富的事件交互机制就很难为用户提供完整的WebGIS应用体验，如果换成是自己去设计ArcGIS Flex API，我们会从哪些功能需求入手？
点击图层的地理要素进行查询，鼠标移动到查询图层的地理要素上方，异步弹出该要素基本信息窗口。没错，这些都是WebGIS的基本需求，那么通过一个sample看在ArcGIS Flex API如何使用事件。
Code<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
pageTitle="Map Click (but not on pan & zoom)"
xmlns:esri="http://www.esri.com/2008/ags"
layout="absolute"
>
<mx:Script>
<![CDATA[/** * Problem: You want to capture a "click" on the map, but not a pan or other mouse navigation actions. *
Solution: Use mouseDown and panStart instead of the click property. */
import mx.controls.Button;
import mx.controls.Text;
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.events.PanEvent;
private function mouseDownHandler(event:MouseEvent):void
{
if (!event.shiftKey)
{
myMap.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
}
private function panStartHandler(event:PanEvent):void
{
myMap.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseUpHandler(event:MouseEvent):void
{
myMap.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
var mapPoint:MapPoint= myMap.toMapFromStage(event.stageX, event.stageY);
myMap.infoWindow.label = "You clicked here";
myMap.infoWindow.show( mapPoint ); // "Show the click"
}
]]>
</mx:Script>
<esri:Map id="myMap" mouseDown="mouseDownHandler(event)" panStart="panStartHandler(event)">
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
</esri:Map>
</mx:Application>
PanEvent是ArcGIS Flex API中自定义的事件，继承了flash.events.Event，上面例子中所有事件的管理通过addEventListener和 removeEventListenser两个方法实现，并且通过鼠标对地图的点击动作的分解，实现在鼠标点击不同阶段的事件响应，属性信息的获取在 MouseUp阶段，toMapFromStage实现屏幕坐标到地图坐标的转换，并将结果显示在infoWindow中。
具体的组件中，ArcGISTiledMapServiceLayer和ArcGIS Javascript API中的功能相同，将缓存好的地图服务添加到页面上，"esri"是一个标识符，在mxml页面最上方"xmlns:esri="http://www.esri.com/2008/ags"申明，用以在mxml中使用已定义好的组件。
ArcGIS Flex API Events Demo包含了常用的一些事件，可以作为参考学习。从下面例子可以了解到，图层加载、图层添加删除、地图放大缩小、地图平移等都被ArcGIS Flex API Events进行了封装，加上原有的鼠标事件就可以基本满足WebGIS应用要求了。
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"
pageTitle="Event handling"
layout="absolute"
creationComplete="onApplicationCreationComplete()"
>
<mx:Script>
<![CDATA[
import flash.geom.Point;
import com.esri.ags.events.LayerEvent;
import com.esri.ags.events.ExtentEvent;
import com.esri.ags.events.MapEvent;
import com.esri.ags.events.PanEvent;
import com.esri.ags.events.ZoomEvent;
import com.esri.ags.geometry.MapPoint;
import mx.events.FlexEvent;
[Bindable] private var mapCoordX : Number = 0;
[Bindable] private var mapCoordY : Number = 0;
[Bindable] private var pixelCoordX : Number = 0;
[Bindable] private var pixelCoordY : Number = 0;
private function onMouseMove( event : MouseEvent ) : void
{
if (my Map.loaded)
{
var mapPoint : MapPoint = myMap.toMapFromStage(event.stageX, event.stageY);
mapCoordX = mapPoint.x;
mapCoordY = mapPoint.y;
var mapLocalPixelPoint : Point = myMap.globalToLocal( new Point(event.stageX, event.stageY) );
pixelCoordX = mapLocalPixelPoint.x;
pixelCoordY = mapLocalPixelPoint.y;
}
}
public function onApplicationCreationComplete():void
{
// Map Navigation Events
myMap.addEventListener(ExtentEvent.EXTENT_CHANGE, logExtentEvent);
myMap.addEventListener(PanEvent.PAN_START, logPanEvent);
myMap.addEventListener(PanEvent.PAN_UPDATE, logPanEvent);
myMap.addEventListener(PanEvent.PAN_END, logPanEvent);
myMap.addEventListener(ZoomEvent.ZOOM_START, logZoomEvent);
myMap.addEventListener(ZoomEvent.ZOOM_UPDATE, logZoomEvent);
myMap.addEventListener(ZoomEvent.ZOOM_END, logZoomEvent);
myMap.addEventListener(MouseEvent.CLICK, logMouseEvent);
myMap.addEventListener(MouseEvent.DOUBLE_CLICK, logMouseEvent);
myMap.addEventListener(MouseEvent.MOUSE_WHEEL, logMouseEvent);
myMap.addEventListener(MapEvent.LAYER_ADD, logMapEvent);
myMap.addEventListener(MapEvent.LAYER_REORDER, logMapEvent);
myMap.addEventListener(MapEvent.LOAD, logMapEvent);
aims.addEventListener(LayerEvent.LOAD, logLayerEvent);
log.text = "2. Application creation complete\n" + log.text;
}
public function onMapCreationComplete():void
{
myMap.infoWindow.addEventListener(FlexEvent.HIDE, logInfoWindowFlexEvent);
myMap.infoWindow.label = "Clicking the 'x' will \nthrow 'hide' event";
// put the infoWindow in the middle of the map
var myPoint:MapPoint = new MapPoint(0,0);
myMap.infoWindow.show(myPoint);
log.text = "1. Map creation complete\n" + log.text;
}
public function logInfoWindowEvent(event:Event):void
{
log.text = "* Event (infoWindow): " + event.type + "\n" + log.text;
}
public function logInfoWindowFlexEvent(event:FlexEvent):void
{
log.text = "* FlexEvent (infoWindow): " + event.type + "\n" + log.text;
}
public function logMouseEvent(event:MouseEvent):void
{
log.text = "* MouseEvent: " + event.type + "\n" + log.text;
}
public function logExtentEvent(event:ExtentEvent):void
{
log.text = "* ExtentEvent: " + event.type + "\n" + log.text;
}
public function logPanEvent(event:PanEvent):void
{
log.text = "* PanEvent: " + event.type + "\n" + log.text;
}
public function logZoomEvent(event:ZoomEvent):void
{
log.text = "* ZoomEvent: " + event.type + "\n" + log.text;
}
public function logMapEvent(event:MapEvent):void
{
log.text = "* MapEvent: " + event.type + "\n" + log.text;
}
public function logLayerEvent(event:LayerEvent):void
{
log.text = "* LayerEvent: " + event.type + "\n" + log.text;
}
]]>
</mx:Script>
<mx:HDividedBox width="100%" height="100%">
<esri:Map id="myMap"
mouseMove="onMouseMove(event)"
crosshairVisible="true"
creationComplete="onMapCreationComplete()"
>
<esri:extent>
<esri:Extent xmin="-45" ymin="-45" xmax="45" ymax="45">
<esri:SpatialReference wkid="4326"/>
</esri:Extent>
</esri:extent>
<esri:ArcIMSMapServiceLayer id="aims" creationComplete="log.text='MapLayer creation complete\n'+log.text;" load="log.text='MapLayer loaded\n'+log.text;"
serviceHost="http://www.geographynetwork.com"
serviceName="ESRI_Time"
/>
<esri:GraphicsLayer visible="true" creationComplete="log.text='GraphicLayer creation complete\n'+log.text;" load="log.text='GraphicLayer loaded\n'+log.text;">
<esri:Graphic toolTip="-70.488281,41.660156" visible="true">
<esri:geometry>
<esri:MapPoint x="-70.488281" y="41.660156" spatialReference="{new SpatialReference(4326)}"/>
</esri:geometry>
<esri:symbol>
<esri:SimpleMarkerSymbol id="symbol" color="0xFF0000" size="10" alpha="0.75"/>
</esri:symbol>
</esri:Graphic>
</esri:GraphicsLayer>
</esri:Map>
<mx:Panel layout="vertical" height="100%">
<mx:Text width="250" text="You can listen to many different events both our Map Navigation specific events, as well as general Flex events."/>
<mx:TextArea width="100%" height="100%" id="log"/>
<mx:HBox borderStyle="solid">
<mx:Label text="Pixel x: {pixelCoordX}" paddingBottom="0"/>
<mx:Label text="Pixel y: {pixelCoordY}" paddingBottom="0"/>
</mx:HBox>
<mx:HBox borderStyle="solid">
<mx:Label text="Map x: {mapCoordX.toFixed(4)}" paddingBottom="0"/>
<mx:Label text="Map y: {mapCoordY.toFixed(4)}" paddingBottom="0"/>
</mx:HBox>
<mx:Label text="spatial reference: {myMap.spatialReference.wkid}"/>
</mx:Panel>
</mx:HDividedBox>
</mx:Application>
转载于:https://www.cnblogs.com/flyingis/archive/2008/12/07/1349751.html
ArcGIS Flex API 中的 Flex 技术（一）--事件相关推荐
- 本地化环境下ArcGIS Python API中的SSL及locale的bug修复过程
本地化环境下ArcGIS Python API中的SSL及locale的bug修复过程 进来试用ArcGIS Pro和对应的ArcGIS Python API,遇见各种问题--新产品还是不成熟啊,特别 ...
- vue中使用arcgis js api 中通过坐标定位
arcgis js api 中通过坐标定位 根据坐标定位到当前位置 并且放大倍数 根据坐标定位到当前位置 并且放大倍数 let graphic = new Graphic({geometry: geo ...
- 关于ArcGIS JS API中的map高度为400px的问题解决
文章目录 问题现象 原因分析 解决方法 问题总结 问题现象 使用ArcGIS JavaScript API V3.27创建了一个最简单的地图页面,创建map对象时给传入了一个div,样式设的是宽高均为 ...
- ArcGIS JS API中切换页面后组件报Tried to register widget with id== but that id is already registered
由于ArcGIS JavaScript API 基于dojo框架,在dojo中,除了沿用Dom结点, dojo 还自定义了一类结点用"dojoType" 进行标识.dojo 称这些 ...
- Flex布局中的flex属性
1.flex-grow,flex-shrink,flex-basis取值含义 flex-grow: 延申性描述.在满足"延申条件"时,flex容器中的项目会按照设置的flex-gr ...
- 事件抽取中的“门面技术”：事件名称生成浅谈
6月10日,"网信中国"微信公众号发布消息称:微博热搜榜.热门话题榜暂停更新一周,这使得很多热榜平台都受到波及,而在吃瓜之余,我们更进一步地思考热点榜单以及热点名称生成背后的技术, ...
- arcgis flex api 由于沙箱安全的原因 无法显示地图 的解决办法
在使用arcgis flex api做地图的时候,调用自己本机的地图服务.代码如下 <?xml version="1.0" encoding="utf-8" ...
- 地图查询定位功能（Flex API）
ArcGIS Server 10.0+Flex API 2.5. 实现查询定位,目标区域边界高亮. 1.使用QueryTask获得查询信息. 2.将查询结果以Graphic形式放在GraphicsLa ...
- Flex开发中遇到未整理资源
1)Loader类 (1)精通Flex 3.0――4.2.2 动态加载资源--Loader类 地址:http://blog.csdn.net/flex_program/article/details/ ...
最新文章
- embedding层和全连接层的区别是什么 一般说embedding层，实现方式就是一个没有bias的fc层
- Kubernetes Nginx Ingress 安装与使用
- 一文读懂HTTP/2 及 HTTP/3特性
- 房地产还有最后十年机会 抓紧时间转型
- php 屏蔽deprecated,新人求教PHP高手，Deprecated？
- matlab 万年历,matlab时钟万年历 matlab时钟万年历（附word说明文档）： 程序主要 联合开发网 - pudn.com...
- c语言改错和填空能运行吗,C语言改错填空编程
- Spring：@Configuration和@Component的使用与区别
- 计算机组成原理作业3,兰州大学《计算机组成原理》13春在线作业3
- C#datagidview创立数据库，实现读写数据视频
- 【服务器】戴尔PowerEdgeR710服务器升级BIOS
- SaaS服务和个性化需求，就不能鱼和熊掌兼得吗?
- 数据挖掘：实用案例分析
- 完整阅读 何凯明最新一作：Masked Autoencoders Are Scalable Vision Learners
- 反斜杠，让您的csv文档字符不撞车；让“借”您csv数据的人叫苦不迭。
- PCB抗干扰设计原则
- iOS地图定位导航与大头针的简单使用
- 第二银河消息窗口 彩色字体，超大字体实现方法
- 平安好医生技术栈的分析【转】
- Android 8.0学习（32）---Android 8.0源码目录结构详解