SuperMap.Feature.Theme.Graph

统计专题要素基类,此类定义了统计专题要素基础模型,具体的图表模型通过继承此类,在子类中实现 assembleShapes 方法。

统计专题要素模型采用了可视化图形大小自适应策略,用较少的参数控制着图表诸多图形,图表配置对象 SuperMap.Feature.Theme.Graph::setting 的基础属性只有 7 个, 它们控制着图表结构、值域范围、数据小数位等基础图表形态。构成图表的图形必须在图表结构里自适应大小。

此类不可实例化,此类的可实例化子类必须实现 assembleShapes() 方法。

Inherits

Summary
SuperMap.Feature.Theme.Graph 统计专题要素基类,此类定义了统计专题要素基础模型,具体的图表模型通过继承此类,在子类中实现 assembleShapes 方法。
Properties
chartBounds {SuperMap.Bounds} {ReadOnly} 图表 Bounds 随着 lonlat、XOffset、YOffset 更新,注意 chartBounds 是图表像素范围,不是地理范围。
chartBox {Array{Number}} {ReadOnly} 专题要素(图表)区域,即图表框,长度为 4 的一维数组,数组的 4 个元素依次表示图表框左端 x 坐标值、 下端 y坐标值、 右端 x坐标值、 上端 y 坐标值;[left, bottom, right, top]。
dataValues {Array{Number}} 图表展示的数据值,通过 fields 从数据(feature)属性中获得。
dataViewBox {Array{Number}} {ReadOnly} 数据视图框,长度为 4 的一维数组,[left, bottom, right, top]。
DVBCenterPoint {Array{Number}} {ReadOnly} 数据视图框中心点,长度为 2 的一维数组,第一个元素表示 x 坐标,第二个元素表示 y 坐标。
DVBCodomain {Array{Number}} {ReadOnly} 数据视图框的内允许展示的数据值域,长度为 2 的一维数组,第一个元素表示值域下限,第二个元素表示值域上限。 dataViewBox 中允许的数据范围,对数据溢出值域范围情况的处理需要在 assembleShapes 中进行。
DVBHeight {Number} {ReadOnly} 数据视图框高度。
DVBOrigonPoint {Array{Number}} {ReadOnly} 数据视图框原点,数据视图框左上角点,长度为 2 的一维数组,第一个元素表示 x 坐标,第二个元素表示 y 坐标。
DVBParameter {Array{Number}} {ReadOnly} 数据视图框参数,长度为 4 的一维数组(数组元素值 >= 0),[leftOffset, bottomOffset, rightOffset, topOffset],chartBox 内偏距值。 此属性用于指定数据视图框 dataViewBox 的范围。
DVBUnitValue {String} {ReadOnly} 单位值。在 assembleShapes() 中初始化其具体意义,例如:饼图的 DVBUnitValue 可以定义为”360/数据总和” , 折线图的 DVBUnitValue 可以定义为 “DVBCodomain/DVBHeight”。
DVBWidth {Number} {ReadOnly} 数据视图框宽度。
fields {Array{String}} 数据( SuperMap.Feature.Vector )属性字段。
height {Number} {ReadOnly} 专题要素(图表)高度 ,必设属性。
origonPoint {Array{Number}} {ReadOnly} 专题要素(图表)原点,图表左上角点像素坐标,是长度为 2 的一维数组,第一个元素表示 x 坐标,第二个元素表示 y 坐标。
setting {Object} 图表配置对象,该对象控制着图表的可视化显示。
shapeFactory {SuperMap.Feature.ShapeFactory} 内置的图形工厂对象,调用其 createShape 方法创建图形。
width {Number} {ReadOnly} 专题要素(图表)宽度 ,必设属性。
XOffset {Number} {ReadOnly} 专题要素(图表)在 X 方向上的偏移值,单位像素。
YOffset {Number} {ReadOnly} 专题要素(图表)在 Y 方向上的偏移值,单位像素。
Constructor
SuperMap.Feature.Theme.Graph 创建一个矢量专题要素。
Functions
assembleShapes 图形装配函数。抽象方法,可视化子类必须实现此方法。
destroy 销毁专题要素。
initBaseParameter 初始化专题要素(图表)基础参数。 在调用此方法前,此类的图表模型相关属性都是不可用的 ,此方法在 assembleShapes 函数中调用。
shapesConvertToRelativeCoordinate 将(构成图表)图形的节点转为相对坐标表示,此函数必须且只能在 assembleShapes() 结束时调用。
SuperMap.Feature.Theme.getDataValues 根据字段名数组获取指定数据(feature)的属性值数组。属性值类型必须为 Number。

