Class: Point

SuperMap.Feature.Theme.Point

Point graph.

new SuperMap.Feature.Theme.Point(data, layer, fields, setting, lonlat)

Point.js, line 6
Name Type Description
data SuperMap.Feature.Vector

User data.

layer SuperMap.Layer.Graph

The layer thematic elements in.

fields Array.<string>

data Fields name that generate graph.

setting SuperMap.Feature.Theme.Point.setting

Graph configure object.

lonlat SuperMap.LonLat optional

Location of thematic elements,default is the geographical elements bound center that data refer to.

Example
// pointStyleByCodomain Each element is an object containing information and domain and range corresponding to the style information, the object has three properties (must):
// start: range lower limit (included);
// end: range upper limit (not included);
// style: Data visualization graphics style, this style object can be set properties: .
// pointStyleByCodomain array like:
[
  {
    start:0,
    end:250,
    style:{
         fillColor:"#00CD00"
     }
 },
  {
    start:250,
    end:500,
    style:{
         fillColor:"#00EE00"
     }
 },
  {
    start:500,
    end:750,
    style:{
         fillColor:"#00FF7F"
     }
 },
  {
    start:750,
    end:1500,
    style:{
         fillColor:"#00FF00"
     }
 }
]

Extends

Members

chartBoundsSuperMap.Bounds

The bounds of the chart will be updated with lonlat, XOffset and YOffset, note: chartBounds is pixel range, not geographical range.

chartBoxArray.<number>

The thematic feature (chart) area, that is, the chart box, a one-dimensional array of length 4, the four elements of the array sequentially represent the x coordinate value at the left end of the chart frame,
the lower y coordinate value, the right end x coordinate value, and the upper y coordinate value; [left , bottom, right, top].

dataObject

{ReadOnly} User data, used to generate visible shape, and can define data format and type in the sub class. e.g.: <SuperMap.Feature.Vector> 。

dataValuesArray.<number>

Data values for representation, got by fields from the property of feature.

dataViewBoxArray.<number>

Data view frame parameters, an array with the length of 4(array element value >= 0), [left, bottom, right, top]. DataViewBox is the core content of the graph theme element. It is responsible for the interpretation of data visualization in a pixel region for the data, and the meaning is expressed by visual graphic. The graphics which represent the data and some auxiliary graphics are combined together to form a statistical thematic charts.

DVBCenterPointArray.<number>

Center of the data view frame, an array with the length of 2, the first one means x, the second one means y.

DVBCodomainArray.<number>

Data domain to show in the data view frame, an array with the length of 2, the first one means the minimum, the second one means the maximum. The processing for the data out of the range should be in assembleShapes.

DVBHeightnumber

Height of the data view frame.

DVBOrigonPointArray.<number>

Origin point of the data view frame, that is the upper left corner point, an array with the length of 2, the first one means x, the second one means y.

DVBParameterArray.<number>

Data view frame parameters, an array with the length of 4(array element value >= 0), [leftOffset, bottomOffset, rightOffset, topOffset], the inner offset value of chartBox. The property is used to specify the range of dataViewBox.

DVBUnitValuestring

Unit value. Initialized in assembleShapes(), e.g.:DVBUnitValue of the pie chart is ”360/data count value”, DVBUnitValue of the line chart is “DVBCodomain/DVBHeight”.

DVBWidthnumber

Width of the data view frame.

fieldsArray.<string>

The data {SuperMap.Feature.Vector} attribute fields.

heightnumber

Height of the theme elements(chart), required.

idstring

Unique identification of thematic elements

layerSuperMap.Layer.Theme

{ReadOnly} Thematic layer where thematic features are.

locationArray

Thematic feature pixel reference position. In general, it is determined by geographic reference. It is an array, the first element is x coordinate, and the second element is y coordinate.

Thematic feature geographic reference position. In sub class, it is assigned by user data (or geographic position parameter).

origonPointArray.<number>

Origin point of the theme elements(chart), that is the upper left corner point, an array with the length of 2, the first one means x, the second one means y.

origonPointOffsetArray.<number>

