flex中通过sprite在地图上画柱状图主要代码

1.主要代码:

var sprite:Sprite = new Sprite();
     var columnSys:ColumnSymbol = new ColumnSymbol();
     var fieldArr:Array = new Array("绿标总数","黄标总数");
     var colorArr:Array = new Array("0x00ff00","0xffff00");
     columnSys.Fields = fieldArr;
     columnSys.Colors = colorArr;
     columnSys.MaxValue = Number(hftjNum);
     var gra:Graphic = new Graphic(mpPoint,columnSys,Obj);

2.引用的类ColumnSymbol(主要有二维的圆柱、方柱和三维的圆柱、方柱):

public class ColumnSymbol extends Symbol
 {
  private var _fields:Array;
  private var _colors:Array;
  private var _color:uint = 0x333333;
  private var _maxvalue:Number;
  private var _columnWidth:Number = 20;
  private var _maxheight:Number = 10;
  
  public function ColumnSymbol()
  {
   super();
  }
  
  public function get Fields():Array
  {
   return this._fields;
  }
  
  public function set Fields(value:Array):void
  {
   this._fields = value;
  }
  
  public function get Colors():Array
  {
   return this._colors;
  }
  
  public function set Colors(value:Array):void
  {
   this._colors = value;
  }
  
  public function get Color():uint
  {
   return this._color;
  }
  
  public function set Color(value:uint):void
  {
   this._color = value;
  }
  
  public function get MaxValue():Number
  {
   return this._maxvalue;
  }
  
  public function set MaxValue(value:Number):void
  {
   this._maxvalue = value;
  }

override public function draw(sprite:Sprite, geometry:Geometry, attributes:Object, map:Map):void
  {
   if (!geometry) return;
   if (!(geometry is MapPoint)) return;
   var point:MapPoint = (geometry as MapPoint);
   sprite.graphics.clear();
   removeAllChildren(sprite);
   this.drawColumn(sprite,attributes,map,point);
  }
  
  private function drawColumn(sprite:Sprite,attributes:Object, map:Map, point:MapPoint):void
  {
   var h:Number = this._maxheight;
   var w:Number = this._fields.length * _columnWidth;
   sprite.x = Math.ceil((toScreenX(map,point.x) - w / 2));
   sprite.y = Math.ceil((toScreenY(map,point.y) - w / 2));
   sprite.width = w;
   sprite.height = h + 30;
   var columnHeight:Number = 0;
   var columnX:Number = 30;
   var columnY:Number = 0;
   for (var j:uint = 0; j < _fields.length; j++)
   {
    var val:Number = attributes[_fields[j].toString()];
    
    columnHeight = val * _maxheight / _maxvalue;
    columnY = _maxheight - columnHeight + 5;
    var color:uint = this._colors[j];
    sprite.graphics.lineStyle(null,0xffffff);
    
    //画平面柱子
    sprite.graphics.beginFill(color);
    sprite.graphics.drawRect(columnX,columnY,_columnWidth,columnHeight);
    sprite.graphics.endFill();
    
    //增加立体效果
    drawColumn3D(sprite,columnX,columnY,_columnWidth,columnHeight,color);
    columnX += _columnWidth;
    
    var dy2:Number = _columnWidth * Math.cos(Math.PI/6);
    var _textField:TextField = new TextField();
    _textField.text = val.toString();
    _textField.x = columnX - 10;
    _textField.y = columnY - dy2;
    _textField.width = 15;
    _textField.height = 15;
    _textField.visible = true;
    var _textFormat:TextFormat = new TextFormat();
    _textFormat.size = 10;
    _textField.setTextFormat(_textFormat);
    sprite.addChild(_textField);
   }
  }

private function drawColumn3D(sprite:Sprite,x:Number,y:Number,w:Number,h:Number, color:uint):void
  {
   var dw:Number = w * Math.sin(Math.PI/6);
   var dx:Number = w * Math.sin(Math.PI/6);
   var dy:Number = w * Math.cos(Math.PI/6);
   sprite.graphics.beginFill(color);
   sprite.graphics.moveTo(x,y);
   sprite.graphics.lineTo(x + dx,y-dy);
   sprite.graphics.lineTo(x + dx + w,y - dy);
   sprite.graphics.lineTo(x + w,y);
   sprite.graphics.lineTo(x,y);
   sprite.graphics.endFill();
   sprite.graphics.beginFill(color);
   sprite.graphics.moveTo(x + w,y);
   sprite.graphics.lineTo(x + dx + w,y - dy);
   sprite.graphics.lineTo(x + dx + w,y + h - dy);
   sprite.graphics.lineTo(x + w,y + h);
   sprite.graphics.lineTo(x + w,y);
   sprite.graphics.endFill();
  }
  
  public function drawCylinde(sprite:Sprite,attributes:Object, map:Map, point:MapPoint):void
  {
   var gap:Number = 0;
   var h:Number = this._maxheight;
   var w:Number = this._fields.length * (_columnWidth + gap);
   sprite.x = Math.ceil((toScreenX(map,point.x) - w / 2));
   sprite.y = Math.ceil((toScreenY(map,point.y) - w / 2));
   sprite.width = w;
   sprite.height = h;
   var columnHeight:Number = 0;
   var columnX:Number = gap / 2;
   var columnY:Number = 0;
   for (var j:uint = 0; j < _fields.length; j++)
   {
    var val:Number = attributes[_fields[j].toString()];
    columnHeight = val * _maxheight / _maxvalue;
    columnY = _maxheight - columnHeight;
    var color:uint = this._colors[j];
    sprite.graphics.lineStyle(null,0xffffff,0);
    sprite.graphics.beginFill(color);
    sprite.graphics.drawRect(columnX,columnY,_columnWidth,columnHeight);
    sprite.graphics.endFill();
    drawCylindeU(sprite,columnX,columnY,_columnWidth,columnHeight,color);
    columnX += _columnWidth + gap;
   }
  }
  
  private function drawCylindeUp(sprite:Sprite,x:Number,y:Number,w:Number,h:Number, color:uint):void
  {
   var dw:Number = w * Math.sin(Math.PI/6);
   var dx:Number = w * Math.sin(Math.PI/6);
   var dy:Number = w * Math.cos(Math.PI/6);
   sprite.graphics.beginFill(color);
   sprite.graphics.moveTo(x,y);
   sprite.graphics.lineTo(x + dx,y-dy);
   sprite.graphics.lineTo(x + dx + w,y - dy);
   sprite.graphics.lineTo(x + w,y);
   sprite.graphics.lineTo(x,y);
   sprite.graphics.endFill();
   sprite.graphics.beginFill(color);
   sprite.graphics.moveTo(x + w,y);
   sprite.graphics.lineTo(x + dx + w,y - dy);
   sprite.graphics.lineTo(x + dx + w,y + h - dy);
   sprite.graphics.lineTo(x + w,y + h);
   sprite.graphics.lineTo(x + w,y);
   sprite.graphics.endFill();
  }
  
  private function drawCylindeU(sprite:Sprite,x:Number,y:Number,w:Number,h:Number, color:uint):void
  {
   var dy:Number = w * Math.cos(Math.PI/6);
   sprite.graphics.lineStyle(0,0xffffff,0.5);
   sprite.graphics.beginFill(color);
   sprite.graphics.drawEllipse(x,y - (dy / 2),w, dy);
   sprite.graphics.drawEllipse(x,y + h - (dy / 2),w, dy);
   sprite.graphics.endFill();
  }

private function drawCylindeD(sprite:Sprite,x:Number,y:Number,w:Number,h:Number, color:uint):void
  {
   var dy:Number = w * Math.cos(Math.PI/6);
   y = y + h;
   sprite.graphics.lineStyle(0,0xffffff,0.5);
   sprite.graphics.beginFill(color);
   sprite.graphics.drawEllipse(x,y - (dy / 2),w, dy);
   sprite.graphics.endFill();
  }
 }

