扩展操作

        如果产品中提供的地图交互操作不能满足您的需求，用户还可继承 MapAction，定制自己的地图操作。下示例为您展示如何扩展 MapAction ，该示例实现的地图操作是当按下鼠标左键时添加图片，移动鼠标时图片随鼠标移动的功能。实现步骤如下：

1. 首先在所建工程中（本例以 GettingStarted 工程为例）添加新建 ActionScript 类，命名为 AddPicture.as ，该类继承自 MapAction。然后在 AS 文件中添加如下代码：

   拷贝代码

   //需要使用的命名空间 import com.supermap.web.actions.MapAction; import com.supermap.web.core.Feature; import com.supermap.web.core.Point2D; import com.supermap.web.core.geometry.GeoPoint; import com.supermap.web.core.styles.PictureMarkerStyle; import com.supermap.web.mapping.FeaturesLayer; import com.supermap.web.mapping.Map; import flash.events.MouseEvent; import flash.geom.Point; public class AddPicture extends MapAction { private var _picture:PictureMarkerStyle; private var _pictureFeature:Feature; private var _featureLayer:FeaturesLayer; private var _isMouseDown:Boolean = false;//判断鼠标是否已按下 public function AddPicture(map:Map, picture:PictureMarkerStyle) { //设置与此 Action 关联的地图 super(map); this.picture = picture; //定义矢量图层，用于承载图片 _featureLayer = new FeaturesLayer(); this.map.addLayer(_featureLayer); } //属性：获取或设置图片要素样式 public function get picture():PictureMarkerStyle { return _picture; } public function set picture(value:PictureMarkerStyle):void { _picture = value; } //Map 的 MouseEvent.MOUSE_DOWN 事件的侦听函数，添加图片 protected override function onMouseDown(event:MouseEvent):void { this._isMouseDown = true;//指示鼠标已按下 //定义图片要素 _pictureFeature = new Feature(); _pictureFeature.style = this.picture; var point:Point = this.map.globalToLocal(new Point(event.stageX, event.stageY)); var point2D:Point2D = this.map.screenToMap(point); var geoPoint:GeoPoint = new GeoPoint(point2D.x, point2D.y); _pictureFeature.geometry = geoPoint; //将图片要素添加于 _featureLayer 上 this._featureLayer.addFeature(_pictureFeature); } //Map 上 MouseEvent.MOUSE_MOVE 事件的侦听函数，移动图片 protected override function onMouseMove(event:MouseEvent):void { //如鼠标未执行按下操作，则不对监听到的 MouseEvent.MOUSE_MOVE 事件处理 if(this._isMouseDown == false) return; //更新图片位置 var point:Point = this.map.globalToLocal(new Point(event.stageX, event.stageY)); var point2D:Point2D = this.map.screenToMap(point); var geoPoint:GeoPoint = new GeoPoint(point2D.x, point2D.y); this._pictureFeature.geometry = geoPoint; this._featureLayer.refresh(); } //Map 上 MouseEvent.MOUSE_UP 事件的侦听函数，结束移动图片操作 protected override function onMouseUp(event:MouseEvent):void { this._isMouseDown = false; } }

2. 下面就可以使用扩展的 AddPicture 类了。红色代码部分为关键代码：

   MAML	拷贝代码
   <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:ic="http://www.supermap.com/iclient/2010" xmlns:is="http://www.supermap.com/iserverjava/2010" width="100%" height="100%"> <fx:Script> <![CDATA[ import com.supermap.web.core.styles.PictureMarkerStyle; private var picStyle:PictureMarkerStyle; private function init():void { //图片样式，其中图片存储路径仅作参考 picStyle = new PictureMarkerStyle("assets/flex-iframe-logo-128.png"); //定义地图操作为 AddPicture this.map.action = new AddPicture(this.map, picStyle); } ]]> </fx:Script> <!--添加地图--> <!--scales:您的地图比例尺；url：您的 Web 服务地址；url：您的地图服务地址；--> <ic:Map id="map" x="0" y="0" height="100%" width="100%" scales="{[1.25e-9, 2.5e-9, 5e-9, 1e-8, 2e-8, 4e-8, 8e-8, 1.6e-7, 3.205e-7, 6.4e-7]}"> <is:TiledDynamicRESTLayer url="http://192.168.11.11:8090/iserver/services//maps/rest/maps/World Map"/> </ic:Map> </s:Application>