The origin offset of the data view box relative to the chart box is 2 dimensional array, the first element represents the X offset, and the second element represents the Y offset.

RelativeCoordinateboolean

Whether the figure has been calculated for the relative coordinates.

settingObject

Graph configuration object, which controls the visual display of the graph.

The embedded shape factory object, call its createShape method to create shapes.

shapeParametersObject

The current shape parameter object, the subclass object of <SuperMap.Feature.ShapeParameters>.

shapesArray

{ReadOnly} The visible shape array by thematic features. The order of the array controls the render.

widthnumber

Width of the theme elements(chart), required.

XOffsetnumber

Offset in X direction of the theme elements(chart), the unit is pixel.

YOffsetnumber

Offset in Y direction of the theme elements(chart), the unit is pixel.

Methods

inherited assembleShapes()

Graph.js, line 412

assembleShapes. Abstract methods, the visual child class must implement this method.
To rewrite the method, please follow the steps:

         1. Process some special configuration(setting). e.g., the dataViewBoxParameter default value should be set for most graphic models.<br>
         2. Call initBaseParameter() to initialize the model property value. This step must be performed. The following steps can be performed only when initBaseParameter returns true.<br>
         3. Calculate graph parameters, make graphics and graphic combination. In the assembly process of diagram, you should pay special attention to the definition of the unit values in data view frame, processing for the data out of range, and graphic size adaptive.<br>
         4. Call shapesConvertToRelativeCoordinate() method to convert graphics coordinate values to the relative coordinates, and this step must be performed.
Example
//Sample to realize the assembleShapes() interface in child class:
 assembleShapes: function(){
   // 1.Process some special configuration(setting). e.g., the dataViewBoxParameter default value should be set for most graphic models. Optional.

   // Graph configuration object
   var sets = this.setting;
   // The default data view box, which displays different default values for the data view box parameters in the case of the use of the coordinate axis and without the use of a coordinate axis.
   if(!sets.dataViewBoxParameter){
         if(typeof(sets.useAxis) === "undefined" || sets.useAxis){
             sets.dataViewBoxParameter = [45, 15, 15, 15];
         }
         else{
                 sets.dataViewBoxParameter = [5, 5, 5, 5];
         }
   }

   // 2. Initialize the basic parameters of chart model, only when the basic parameters are initialized successfully, other properties can be set, e.g, this.dataViewBox, this.DVBCodomain. Required.
   if(!this.initBaseParameter()) return;

   // 3. Make graphics and graphic combination. In the assembly process of diagram, you should pay special attention to the definition of the unit values in data view frame, processing for the data out of range, and graphic size adaptive.
   // Definition of the unit in the chart data view, below will define the unit as the pixel value of the height of the data view frame.
   this.DVBUnitValue =  (this.codomain[1] - this.codomain[0])/this.DVBHeight;
   var uv = this.DVBUnitValue;

   // Calculate graph parameters......

   // The assembly graph is to use the createShape () method of the engineering graphics object this.shapeFactory to create visual graphic objects,.
   //and add the graph objects sequentially to the graphics library(his.shapes). The following code demonstrates creating a region graphical parameter object, and setting the style and highlightStyle of the graph.
   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 of graph related data
   barParams.refDataID = this.data.id;
   // Create graph and add it to array
   this.shapes.push(this.shapeFactory.createShape(barParams));

   // 4 Call shapesConvertToRelativeCoordinate(), convert the graph in his.shapes to relative coordinates, which is needed by the client graph them module.
   // Call shapesConvertToRelativeCoordinate() with assembleShapes() only after the shapes are combined. Required.
   this.shapesConvertToRelativeCoordinate();
},

calculateXShapeInfo(){Object}

Point.js, line 165

calculate the graphic information on the X axis, this information is an object that contains two properties, property xPositions is a one-dimensional array that represents the pixel coordinates of the pattern in the X axis direction, if the graph has a certain width in the X direction, usually the center point of the graph in the X direction is the coordinate value of the figure in the X direction. width represents the width of the graph (special attention: the width of the point is always 0, not its diameter). graphical configuration object setting in this function can be set to properties:
xShapeBlank - {Array} xShapeBlank horizontal direction on the graph blank interval parameters. length for 2 of the array, the first element is the blank space between left of first figure and the left end of the data view box, the second element is the blank space between graphics.