Properties

shapeFactory

{SuperMap.Feature.ShapeFactory} 内置的图形工厂对象,调用其 createShape 方法创建图形。

setting

{Object} 图表配置对象,该对象控制着图表的可视化显示。

下面是此配置对象的 7 个基础可设属性:

Symbolizer properties

width {Number} 专题要素(图表)宽度,必设参数。
height {Number} 专题要素(图表)高度,必设参数。
codomain {Array{Number}} 值域,长度为 2 的一维数组,第一个元素表示值域下限,第二个元素表示值域上限,必设参数。
XOffset {Number} 专题要素(图表)在 X 方向上的偏移值,单位像素。
YOffset {Number} 专题要素(图表)在 Y 方向上的偏移值,单位像素。
dataViewBoxParameter {Array{Number}} 数据视图框 dataViewBox 参数, 它是指图表框 chartBox (由图表位置、图表宽度、图表高度构成的图表范围框)在左、下,右,上四个方向上的内偏距值。
decimalNumber {Number} 数据值数组 dataValues 元素值小数位数,数据的小数位处理参数,取值范围:[0, 16]。如果不设置此参数,在取数据值时不对数据做小数位处理。

除了以上 7 个基础属性,此对象的可设属性在不同子类中有较大差异,不同子类中对同一属性的解释也可能不同。 请在此类的子类中查看 setting 对象的可设属性和属性含义。

origonPoint

{Array{Number}} {ReadOnly} 专题要素(图表)原点,图表左上角点像素坐标,是长度为 2 的一维数组,第一个元素表示 x 坐标,第二个元素表示 y 坐标。

chartBox

{Array{Number}} {ReadOnly} 专题要素(图表)区域,即图表框,长度为 4 的一维数组,数组的 4 个元素依次表示图表框左端 x 坐标值、 下端 y坐标值、 右端 x坐标值、 上端 y 坐标值;[left, bottom, right, top]。

chartBounds

{SuperMap.Bounds} {ReadOnly} 图表 Bounds 随着 lonlat、XOffset、YOffset 更新,注意 chartBounds 是图表像素范围,不是地理范围。

width

{Number} {ReadOnly} 专题要素(图表)宽度 ,必设属性。

height

{Number} {ReadOnly} 专题要素(图表)高度 ,必设属性。

XOffset

{Number} {ReadOnly} 专题要素(图表)在 X 方向上的偏移值,单位像素。

YOffset

{Number} {ReadOnly} 专题要素(图表)在 Y 方向上的偏移值,单位像素。

DVBParameter

{Array{Number}} {ReadOnly} 数据视图框参数,长度为 4 的一维数组(数组元素值 >= 0),[leftOffset, bottomOffset, rightOffset, topOffset],chartBox 内偏距值。 此属性用于指定数据视图框 dataViewBox 的范围。

dataViewBox

{Array{Number}} {ReadOnly} 数据视图框,长度为 4 的一维数组,[left, bottom, right, top]。

dataViewBox 是统计专题要素最核心的内容,它负责解释数据在一个像素区域里的数据可视化含义, 这种含义用可视化图形表达出来,这些表示数据的图形和一些辅助图形组合在一起构成统计专题图表。

DVBCodomain

{Array{Number}} {ReadOnly} 数据视图框的内允许展示的数据值域,长度为 2 的一维数组,第一个元素表示值域下限,第二个元素表示值域上限。 dataViewBox 中允许的数据范围,对数据溢出值域范围情况的处理需要在 assembleShapes 中进行。

DVBCenterPoint