flex中通过sprite在地图上画柱状图主要代码

时间: 2024-10-10 07:44:15

flex中通过sprite在地图上画柱状图主要代码的相关文章

Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示

注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定点的定位以及附加信息的展示.这样我们的项目就更加完善了,从宏观上看到每个点,从微观上分析每个点的不同.这种方法往往在大数据可视化方面很有效果. Angularjs+node+Mysql实现地图上的多点标注原文地址:http://www.cnblogs.com/DonaHero/p/5815595.h

(十八)WebGIS中清空功能和地图定位功能的设计以及实现

1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最简单的控制就是能对元素有选择的进行清空删除.在本节中,还将介绍WebGIS中另外一个常用功能,即地图定位功能.具体描述便是:当输入一个坐标点后,能够将地图缩放到该点处.下面我便就以上两个功能展开此章节的内容. 2.清空功能 2.1设计思路 根据功能点,我们可以将清空分为如下几个情形: a.清空某个或者指定个数元素 b.清空某类或多类元素 c.清空所有元素 在之前的矢量图层原理章节中,我已经就WebGIS中的矢量图层原理做了详细

百度地图的使用之获取数据库表中信息的坐标点显示在地图上

//通用封装好的js: var map = new BMap.Map("container"); //建树Map实例 var point = new BMap.Point(103.976032, 33.845509); // 建树点坐标 map.centerAndZoom(point, 6); // 初始化地图,设置中心点坐标和地图级别. //地图事件设置函数: map.enableDragging(); //启用地图拖拽事件,默认启用(可不写) map.enableScrollWhe

