`

地图上绘制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);

 

 

 

分享到:
评论

相关推荐

    flex应用anychart

    而AnyChart,作为一个跨平台的JavaScript图表库,能够无缝地与Flex结合,为Flex应用提供高质量、高性能的图表功能。 集成AnyChart到Flex应用的过程并不复杂。在提供的压缩包文件“AnyChartFlexComponent.swc”中,...

    百度地图绘制多边形几何图形并保存坐标转成覆盖物

    本话题聚焦于如何使用百度地图API来绘制多边形几何图形,并将这些图形的坐标保存,以便后续转化为地图上的覆盖物。下面将详细阐述这一过程。 首先,我们要了解百度地图API的核心功能。百度地图API提供了丰富的地图...

    百度地图js版api几何图形绘制保存到数据库并展示

    总的来说,"百度地图js版api几何图形绘制保存到数据库并展示"这个项目涵盖了前端地图交互、数据序列化、网络通信、数据库操作等多个技术领域。掌握这些知识点,对于开发基于地理位置的应用程序是非常重要的。通过...

    arcgis及supermap Flex绘制军标源码

    通过阅读并理解提供的"MXML"文件,你可以看到如何将ArcGIS或SuperMap的API与Flex的绘图功能结合起来,实现军标在地图上的动态渲染。 总结,ArcGIS和SuperMap Flex结合使用,可以创建功能强大的在线军事地图应用。...

    SuperMapC++组件--地图和图层回调自定义绘制示例代码

    本示例主要探讨如何使用SuperMap C++组件进行地图和图层的回调自定义绘制,这对于创建定制化的GIS应用至关重要。下面将详细解释这一过程。 首先,地图和图层的自定义绘制涉及到的主要概念有: 1. 地图(Map):地图...

    flex 百度地图 实例下载

    3. **HTMLBridge组件**:Flex中的HTMLBridge是连接Flash Player与HTML页面的桥梁,它允许Flex应用执行JavaScript代码并接收回调。在本实例中,我们需要通过HTMLBridge调用百度地图的JavaScript API。 4. **地图显示...

    c# gdi+ 地图绘制

    地图上的水域、陆地等颜色填充,可以通过FillPolygon或FillRectangle等方法实现。 其次,**读取坐标点**是地图绘制的基础。坐标点通常表示为经纬度,需要进行适当的转换才能在二维屏幕上正确显示。这涉及到地理坐标...

    Flex3实现的谷歌地图实例

    描述中提到的"包含一些Flex下绘制矢量图形的小示例"可能是指在地图上添加自定义的矢量图形,如图标或路径。在Flex中,可以使用Graphics类提供的绘图方法,如beginFill(), moveTo(), lineTo()等来绘制矢量图形。这些...

    基于d3js的一个地图绘制工具

    **标题解析:** “基于d3js的一个地图绘制工具”是指使用D3.js库来创建一个专门用于绘制地图的应用程序。...以上就是基于d3.js的地图绘制工具的相关知识点,学习并掌握这些内容将有助于构建和理解类似的应用程序。

    使用 html js 在地图上绘制网格

    使用 html js 在地图上绘制网格

    Flex地图编辑技术

    - 添加新特征:用户可以在地图上绘制新的地理要素,如点、线和多边形。 - 修改特征属性:编辑现有特征的属性信息,如添加注释、分类和元数据。 - 删除特征:根据需求,用户可以删除不需要的地理要素。 - 移动和...

    arcgis for flex绘制直线,曲线,军标等

    本文将深入探讨如何使用ArcGIS for Flex API在地图上绘制直线、曲线以及军标。 1. 绘制直线 在ArcGIS for Flex中,直线的绘制主要通过Graphics对象实现。首先,我们需要创建一个Graphic对象,并设置其几何形状为...

    JS高德地图模拟驾车路线规划绘制代码

    本文将深入探讨如何使用JS高德地图API来模拟驾车路线规划并绘制代码,以便开发者能够更好地理解和应用这项技术。 首先,我们要理解高德地图API的基本用法。在JavaScript中,我们需要引入高德地图的库文件,这通常...

    地图上绘制点和连线

    这些API提供了JavaScript库,允许开发者在网页上创建交互式地图,并在地图上添加标记(Markers)来表示特定的经纬度位置。例如,使用Google Maps API,你可以创建一个新的Marker对象,指定其位置(经度,纬度),并...

    flex 地图 画圆

    在Flex中实现地图画圆,主要涉及到图形绘制和地理坐标系统两个关键概念。 1. **图形绘制**:Flex提供了一个强大的图形绘图库,即Flash Player的Stage3D API,它允许开发者在舞台上创建和操作自定义图形。通过`...

    高德地图绘制多边形.zip

    本示例"高德地图绘制多边形.zip"就是专门针对这个需求而设计的,它包含了集成高德地图并进行多边形绘制的示例代码。 首先,我们要了解如何使用高德地图API。高德地图SDK为开发者提供了丰富的接口,包括地图显示、...

    js高德地图驾车路线绘制代码.zip

    本项目中的"js高德地图驾车路线绘制代码.zip"是一个实例,展示了如何利用高德地图API来模拟驾车路线规划并绘制在网页上。下面我们将详细探讨这一过程涉及的关键知识点。 1. 高德地图API的引入:首先,你需要在HTML...

    Android ---------高德卫星地图绘制多个点和点的点击事件自定义弹窗

    高德地图API提供了一套完整的解决方案,使得开发者能够轻松地在卫星地图上绘制多个点,并实现点的点击事件来展示自定义弹窗。本文将深入探讨如何实现这一功能。 首先,我们需要集成高德地图SDK到项目中。这通常包括...

    vue2用高德地图实现绘制多边形电子围栏

    vue2用高德地图实现绘制多边形电子围栏

    vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑

    1:实现对圆形、多边形、点标记、折线 等的绘制;...5:支持根据图形数据显示到地图上,进行后续操作(删除,编辑); 6:支持获取绘制后的所有覆盖物数据,并返回; 7:支持封装为单个组件,多处调用;

Global site tag (gtag.js) - Google Analytics