Returns:
Type Description
Object If the calculation fails, return null; if successful, return to the X axis direction of the graphics information, this information is an object. xPositions - {Array} said graphics on the X axis coordinates of the pixel value, if graphics in the X direction with a certain width, usually graphics in the X direction the center point of the graphics in the X direction coordinate value.
width - {number} width represents the width of the graph (special note: the width of the point is always 0, not its diameter).

inherited constructor(data, layer){SuperMap.Feature.Theme}

Theme.js, line 14

The Constructor.

Name Type Description
data Object

User data which is used to generate visible shape. Required.

layer SuperMap.Layer.Theme

The layer the theme element is in, required.

Returns:
Type Description
SuperMap.Feature.Theme Return a thematic feature.

destroy()

Point.js, line 61

Disposes the resource. The property that references resource is set to null.

inherited getLocalXY(lonlat)

Graph.js, line 465

The geographic coordinates are converted to pixel coordinates.

Name Type Description
lonlat SuperMap.Lonlat

The geographical coordinates to be converted.

Returns:
Screen pixel coordinates.

inherited initBaseParameter(width, height, codomain, XOffset, YOffset, dataViewBoxParameter, decimalNumber){Boolean}

Graph.js, line 238

Initialize the basic parameters of the theme element (chart). Before calling this method, the graph model related properties are not available, this method is called in the assembleShapes function.
The related properties of the setting object are:

Name Type Description
width number

Width of the theme elements(chart), required.

height number

Height of the theme elements(chart), required.

codomain Array.<number>

Domain, an array with the length of 2, the first one is the minimum, the second one is the maximum value, required.

XOffset number optional

Offset in X direction of the theme elements(chart), the unit is pixel.

YOffset number optional

Offset in Y direction of the theme elements(chart), the unit is pixel.

dataViewBoxParameter Array.<number> optional

The data view frame dataViewBox parameters,
means four inner offset values in left, down, right, up direction of chartBox( constituted by chart position, chart width, chart height).

decimalNumber number optional

The decimal value of the data value array dataValues, decimal processing parameters, the range is: [0, 16]. If you do not set this parameter, the decimal will not be processed.

Returns:
Type Description
Boolean Whether the initialization is successful.

inherited resetLinearGradient()

Graph.js, line 367

When the relative coordinates of the chart are called in the resetLocation, the color of the gradient is recalculated.(The subclass implements this method at present for the gradient color of a two-dimensional histogram)

inherited resetLocation(lonlat){Array.<number>}

Graph.js, line 336

The location of the thematic element (Chart) is reset according to the geographic location lonlat.

Name Type Description
lonlat SuperMap.LonLat

The new pixel center position of the feature element.

Returns:
Type Description
Array.<number>
  • New feature element pixel reference position. The length of an array is 2, the first element to represent the X coordinates, the second elements to represent the Y coordinates.

inherited shapesConvertToRelativeCoordinate()

Graph.js, line 375

The node that will (constitute a graph) is converted to relative coordinates, which must be called at the end of the assembleShapes ().

Type Definitions

SuperMap.Feature.Theme.Point.settingObject

Properties:
Name Type Default Description
width number

Thematic elements (Graph) width.

height number

Thematic elements (Graph) height.

codomain Array.<number>

Charts allow the display of the data range, the length of two one-dimensional arrays, the first element is range lower limit, the second element is range limit, required parameters.

XOffset number optional

Thematic elements (graphs) offset value in the X direction, unit pixel.

YOffset number optional

Thematic elements (graphs) offset value in the Y direction, unit pixel.

dataViewBoxParameter Array.<number> optional

dataViewBox parameters. It refers to the chartBox (chartBox constituted by chart position, width chart, chart highly) in the left , down,right,up four direction within the offset value. When using the coordinate axis,the default value of dataViewBoxParameter is:[45, 15, 15, 15];When it is not used,the default value of dataViewBoxParameter is:[5, 5, 5, 5].

