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

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 = http://www.mamicode.com/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 = http://www.mamicode.com/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();
  }
 }