Circle.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. /**
  2. * @requires SuperMap.Feature.Theme.js
  3. * @requires SuperMap.Feature.Theme.Graph.js
  4. *
  5. */
  6. /**
  7. * Class: SuperMap.Feature.Theme.Circle
  8. * 圆
  9. *
  10. * 符号 Circle 配置对象 symbolSetting(<SuperMap.Layer.RankSymbol::setting>) 可设属性如下:
  11. *
  12. * Symbolizer properties:
  13. * codomain - {Array{Number}} 图表允许展示的数据值域,长度为 2 的一维数组,第一个元素表示值域下限,第二个元素表示值域上限,必设参数。
  14. * maxR - {Number} 圆形的最大半径。
  15. * minR - {Number} 圆形的最小半径。
  16. * fillColor - {String} 圆形的填充色,如:fillColor: "#FFB980"。
  17. * circleStyle - {Object} 圆形的基础 style,此参数控制圆形基础样式,优先级低于 circleStyleByFields 和 circleStyleByCodomain。
  18. * decimalNumber - {Number} 数据值数组 dataValues 元素值小数位数,数据的小数位处理参数,取值范围:[0, 16]。如果不设置此参数,在取数据值时不对数据做小数位处理。
  19. * circleHoverStyle - {Object} 圆 形 hover 状态时的样式,circleHoverAble 为 true 时有效。
  20. * circleHoverAble - {Object} 是否允许圆形使用 hover 状态,默认允许。同时设置 circleHoverAble 和 circleClickAble 为 false,可以直接屏蔽图形对专题图层事件的响应。
  21. * circleClickAble - {Object} 是否允许圆形被点击,默认允许。同时设置 circleHoverAble 和 circleClickAble 为 false,可以直接屏蔽图形对专题图层事件的响应。
  22. *
  23. * Inherits:
  24. * - <SuperMap.Feature.Theme.RankSymbol>
  25. */
  26. SuperMap.Feature.Theme.Circle = SuperMap.Class(SuperMap.Feature.Theme.RankSymbol, {
  27. /**
  28. * Constructor: SuperMap.Feature.Theme.Circle
  29. * 创建一个圆形。
  30. *
  31. * Parameters:
  32. * data - {<SuperMap.Feature.Vector>} 用户数据,必设参数。
  33. * layer - {<SuperMap.Layer.RankSymbol>} 此专题要素所在图层,必设参数。
  34. * fields - {Array{String}} data 中的参与此图表生成的字段名称,必设参数。
  35. * setting - {Object} 图表配置对象,必设参数。
  36. * lonlat - {<SuperMap.LonLat>} 专题要素地理位置。默认为 data 指代的地理要素 Bounds 中心。
  37. *
  38. * Returns:
  39. * {<SuperMap.Feature.Theme.Circle>} 返回一个圆图。
  40. */
  41. initialize: function(data, layer, fields, setting, lonlat) {
  42. SuperMap.Feature.Theme.RankSymbol.prototype.initialize.apply(this, arguments);
  43. },
  44. /**
  45. * APIMethod: destroy
  46. * 销毁此专题要素。调用 destroy 后此对象所以属性置为 null。
  47. */
  48. destroy: function() {
  49. SuperMap.Feature.Theme.Graph.prototype.destroy.apply(this, arguments);
  50. },
  51. //装配图形(扩展接口)
  52. assembleShapes: function(){
  53. //默认填充颜色
  54. var defaultFillColor = "#ff9277";
  55. // setting 属性是否已成功赋值
  56. if(!this.setting) return false;
  57. var sets = this.setting;
  58. // 检测 setting 的必设参数
  59. if(!(sets.codomain)) return false;
  60. // 数据
  61. var decimalNumber = (typeof(sets.decimalNumber) !== "undefined" && !isNaN(sets.decimalNumber))? sets.decimalNumber: -1;
  62. var dataEffective = SuperMap.Feature.Theme.getDataValues(this.data, this.fields, decimalNumber);
  63. this.dataValues = dataEffective? dataEffective: [];
  64. // 数据值数组
  65. var fv = this.dataValues;
  66. //if(fv.length != 1) return; // 没有数据 或者数据不唯一
  67. //if(fv[0] < 0) return; //数据为负值
  68. //用户应该定义最大 最小半径 默认最大半径MaxR:100 最小半径MinR:0;
  69. if(!sets.maxR) sets.maxR = 100;
  70. if(!sets.minR) sets.minR = 0;
  71. // 值域范围
  72. var codomain = this.DVBCodomain;
  73. // 重要步骤:定义Circle数据视图框中单位值的含义,单位值:1所代表的长度
  74. // 用户定义了值域范围
  75. if(codomain && codomain[1] - codomain[0] > 0){
  76. this.DVBUnitValue = sets.maxR/(codomain[1] - codomain[0]);
  77. }
  78. else{
  79. this.DVBUnitValue = sets.maxR/maxValue;
  80. }
  81. var uv = this.DVBUnitValue;
  82. //圆半径
  83. var r = fv[0]*uv + sets.minR;
  84. this.width = 2*r;
  85. this.height = 2*r;
  86. // 重要步骤:初始化参数
  87. if(!this.initBaseParameter()) return;
  88. //假如用户设置了值域范围 没有在值域范围直接返回
  89. if(codomain){
  90. if(fv[0] < codomain[0] || fv[0] > codomain[1]) { return; }
  91. }
  92. var dvbCenter = this.DVBCenterPoint; // 数据视图框中心作为圆心
  93. //圆形对象参数
  94. var circleSP = new SuperMap.Feature.ShapeParameters.Circle(dvbCenter[0],dvbCenter[1],r);
  95. //circleSP.sytle 初始化
  96. circleSP.style = SuperMap.Feature.ShapeFactory.ShapeStyleTool(null,sets.circleStyle,null,null,0);
  97. //图形的填充颜色
  98. if(typeof (sets.fillColor) !== "undefined"){
  99. //用户自定义
  100. circleSP.style.fillColor = sets.fillColor;
  101. }else{
  102. //当前默认
  103. circleSP.style.fillColor = defaultFillColor;
  104. }
  105. //圆形 Hover样式
  106. circleSP.highlightStyle = SuperMap.Feature.ShapeFactory.ShapeStyleTool(null,sets.circleHoverStyle);
  107. //圆形 Hover 与 click 设置
  108. if(typeof(sets.circleHoverAble) !== "undefined"){
  109. circleSP.hoverable = sets.circleHoverAble;
  110. }
  111. if(typeof(sets.circleClickAble) !== "undefined"){
  112. circleSP.clickable = sets.circleClickAble;
  113. }
  114. //图形携带的数据信息
  115. circleSP.refDataID = this.data.id;
  116. circleSP.dataInfo = {
  117. field: this.fields[0],
  118. r: r,
  119. value: fv[0]
  120. };
  121. // 创建扇形并把此扇形添加到图表图形数组
  122. this.shapes.push(this.shapeFactory.createShape(circleSP));
  123. // 重要步骤:将图形转为由相对坐标表示的图形,以便在地图平移缩放过程中快速重绘图形
  124. // (统计专题图模块从结构上要求使用相对坐标,assembleShapes() 函数必须在图形装配完成后调用 shapesConvertToRelativeCoordinate() 函数)
  125. this.shapesConvertToRelativeCoordinate();
  126. },
  127. CLASS_NAME: "SuperMap.Feature.Theme.Circle"
  128. });