地图上绘制Anychart，并JS回调FLEX方法

本文以画利用arcgis for flex在地图某个点上绘制anychart为例子

 

一：创建一个图层，并根据经纬度生成一个MapPoint对象

var graphicsLayer:GraphicsLayer =  getGraphicLayer(layerName);

var point:MapPoint = new MapPoint();

point.x = lon;

point.y = lat;

二：创建一个Graphic对象，并设置它的地理信息（生成的MapPoint对象）

//画点

var gra:Graphic = new Graphic();

gra.id = id;

gra.geometry = point;//设置画的几何对象是点

三：设置graphic的样式，可以自定义一个AnyChartSymbol这样的一个样式

继承com.esri.ags.symbols.MarkerSymbol，并重写

override public function draw(sprite:Sprite, geometry:Geometry,

                attributes:Object, map:Map) 这个方法

源码如下：

package widgets.Thematic
{
	import com.anychart.AnyChartFlex;
	import com.anychart.events.AnyChartPointEvent;
	import com.esri.ags.Map;
	import com.esri.ags.geometry.Geometry;
	import com.esri.ags.geometry.MapPoint;
	import com.esri.ags.symbols.MarkerSymbol;
	import com.geok.util.$;
	
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.GradientType;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DropShadowFilter;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.sampler.NewObjectSample;
	
	import mx.rpc.events.ResultEvent;
	
	import spark.components.Label;
	
	import uk.co.teethgrinder.Chart;
	
	public class AnyChartSymbol extends com.esri.ags.symbols.MarkerSymbol
	{
		
		private var _ChartWidth:int = 20; //行 
		private var _ChartHeight:int = 40; //列
		
		private var anySprite:AnyChartFlex;
		
		private var _ChartObj:Object;
		
		private var _ChartUrl:String;
		
		public var clickCallbackFunction:Function;
		public var selectCallbackFunction:Function;
		
		public function get ChartUrl():String
		{
			return _ChartUrl;
		}

		public function set ChartUrl(value:String):void
		{
			_ChartUrl = value;
		}

		public function AnyChartSymbol(){
		    super(); 
		}
		
	
		
		/**
		 * 宽度
		 */
		public function get ChartWidth():int
		{
			return this._ChartWidth
		}
		
		public function set ChartWidth(value:int):void{
			_ChartWidth = value;
		}
		
		
		/**
		 * 高度
		 */
		public function get ChartHeight():int
		{
			return this._ChartHeight
		}
		
		public function set ChartHeight(value:int):void{
			_ChartHeight = value;
		}
		
		/**
		 * 数据源
		 */
		public function get ChartObj():Object
		{
			return this._ChartObj;
		}
		public function set ChartObj(value:Object):void{
			_ChartObj = value;
		}
		
		
		
		
        override public function draw(sprite:Sprite, geometry:Geometry,
                attributes:Object, map:Map):void {
			
			var _self:AnyChartSymbol = this;
			
            const mapPoint:MapPoint = MapPoint(geometry); 
			sprite.graphics.clear();
            sprite.x = toScreenX(map,mapPoint.x)-ChartWidth/2;
            sprite.y = toScreenY(map,mapPoint.y)-ChartHeight/2; 
			if(anySprite==null)
			{
				anySprite = new AnyChartFlex();
				anySprite.width =ChartWidth;
				anySprite.height=ChartHeight;
				anySprite.addEventListener(AnyChartPointEvent.CLICK,function(event:AnyChartPointEvent):void{
					_self.clickCallbackFunction.call(_self,event); 				
				});
				
				anySprite.addEventListener(AnyChartPointEvent.SELECT,function(event:AnyChartPointEvent):void{
					_self.selectCallbackFunction.call(_self,event); 				
				});
				
				
				sprite.addChild(anySprite);
			//	anySprite.chartData = ChartObj;
				$.XMLPost(ChartUrl,loadChart);
				function loadChart(event:ResultEvent):void{
					var xml:XML = new XML(event.result.toString());   
					anySprite.anychartXML = xml;
				}
			};
        }
}
}

 

四：设置anychartsymbol的样式以及回调方法

var sy:AnyChartSymbol = new AnyChartSymbol();
			var url:String = chartUrl;
			sy.ChartHeight = chartHeight;
			sy.ChartWidth = chartWidth;
			sy.ChartUrl = chartUrl;
			
			sy.clickCallbackFunction = function(event:AnyChartPointEvent):void{
				var name:String = event.pointName;
				var yvalue:Number = event.y;
				var xvalue:Number = event.x;
				var value:Number =  event.value;
				
				var obj:Object = new Object();
				obj.name = event.pointName;
				obj.xvalue = xvalue;
				obj.yvalue = yvalue;
				obj.vaue = value;
				ExternalInterface.call(mouseClick as String,obj);
			}

 

五：设置graphic的样式，并添加到图层当中

gra.symbol = sy;

graphicsLayer.add(gra);