{Array{Number}} {ReadOnly} 数据视图框中心点,长度为 2 的一维数组,第一个元素表示 x 坐标,第二个元素表示 y 坐标。

DVBUnitValue

{String} {ReadOnly} 单位值。在 assembleShapes() 中初始化其具体意义,例如:饼图的 DVBUnitValue 可以定义为”360/数据总和” , 折线图的 DVBUnitValue 可以定义为 “DVBCodomain/DVBHeight”。

DVBOrigonPoint

{Array{Number}} {ReadOnly} 数据视图框原点,数据视图框左上角点,长度为 2 的一维数组,第一个元素表示 x 坐标,第二个元素表示 y 坐标。

DVBWidth

{Number} {ReadOnly} 数据视图框宽度。

DVBHeight

{Number} {ReadOnly} 数据视图框高度。

fields

{Array{String}} 数据( SuperMap.Feature.Vector )属性字段。

dataValues

{Array{Number}} 图表展示的数据值,通过 fields 从数据(feature)属性中获得。

Constructor

SuperMap.Feature.Theme.Graph

创建一个矢量专题要素。

Parameters

data {SuperMap.Feature.Vector} 用户数据,必设参数。
layer {SuperMap.Layer.Theme} 此专题要素所在图层,必设参数。
fields {Array{String}} data 中的参与此图表生成的字段名称,必设参数。
setting {Object} 图表配置对象,必设参数。
lonlat {SuperMap.LonLat} 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。

Returns

{SuperMap.Feature.Theme.Graph} 返回一个统计专题要素。

Functions

destroy

destroy: function()

销毁专题要素。

initBaseParameter

initBaseParameter: function()

初始化专题要素(图表)基础参数。 在调用此方法前,此类的图表模型相关属性都是不可用的 ,此方法在 assembleShapes 函数中调用。

调用此函数关系到 setting 对象的以下属性

Symbolizer properties

width {Number} 专题要素(图表)宽度,必设参数。
height {Number} 专题要素(图表)高度,必设参数。
codomain {Array{Number}} 值域,长度为 2 的一维数组,第一个元素表示值域下限,第二个元素表示值域上限,必设参数。
XOffset {Number} 专题要素(图表)在 X 方向上的偏移值,单位像素。
YOffset {Number} 专题要素(图表)在 Y 方向上的偏移值,单位像素。
dataViewBoxParameter {Array{Number}} 数据视图框 dataViewBox 参数, 它是指图表框 chartBox (由图表位置、图表宽度、图表高度构成的图表范围框)在左、下,右,上四个方向上的内偏距值。
decimalNumber {Number} 数据值数组 dataValues 元素值小数位数,数据的小数位处理参数,取值范围:[0, 16]。如果不设置此参数,在取数据值时不对数据做小数位处理。

Returns

{Boolean} 初始化参数是否成功。

shapesConvertToRelativeCoordinate

shapesConvertToRelativeCoordinate: function()

将(构成图表)图形的节点转为相对坐标表示,此函数必须且只能在 assembleShapes() 结束时调用。

assembleShapes

assembleShapes: function()

图形装配函数。抽象方法,可视化子类必须实现此方法。

重写此方法的步骤:

1.  图表的某些特殊配置项(setting)处理,例如多数图表模型需要重新指定 dataViewBoxParameter 的默认值。

2.  调用 initBaseParameter() 方法初始化模型属性值,此步骤必须执行,只有当 initBaseParameter 返回 true 时才可以允许进行后续步骤。

3.  计算图形参数,制作图形,图形组合。在组装图表过程中,应该特别注意数据视图框单位值的定义、数据值溢出值域范围的处理和图形大小自适应。

4.  调用 shapesConvertToRelativeCoordinate() 方法,将图形的坐标值转为相对坐标,此步骤必须执行。

子类实现 assembleShapes() 接口的步骤示例:

