ScaleLine.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. /* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
  2. * full list of contributors). Published under the Clear BSD license.
  3. * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
  4. * full text of the license. */
  5. /**
  6. * @requires OpenLayers/Control.js
  7. */
  8. /**
  9. * Class: OpenLayers.Control.ScaleLine
  10. * The ScaleLine displays a small line indicator representing the current
  11. * map scale on the map. By default it is drawn in the lower left corner of
  12. * the map.
  13. *
  14. * Inherits from:
  15. * - <OpenLayers.Control>
  16. *
  17. * Is a very close copy of:
  18. * - <OpenLayers.Control.Scale>
  19. */
  20. OpenLayers.Control.ScaleLine = OpenLayers.Class(OpenLayers.Control, {
  21. /**
  22. * Property: maxWidth
  23. * {Integer} Maximum width of the scale line in pixels. Default is 100.
  24. */
  25. maxWidth: 100,
  26. /**
  27. * Property: topOutUnits
  28. * {String} Units for zoomed out on top bar. Default is km.
  29. */
  30. topOutUnits: "km",
  31. /**
  32. * Property: topInUnits
  33. * {String} Units for zoomed in on top bar. Default is m.
  34. */
  35. topInUnits: "m",
  36. /**
  37. * Property: bottomOutUnits
  38. * {String} Units for zoomed out on bottom bar. Default is mi.
  39. */
  40. bottomOutUnits: "mi",
  41. /**
  42. * Property: bottomInUnits
  43. * {String} Units for zoomed in on bottom bar. Default is ft.
  44. */
  45. bottomInUnits: "ft",
  46. /**
  47. * Property: eTop
  48. * {DOMElement}
  49. */
  50. eTop: null,
  51. /**
  52. * Property: eBottom
  53. * {DOMElement}
  54. */
  55. eBottom:null,
  56. /**
  57. * APIProperty: geodesic
  58. * {Boolean} Use geodesic measurement. Default is false. The recommended
  59. * setting for maps in EPSG:4326 is false, and true EPSG:900913. If set to
  60. * true, the scale will be calculated based on the horizontal size of the
  61. * pixel in the center of the map viewport.
  62. */
  63. geodesic: false,
  64. /**
  65. * Constructor: OpenLayers.Control.ScaleLine
  66. * Create a new scale line control.
  67. *
  68. * Parameters:
  69. * options - {Object} An optional object whose properties will be used
  70. * to extend the control.
  71. */
  72. /**
  73. * Method: draw
  74. *
  75. * Returns:
  76. * {DOMElement}
  77. */
  78. draw: function() {
  79. OpenLayers.Control.prototype.draw.apply(this, arguments);
  80. if (!this.eTop) {
  81. // stick in the top bar
  82. this.eTop = document.createElement("div");
  83. this.eTop.className = this.displayClass + "Top";
  84. var theLen = this.topInUnits.length;
  85. this.div.appendChild(this.eTop);
  86. if((this.topOutUnits == "") || (this.topInUnits == "")) {
  87. this.eTop.style.visibility = "hidden";
  88. } else {
  89. this.eTop.style.visibility = "visible";
  90. }
  91. // and the bottom bar
  92. this.eBottom = document.createElement("div");
  93. this.eBottom.className = this.displayClass + "Bottom";
  94. this.div.appendChild(this.eBottom);
  95. if((this.bottomOutUnits == "") || (this.bottomInUnits == "")) {
  96. this.eBottom.style.visibility = "hidden";
  97. } else {
  98. this.eBottom.style.visibility = "visible";
  99. }
  100. }
  101. this.map.events.register('moveend', this, this.update);
  102. this.update();
  103. return this.div;
  104. },
  105. /**
  106. * Method: getBarLen
  107. * Given a number, round it down to the nearest 1,2,5 times a power of 10.
  108. * That seems a fairly useful set of number groups to use.
  109. *
  110. * Parameters:
  111. * maxLen - {float} the number we're rounding down from
  112. *
  113. * Returns:
  114. * {Float} the rounded number (less than or equal to maxLen)
  115. */
  116. getBarLen: function(maxLen) {
  117. // nearest power of 10 lower than maxLen
  118. var digits = parseInt(Math.log(maxLen) / Math.log(10));
  119. var pow10 = Math.pow(10, digits);
  120. // ok, find first character
  121. var firstChar = parseInt(maxLen / pow10);
  122. // right, put it into the correct bracket
  123. var barLen;
  124. if(firstChar > 5) {
  125. barLen = 5;
  126. } else if(firstChar > 2) {
  127. barLen = 2;
  128. } else {
  129. barLen = 1;
  130. }
  131. // scale it up the correct power of 10
  132. return barLen * pow10;
  133. },
  134. /**
  135. * Method: update
  136. * Update the size of the bars, and the labels they contain.
  137. */
  138. update: function() {
  139. var res = this.map.getResolution();
  140. if (!res) {
  141. return;
  142. }
  143. var curMapUnits = this.map.getUnits();
  144. var inches = OpenLayers.INCHES_PER_UNIT;
  145. // convert maxWidth to map units
  146. var maxSizeData = this.maxWidth * res * inches[curMapUnits];
  147. var geodesicRatio = 1;
  148. if(this.geodesic === true) {
  149. var maxSizeGeodesic = (this.map.getGeodesicPixelSize().w ||
  150. 0.000001) * this.maxWidth;
  151. var maxSizeKilometers = maxSizeData / inches["km"];
  152. geodesicRatio = maxSizeGeodesic / maxSizeKilometers;
  153. maxSizeData *= geodesicRatio;
  154. }
  155. // decide whether to use large or small scale units
  156. var topUnits;
  157. var bottomUnits;
  158. if(maxSizeData > 100000) {
  159. topUnits = this.topOutUnits;
  160. bottomUnits = this.bottomOutUnits;
  161. } else {
  162. topUnits = this.topInUnits;
  163. bottomUnits = this.bottomInUnits;
  164. }
  165. // and to map units units
  166. var topMax = maxSizeData / inches[topUnits];
  167. var bottomMax = maxSizeData / inches[bottomUnits];
  168. // now trim this down to useful block length
  169. var topRounded = this.getBarLen(topMax);
  170. var bottomRounded = this.getBarLen(bottomMax);
  171. // and back to display units
  172. topMax = topRounded / inches[curMapUnits] * inches[topUnits];
  173. bottomMax = bottomRounded / inches[curMapUnits] * inches[bottomUnits];
  174. // and to pixel units
  175. var topPx = topMax / res / geodesicRatio;
  176. var bottomPx = bottomMax / res / geodesicRatio;
  177. // now set the pixel widths
  178. // and the values inside them
  179. if (this.eBottom.style.visibility == "visible"){
  180. this.eBottom.style.width = Math.round(bottomPx) + "px";
  181. this.eBottom.innerHTML = bottomRounded + " " + bottomUnits ;
  182. }
  183. if (this.eTop.style.visibility == "visible"){
  184. this.eTop.style.width = Math.round(topPx) + "px";
  185. this.eTop.innerHTML = topRounded + " " + topUnits;
  186. }
  187. },
  188. CLASS_NAME: "OpenLayers.Control.ScaleLine"
  189. });