`

地图上绘制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提供了丰富的地图...

    flex anychart一个完整的雷达图示例

    在这个场景下,我们关注的是“flex anychart”插件,它是一个强大的JavaScript图表库,用于创建交互式且灵活的数据可视化解决方案。本示例是一个使用flex anychart构建的雷达图,这种图表类型在比较多个变量或多组...

    百度地图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. **地图显示...

    Flex4绘制扇形

    `Shape`类是Flex中用于绘制图形的基本组件,而`Graphics`接口提供了各种绘图方法,如`beginFill()`、`moveTo()`、`lineTo()`和`endFill()`等,用于填充和描边路径。 创建扇形的基本步骤如下: 1. **创建Shape实例*...

    c# gdi+ 地图绘制

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

    高德地图实现绘制覆盖物,自定义右键菜单

    在高德地图API中,覆盖物是指可以在地图上绘制的各种图形,如点、线、面等。在这个项目中,主要涉及到的是绘制圆形、矩形和多边形。绘制圆形通常使用`AMap.Circle`类,通过指定中心点坐标、半径以及样式属性来创建。...

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

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

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

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

    详解C#委托,事件与回调函数

    回调函数是指在异步操作完成时回调的方法。例如,在网络请求完成时,需要回调一个方法来处理请求的结果。在 C# 中,回调函数可以使用委托来实现。 委托、事件和回调函数是 C# 中三个非常重要的概念,它们在编程中...

    matlab栅格地图绘制

    栅格地图是一种用二维数组表示地理空间数据的方法,每个数组元素代表地图上的一个特定区域或像素。在提供的描述中,我们看到的是一个用于创建太阳能光伏发电系统布局的示例,但这里我们将专注于理解如何在MATLAB中...

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

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

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

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

    地图上绘制点和连线

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

    flex 地图 画圆

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

    高德地图绘制多边形.zip

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

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

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

Global site tag (gtag.js) - Google Analytics