Ios 高德地图 地图上添加多个大头针 怎么在复用队列中知道我单击的是哪一个大头针

//创建大头针对象     MAPointAnnotation *pointAnnotation = [[MAPointAnnotation alloc] init];     //插入大头针的位置     pointAnnotation.coordinate = CLLocationCoordinate2DMake(39.989631, 116.481018);     //大头针的标题     pointAnnotation.title = @"方恒国际";     //大头针的子

flex中dispatchEvent的用法(自定义事件) .

Evevt和EventDispatcher类在as3的事件机制中是很重要的角色,dispatchEvent()是EventDispatcher类的一个事件发送方法,它可以发送出Event类或其子类的实例,在as3中所有的显示对象都可以发送事件,因为as3中所有的显示对象都是EventDispatcher子类DisplayObject的实例. 发送事件有三种方式:继承EventDispatcher,如sprite等显示对象.复合EventDispatcher或其子类.实现IEventDispatc

002 Leaflet 第二个demo 地图上的矩形拉框选择

一.使用到的文件 leaflet-src.js leaflet.css label相关js, 可以从以下网址下载 https://github.com/Leaflet/Leaflet.label 需要leaflet的相关插件都可以从http://leafletjs.com/plugins.html  leafletjs.com的插件列表中下载 二.源码 <!DOCTYPE html> <html> <head> <link rel="stylesheet

通过地图上两个点的经纬度测算两点的距离

根据两点经纬度计算距离 这些经纬线是怎样定出来的呢?地球是在不停地绕地轴旋转(地轴是一根通过地球南北两极和地球中心的 假想线),在地球中腰画一个与地轴垂直的大圆圈,使圈上的每一点都和南北两极的距离相等,这个圆圈 就叫作"赤道".在赤道的南北两边,画出许多和赤道平行的圆圈,就是"纬圈":构成这些圆圈的线段, 叫做纬线.我们把赤道定为纬度零度,向南向北各为90度,在赤道以南的叫南纬,在赤道以北的叫北纬. 北极就是北纬90度,南极就是南纬90度.纬度的高低也标志着气候的冷

在TWaver的Tree节点上画线

论坛上有同学提出如何在tree上画引导线,之前我们Flex已经实现此功能,现在最新版的HTML5也将添加此功能.先看看效果: 详细的使用方法可以参考我们开发手册中可视化视图组件#Tree引导线一章,下面贴出一个Demo,没有图标,没有框选.仅供参考: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 4

iOS:实现MKAnnotation协议,在地图上设置大头针,点击显示具体的位置信息

如何添加大头针(地标): 通过MapView的addAnnotation方法可以添加一个大头针到地图上 通过MapView的addAnnotations方法可以添加多个大头针到地图上 –(void)addAnnotation:(id <MKAnnotation>)annotation; 说明:需要传入一个遵守了MKAnnotation协议的对象 基本步骤为: <1>新建一个遵守MKAnnotation协议的类: @interface MyAnnotation : NSObject