decimalNumber number optional

Data value array dataValues elements of the decimal value, the decimal processing parameters of data, range: [0, 16]. If you do not set this parameter in data value is not a digital data processing.

useBackground boolean optional

Whether to use Background box,default true

backgroundStyle SuperMap.Feature.ShapeParameters.Rectangle.style

Background style.

backgroundRadius Array.<number> [0, 0, 0, 0] optional

Rectangular corner radius of the background frame, you can use the array to specify the four corners of the fillet radius,Set: the radius of upper left, upper right, lower left and lower left corner in turn is: r1、r2、r3、r4 , backgroundRadius is [r1、r2、r3、r4 ]

xShapeBlank Array.<number>

Blank space parameters in horizontal direction. A three length array, the first element is the blank space between left of first figure and the left end of the data view box, the second element is the blank space between graphics.

axisStyle Object

Coordinate axis style.

axisUseArrow boolean false optional

Whether to use arrow axis.

axisYTick number 0 optional

Y axis scale

axisYLabels Array.<string> optional

Label group content on the Y axis, a tag sequence along the data view box left side from top to bottom, equidistant arrangement.For example["1000", "750", "500", "250", "0"].

axisYLabelsStyle SuperMap.Feature.ShapeParameters.Label.style optional

Y axis on the label group style.

axisYLabelsOffset Array.<number> 0 optional

Label group offset on Y axis. A 2 length array, the array of the first to represent the Y axis tag group lateral offset, the left is positive, the default value: 0; Array second item represents the offset in the Y axis label group, down to the positive.

axisXLabels Array.<string> optional

X axis label group content and sequence tagged along the data view box below edges from left to right arrangement.For example["92", "95", "99"]. Label arrangement of rules: when the number of attribute xShapeCenter tag number and xShapeInfo same (i.e. label a number of data and is equal to the number of), in accordance with xShapeCenter position arrangement of tags. Or along the dataView box below the edge label equidistant arrangement.

axisXLabelsStyle SuperMap.Feature.ShapeParameters.Label.style optional

X axis on the label group style.

axisXLabelsOffset Array.<number> 0 optional

Label group offset on X axis. A 2 length array, the array of the first to represent the Y axis tag group lateral offset, the left is positive, the default value: 0; Array second item represents the offset in the X axis label group, down to the positive.

useXReferenceLine boolean true optional

Whether to use a horizontal reference line, if true, when axisYTick greater than 0 it is effective, the horizontal reference line is an extension of the Y axis scale in the data view box.

xReferenceLineStyle SuperMap.Feature.ShapeParameters.Line.style optional

Horizontal reference line style.

pointStyle SuperMap.Feature.ShapeParameters.Point.style optional

A bar graph based style,This parameter controls the point base style, the priority is lower than the barStyleByFields and barStyleByCodomain.

pointStyleByFields Array.<SuperMap.Feature.ShapeParameters.Point.style> optional

Set style for bar according to themeFields(SuperMap.Layer.Graph::themeFields)this parameter field control the bar style, The priority is lower than pointStyleByCodomain,and higher than pointStyle.The style in this parameter corresponds to the field in the themeFields.such as: themeFields(SuperMap.Layer.Graph::themeFields)is ["POP_1992", "POP_1995", "POP_1999"], pointStyleByFields is [style1, style2, style3],in the graph, points corresponding to the field of POP_1992 using the style1, a POP_1995 field corresponding to the point using the style2 , point field corresponds to POP_1999 using style3.

pointStyleByCodomain Array.<Object>

Value range of the bar control the style, a higher priority than pointStyle and pointStyleByFields.

pointHoverStyle Object optional

Bar hover state style, effective when pointHoverAble is true.

pointHoverAble Object true optional

Whether to allowe the bar to use the hover state, the default is allowed. At the same time, set the pointHoverAble and pointClickAble false, can be directly on the shielding point thematic layer event response.

pointClickAble Object true optional

Whether to allowe the bar is clicked, the default is allowed. At the same time, pointHoverAble and pointClickAble are set to false, which can directly screen the response of the point strip to the event layer.