assembleShapes: function(){
   // 第一步:图表的某些特殊配置项(setting)处理,例如多数图表模型需要重新指定 dataViewBoxParameter 的默认值。此步骤是非必须过程。

   // 图表配置对象
   var sets = this.setting;
   // 默认数据视图框,这里展示在使用坐标轴和不使用坐标轴情况下对数据视图框参数赋予不同的默认值
   if(!sets.dataViewBoxParameter){
         if(typeof(sets.useAxis) === "undefined" || sets.useAxis){
             sets.dataViewBoxParameter = [45, 15, 15, 15];
         }
         else{
                 sets.dataViewBoxParameter = [5, 5, 5, 5];
         }
   }

   // 第二步:初始化图表模型基本参数,只有在图表模型基本参数初始化成功时才可模型相关属性,如 this.dataViewBox、 this.DVBCodomain等。此步骤是必须过程。
   if(!this.initBaseParameter()) return;

   // 第三步:用图形组装图表,在组装图表过程中,应该特别注意数据视图框单位值的定义、数据值溢出值域范围的处理和图形大小自适应。
   // 定义图表数据视图框中单位值的含义,下面行代码表示将数据视图框单位值定义为数据视图框高度上每像素代表的数据值
   this.DVBUnitValue =  (this.codomain[1] - this.codomain[0])/this.DVBHeight;
   var uv = this.DVBUnitValue;

   // 图形参数计算代码......

   // 关于图形装配,实际上就是利用图形工程对象 this.shapeFactory 的 createShape() 方法通过图形参数对象创建可视化的图形对象,并把这些图形对象按序添加到模型的图形库(his.shapes)中。下面的代码演示创建一个面图形参数对象,并允许通过图形配置对象设置图形的 style 和 highlightStyle,
   var barParams = new SuperMap.Feature.ShapeParameters.Polygon(poiLists);
   barParams.style = sets.barStyle? sets.barStyle:{fillColor: "lightblue"};
   barParams.highlightStyle = sets.barHoverStyle? sets.barHoverStyle:{fillColor: "blue"};
   // 图形携带数据ID信息
   barParams.refDataID = this.data.id;
   // 创建图形并添加到图表图形数组中
   this.shapes.push(this.shapeFactory.createShape(barParams));

   // 第四步:调用 shapesConvertToRelativeCoordinate() 方法,将图形库(his.shapes)中的图形转为由相对坐标表示的图形,客户端统计专题图模块从结构上要求可视化图形使用相对坐标,assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数。此步骤是必须过程。
   this.shapesConvertToRelativeCoordinate();
},

SuperMap.Feature.Theme.getDataValues

SuperMap.Feature.Theme.getDataValues = function( data,
fields,
decimalNumber )

根据字段名数组获取指定数据(feature)的属性值数组。属性值类型必须为 Number。

Parameters

data {SuperMap.Feature.Vector} 数据。
fields {Array} 字段名数组。
decimalNumber {Number} 小数位处理参数,对获取到的属性数据值进行小数位处理。

Returns

{Array} 字段名数组对应的属性数据值数组。

图形工厂类。
表示边界类实例。使用bounds之前需要设置left,bottom, right, top四个属性,这些属性的初始值为null。
矢量要素类。该类具有 Geometry 属性存放几何信息, attributes 属性存放非几何信息,另外还包含了 style 属性,用来定义矢量要素的样式, 其中,默认的样式在 SuperMap.Feature.Vector.style 类中定义,如果没有特别的指定将使用默认的样式,
destroy: function()
销毁专题要素。
initBaseParameter: function()
初始化专题要素(图表)基础参数。 在调用此方法前,此类的图表模型相关属性都是不可用的 ,此方法在 assembleShapes 函数中调用。
shapesConvertToRelativeCoordinate: function()
将(构成图表)图形的节点转为相对坐标表示,此函数必须且只能在 assembleShapes() 结束时调用。
assembleShapes: function()
图形装配函数。抽象方法,可视化子类必须实现此方法。
SuperMap.Feature.Theme.getDataValues = function( data,
fields,
decimalNumber )
根据字段名数组获取指定数据(feature)的属性值数组。属性值类型必须为 Number。
{Object} 图表配置对象,该对象控制着图表的可视化显示。
专题要素基类,此类不可实例化。
客户端专题图图层基类。
这个类用来表示经度和纬度对。
创建一个矢量专题要素。
Close