Line.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. /**
  2. * @requires SuperMap.Feature.Theme.js
  3. * @requires SuperMap.Feature.Theme.Graph.js
  4. */
  5. /**
  6. * Class: SuperMap.Feature.Theme.Line
  7. * 折线图。
  8. *
  9. * 图表 Line 配置对象 chartsSetting(<SuperMap.Layer.Graph::chartsSetting>) 可设属性如下:
  10. *
  11. * Symbolizer properties:
  12. * width - {Number} 专题要素(图表)宽度,必设参数。
  13. * height - {Number} 专题要素(图表)高度,必设参数。
  14. * codomain - {Array{Number}} 图表允许展示的数据值域,长度为 2 的一维数组,第一个元素表示值域下限,第二个元素表示值域上限,必设参数。
  15. * XOffset - {Number} 专题要素(图表)在 X 方向上的偏移值,单位像素。
  16. * YOffset - {Number} 专题要素(图表)在 Y 方向上的偏移值,单位像素。
  17. * dataViewBoxParameter - {Array{Number}} 数据视图框 dataViewBox 参数,
  18. * 它是指图表框 chartBox (由图表位置、图表宽度、图表高度构成的图表范围框)在左、下,右,上四个方向上的内偏距值。
  19. * 当使用坐标轴时 dataViewBoxParameter 的默认值为:[45, 15, 15, 15];不使用坐标轴时 dataViewBoxParameter 的默认值为:[5, 5, 5, 5]。
  20. * decimalNumber - {Number} 数据值数组 dataValues 元素值小数位数,数据的小数位处理参数,取值范围:[0, 16]。如果不设置此参数,在取数据值时不对数据做小数位处理。
  21. *
  22. * useBackground - {Boolean} 是否使用图表背景框。
  23. * backgroundStyle - {Object} 背景样式,此样式对象对象可设属性: <SuperMap.Feature.ShapeParameters.Rectangle::style>。
  24. * backgroundRadius - {Array} 背景框矩形圆角半径,可以用数组分别指定四个角的圆角半径,设:左上、右上、右下、左下角的半径依次为 r1、r2、r3、r4 ,
  25. * 则 backgroundRadius 为 [r1、r2、r3、r4 ],默认值[0, 0, 0, 0]。
  26. *
  27. * xShapeBlank - {Array{Number}} 水平方向上的图形空白间隔参数。
  28. * 长度为 2 的数组,第一元素表示折线左端点与数据视图框左端的空白间距,第二个元素表示折线右端点右端与数据视图框右端端的空白间距 。
  29. *
  30. * axisStyle - {Object} 坐标轴样式,此样式对象对象可设属性: <SuperMap.Feature.ShapeParameters.Line::style> 。
  31. * axisUseArrow - {Boolean} 坐标轴是否使用箭头,默认值:false,不使用箭头。
  32. * axisYTick - {Number} y 轴刻度数量,默认值:0 ,不使用刻度。
  33. * axisYLabels - {Array{String}} y 轴上的标签组内容,标签顺序沿着数据视图框左面条边自上而下,等距排布。例如:["1000", "750", "500", "250", "0"]。
  34. * axisYLabelsStyle - {Object} y 轴上的标签组样式,此样式对象对象可设属性: <SuperMap.Feature.ShapeParameters.Label::style> 。
  35. * axisYLabelsOffset - {Array{Number}} y 轴上的标签组偏移量。长度为 2 的数组,数组第一项表示 y 轴标签组横向上的偏移量,向左为正,默认值:0;
  36. * 数组第二项表示 y 轴标签组纵向上的偏移量,向下为正,默认值:0。
  37. * axisXLabels - {Array{String}} x 轴上的标签组内容,标签顺序沿着数据视图框下面条边自左向右排布,例如:["92年", "95年", "99年"]。
  38. * 标签排布规则:当标签数量与 xShapeInfo 中的属性 xShapeCenter 数量相同(即标签个数与数据个数相等时), 按照 xShapeCenter 提供的位置排布标签,
  39. * 否则沿数据视图框下面条边等距排布标签。
  40. * axisXLabelsStyle - {Object} x 轴上的标签组样式,此样式对象对象可设属性: <SuperMap.Feature.ShapeParameters.Label::style> 。
  41. * axisXLabelsOffset - {Array{Number}} x 轴上的标签组偏移量。长度为 2 的数组,数组第一项表示 x 轴标签组横向上的偏移量,向左为正,默认值:0;
  42. * 数组第二项表示 x 轴标签组纵向上的偏移量,向下为正,默认值:0。
  43. * useXReferenceLine - {Boolean) 是否使用水平参考线,如果为 true,在 axisYTick 大于 0 时有效,水平参考线是 y 轴刻度在数据视图框里的延伸。
  44. * xReferenceLineStyle - {Object) 水平参考线样式,此样式对象对象可设属性: <SuperMap.Feature.ShapeParameters.Line::style> 。
  45. *
  46. * lineStyle - {Object} 折线图中折线 style,此样式对象对象可设属性: <SuperMap.Feature.ShapeParameters.Line::style>。
  47. * pointStyle - {Object} 折线图中折线节点基础 style,此参数控制折线节点基础样式,优先级低于 pointStyleByFields 和 pointStyleByCodomain。
  48. * 此样式对象对象可设属性: <SuperMap.Feature.ShapeParameters.Point::style> 。
  49. * pointStyleByFields - {Array{Object}} 按专题字段 themeFields(<SuperMap.Layer.Graph::themeFields>)为折线节点赋 style,此参数按字段控制折线节点样式,
  50. * 优先级低于 pointStyleByCodomain,高于 pointStyle。此数组中的元素是样式对象,其可设属性: <SuperMap.Feature.ShapeParameters.Point::style> 。
  51. * 此参数中的 style 与 themeFields 中的字段一一对应 。例如: themeFields(<SuperMap.Layer.Graph::themeFields>) 为 ["POP_1992", "POP_1995", "POP_1999"],
  52. * pointStyleByFields 为[style1, style2, style3],则在图表中,字段 POP_1992 对应的折线节点使用 style1,字段 POP_1995 对应的折线节点使用 style2 ,字段 POP_1999 对应的折线节点使用 style3。
  53. * pointStyleByCodomain - {Array{Object}} 按折线节点代表的数据值所在值域范围控制折线节点样式,优先级高于 pointStyle 和 pointStyleByFields。
  54. * (start code)
  55. * // pointStyleByCodomain 的每个元素是个包含值域信息和与值域对应样式信息的对象,该对象(必须)有三个属性:
  56. * // start: 值域值下限(包含);
  57. * // end: 值域值上限(不包含);
  58. * // style: 数据可视化图形的 style,这个样式对象的可设属性: <SuperMap.Feature.ShapeParameters.Point::style> 。
  59. * // pointStyleByCodomain 数组形如:
  60. * [
  61. * {
  62. * start:0,
  63. * end:250,
  64. * style:{
  65. * fillColor:"#00CD00"
  66. * }
  67. * },
  68. * {
  69. * start:250,
  70. * end:500,
  71. * style:{
  72. * fillColor:"#00EE00"
  73. * }
  74. * },
  75. * {
  76. * start:500,
  77. * end:750,
  78. * style:{
  79. * fillColor:"#00FF7F"
  80. * }
  81. * },
  82. * {
  83. * start:750,
  84. * end:1500,
  85. * style:{
  86. * fillColor:"#00FF00"
  87. * }
  88. * }
  89. * ]
  90. * (end)
  91. * pointHoverStyle - {Object} 折线节点 hover 状态时的样式,pointHoverAble 为 true 时有效。
  92. * pointHoverAble - {Object} 是否允许折线节点使用 hover 状态,默认允许。同时设置 pointHoverAble 和 pointClickAble 为 false,可以直接屏蔽折线节点对专题图层事件的响应。
  93. * pointClickAble - {Object} 是否允许折线节点被点击,默认允许。同时设置 pointHoverAble 和 pointClickAble 为 false,可以直接屏蔽折线节点对专题图层事件的响应。
  94. *
  95. * Inherits:
  96. * - <SuperMap.Feature.Theme.Graph>
  97. */
  98. SuperMap.Feature.Theme.Line = SuperMap.Class(SuperMap.Feature.Theme.Graph, {
  99. /**
  100. * Constructor: SuperMap.Feature.Theme.Line
  101. * 创建一个折线图。
  102. *
  103. * Parameters:
  104. * data - {<SuperMap.Feature.Vector>} 用户数据,必设参数。
  105. * layer - {<SuperMap.Layer.Graph>} 此专题要素所在图层,必设参数。
  106. * fields - {Array{String}} data 中的参与此图表生成的字段名称,必设参数。
  107. * setting - {Object} 图表配置对象,必设参数。
  108. * lonlat - {<SuperMap.LonLat>} 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。
  109. *
  110. * Returns:
  111. * {<SuperMap.Feature.Theme.Line>} 返回一个折线图。
  112. */
  113. initialize: function(data, layer, fields, setting, lonlat, options) {
  114. SuperMap.Feature.Theme.Graph.prototype.initialize.apply(this, arguments);
  115. },
  116. /**
  117. * Method: destroy
  118. * 销毁此专题要素。调用 destroy 后此对象所以属性置为 null。
  119. */
  120. destroy: function() {
  121. SuperMap.Feature.Theme.Graph.prototype.destroy.apply(this, arguments);
  122. },
  123. //装配图形(扩展接口)
  124. assembleShapes: function(){
  125. // 图表配置对象
  126. var sets = this.setting;
  127. // 默认数据视图框
  128. if(!sets.dataViewBoxParameter){
  129. if(typeof(sets.useAxis) === "undefined" || sets.useAxis){
  130. sets.dataViewBoxParameter = [45, 15, 15, 15];
  131. }
  132. else{
  133. sets.dataViewBoxParameter = [5, 5, 5, 5];
  134. }
  135. }
  136. // 重要步骤:初始化参数
  137. if(!this.initBaseParameter()) return;
  138. var dvb = this.dataViewBox;
  139. // 值域
  140. var codomain = this.DVBCodomain;
  141. // 重要步骤:定义图表 Bar 数据视图框中单位值的含义
  142. this.DVBUnitValue = (codomain[1]-codomain[0])/this.DVBHeight;
  143. var uv = this.DVBUnitValue;
  144. // 数据值数组
  145. var fv = this.dataValues;
  146. if(fv.length < 1) return; // 没有数据
  147. // 获取 x 轴上的图形信息
  148. var xShapeInfo = this.calculateXShapeInfo();
  149. if(!xShapeInfo) return;
  150. // 折线每个节点的 x 位置
  151. var xsLoc = xShapeInfo.xPositions;
  152. // 背景框,默认启用
  153. if(typeof(sets.useBackground) === "undefined" || sets.useBackground){
  154. // 将背景框图形添加到模型的 shapes 数组,注意添加顺序,后添加的图形在先添加的图形之上。
  155. this.shapes.push(SuperMap.Feature.ShapeFactory.Background(this.shapeFactory, this.chartBox, sets));
  156. }
  157. // 折线图必须使用坐标轴
  158. this.shapes = this.shapes.concat(SuperMap.Feature.ShapeFactory.GraphAxis(this.shapeFactory, dvb, sets, xShapeInfo));
  159. var isDataEffective = true;
  160. var xPx; // 折线节点 x 坐标
  161. var yPx; // 折线节点 y 坐标
  162. var poiLists = []; // 折线节点数组
  163. var shapePois = []; // 折线节点图形数组
  164. for(var i = 0, len = fv.length; i < len; i++){
  165. // 数据溢出值域检查
  166. if(fv[i] < codomain[0] || fv[i] > codomain[1]) {isDataEffective = false; return null;}
  167. xPx = xsLoc[i];
  168. yPx = dvb[1] - (fv[i] - codomain[0])/uv;
  169. // 折线节点参数对象
  170. var poiSP = new SuperMap.Feature.ShapeParameters.Point(xPx, yPx);
  171. // 折线节点 style
  172. poiSP.style = SuperMap.Feature.ShapeFactory.ShapeStyleTool({fillColor: "#ee9900"}, sets.pointStyle, sets.pointStyleByFields, sets.pointStyleByCodomain, i, fv[i]);
  173. // 折线节点 hover 样式
  174. poiSP.highlightStyle = SuperMap.Feature.ShapeFactory.ShapeStyleTool(null, sets.pointHoverStyle);
  175. // 折线节点 hover click
  176. if(typeof(sets.pointHoverAble) !== "undefined"){
  177. poiSP.hoverable = sets.pointHoverAble;
  178. }
  179. if(typeof(sets.pointClickAble) !== "undefined"){
  180. poiSP.clickable = sets.pointClickAble;
  181. }
  182. // 图形携带的数据信息
  183. poiSP.refDataID = this.data.id;
  184. poiSP.dataInfo = {
  185. field: this.fields[i],
  186. value: fv[i]
  187. };
  188. // 创建图形并把此图形添加到折线节点图形数组
  189. shapePois.push(this.shapeFactory.createShape(poiSP));
  190. // 添加折线节点到折线节点数组
  191. var poi = [xPx, yPx];
  192. poiLists.push(poi);
  193. }
  194. // 折线参数对象
  195. var lineSP = new SuperMap.Feature.ShapeParameters.Line(poiLists);
  196. lineSP.style =SuperMap.Feature.ShapeFactory.ShapeStyleTool({strokeColor: "#ee9900"}, sets.lineStyle);
  197. // 禁止事件响应
  198. lineSP.clickable = false;
  199. lineSP.hoverable = false;
  200. var shapeLine = this.shapeFactory.createShape(lineSP);
  201. this.shapes.push(shapeLine);
  202. // 添加节点到图表图形数组
  203. this.shapes = this.shapes.concat(shapePois);
  204. // 数据范围检测未通过,清空图形
  205. if(isDataEffective === false){
  206. this.shapes = [];
  207. }
  208. // 重要步骤:将图形转为由相对坐标表示的图形,以便在地图平移缩放过程中快速重绘图形
  209. // (统计专题图模块从结构上要求使用相对坐标,assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数)
  210. this.shapesConvertToRelativeCoordinate();
  211. },
  212. /**
  213. * Method: calculateXShapeInfo
  214. * 计算 X 轴方向上的图形信息,此信息是一个对象,包含两个属性,
  215. * 属性 xPositions 是一个一维数组,该数组元素表示图形在 x 轴方向上的像素坐标值,
  216. * 如果图形在 x 方向上有一定宽度,通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。
  217. * width 表示图形的宽度(特别注意:点的宽度始终为 0,而不是其直径)。
  218. *
  219. * 本函数中图形配置对象 setting 可设属性:
  220. * Symbolizer properties:
  221. * xShapeBlank - {Array{Number}} 水平方向上的图形空白间隔参数。
  222. * 长度为 2 的数组,第一元素表示第折线左端点与数据视图框左端的空白间距,第二个元素表示折线右端点右端与数据视图框右端端的空白间距 。
  223. *
  224. * Returns:
  225. * {Object} 如果计算失败,返回 null;如果计算成功,返回 X 轴方向上的图形信息,此信息是一个对象,包含以下两个属性:
  226. * Symbolizer properties:
  227. * xPositions - {Array{Number}} 表示图形在 x 轴方向上的像素坐标值,如果图形在 x 方向上有一定宽度,通常取图形在 x 方向上的中心点为图形在 x 方向上的坐标值。
  228. * width - {Number} 表示图形的宽度(特别注意:点的宽度始终为 0,而不是其直径)。
  229. *
  230. */
  231. calculateXShapeInfo: function(){
  232. var dvb = this.dataViewBox; // 数据视图框
  233. var sets = this.setting; // 图表配置对象
  234. var fvc = this.dataValues.length; // 数组值个数
  235. if(fvc < 1) return null;
  236. var xBlank; // x 轴空白间隔参数
  237. var xShapePositions = []; // x 轴上图形的位置
  238. var xShapeWidth = 0; // x 轴上图形宽度(自适应)
  239. var dvbWidth = this.DVBWidth; // 数据视图框宽度
  240. var unitOffset = 0; // 单位偏移量
  241. // x 轴空白间隔参数处理
  242. if(sets.xShapeBlank && sets.xShapeBlank.length && sets.xShapeBlank.length == 2){
  243. xBlank = sets.xShapeBlank;
  244. var xsLen = dvbWidth - (xBlank[0] + xBlank[1]);
  245. if(xsLen <= fvc){ return null; }
  246. unitOffset = xsLen/(fvc - 1);
  247. }
  248. else{
  249. // 默认使用等距离空白间隔,空白间隔为图形宽度
  250. unitOffset = dvbWidth/(fvc + 1);
  251. xBlank = [unitOffset, unitOffset, unitOffset];
  252. }
  253. // 图形 x 轴上的位置计算
  254. var xOffset = 0
  255. for(var i = 0; i < fvc; i++){
  256. if(i == 0){
  257. xOffset = xBlank[0];
  258. }
  259. else{
  260. xOffset += unitOffset;
  261. }
  262. xShapePositions.push(dvb[0] + xOffset);
  263. }
  264. return {
  265. "xPositions": xShapePositions,
  266. "width": xShapeWidth
  267. };
  268. },
  269. CLASS_NAME: "SuperMap.Feature.Theme.Line"
  270. });