Navigation.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  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/ZoomBox.js
  7. * @requires OpenLayers/Control/DragPan.js
  8. * @requires OpenLayers/Handler/MouseWheel.js
  9. * @requires OpenLayers/Handler/Click.js
  10. */
  11. /**
  12. * Class: OpenLayers.Control.Navigation
  13. * The navigation control handles map browsing with mouse events (dragging,
  14. * double-clicking, and scrolling the wheel). Create a new navigation
  15. * control with the <OpenLayers.Control.Navigation> control.
  16. *
  17. * Note that this control is added to the map by default (if no controls
  18. * array is sent in the options object to the <OpenLayers.Map>
  19. * constructor).
  20. *
  21. * Inherits:
  22. * - <OpenLayers.Control>
  23. */
  24. OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
  25. /**
  26. * Property: dragPan
  27. * {<OpenLayers.Control.DragPan>}
  28. */
  29. dragPan: null,
  30. /**
  31. * APIProperty: dragPanOptions
  32. * {Object} Options passed to the DragPan control.
  33. */
  34. dragPanOptions: null,
  35. /**
  36. * Property: pinchZoom
  37. * {<OpenLayers.Control.PinchZoom>}
  38. */
  39. pinchZoom: null,
  40. /**
  41. * APIProperty: pinchZoomOptions
  42. * {Object} Options passed to the PinchZoom control.
  43. */
  44. pinchZoomOptions: null,
  45. /**
  46. * APIProperty: documentDrag
  47. * {Boolean} Allow panning of the map by dragging outside map viewport.
  48. * Default is false.
  49. */
  50. documentDrag: false,
  51. /**
  52. * Property: zoomBox
  53. * {<OpenLayers.Control.ZoomBox>}
  54. */
  55. zoomBox: null,
  56. /**
  57. * APIProperty: zoomBoxEnabled
  58. * {Boolean} Whether the user can draw a box to zoom
  59. */
  60. zoomBoxEnabled: true,
  61. /**
  62. * APIProperty: zoomWheelEnabled
  63. * {Boolean} Whether the mousewheel should zoom the map
  64. */
  65. zoomWheelEnabled: true,
  66. /**
  67. * Property: mouseWheelOptions
  68. * {Object} Options passed to the MouseWheel control (only useful if
  69. * <zoomWheelEnabled> is set to true)
  70. */
  71. mouseWheelOptions: null,
  72. /**
  73. * APIProperty: handleRightClicks
  74. * {Boolean} Whether or not to handle right clicks. Default is false.
  75. */
  76. handleRightClicks: false,
  77. /**
  78. * APIProperty: zoomBoxKeyMask
  79. * {Integer} <OpenLayers.Handler> key code of the key, which has to be
  80. * pressed, while drawing the zoom box with the mouse on the screen.
  81. * You should probably set handleRightClicks to true if you use this
  82. * with MOD_CTRL, to disable the context menu for machines which use
  83. * CTRL-Click as a right click.
  84. * Default: <OpenLayers.Handler.MOD_SHIFT
  85. */
  86. zoomBoxKeyMask: OpenLayers.Handler.MOD_SHIFT,
  87. /**
  88. * APIProperty: autoActivate
  89. * {Boolean} Activate the control when it is added to a map. Default is
  90. * true.
  91. */
  92. autoActivate: true,
  93. /**
  94. * Constructor: OpenLayers.Control.Navigation
  95. * Create a new navigation control
  96. *
  97. * Parameters:
  98. * options - {Object} An optional object whose properties will be set on
  99. * the control
  100. */
  101. initialize: function(options) {
  102. this.handlers = {};
  103. OpenLayers.Control.prototype.initialize.apply(this, arguments);
  104. },
  105. /**
  106. * Method: destroy
  107. * The destroy method is used to perform any clean up before the control
  108. * is dereferenced. Typically this is where event listeners are removed
  109. * to prevent memory leaks.
  110. */
  111. destroy: function() {
  112. this.deactivate();
  113. if (this.dragPan) {
  114. this.dragPan.destroy();
  115. }
  116. this.dragPan = null;
  117. if (this.zoomBox) {
  118. this.zoomBox.destroy();
  119. }
  120. this.zoomBox = null;
  121. if (this.pinchZoom) {
  122. this.pinchZoom.destroy();
  123. }
  124. this.pinchZoom = null;
  125. OpenLayers.Control.prototype.destroy.apply(this,arguments);
  126. },
  127. /**
  128. * Method: activate
  129. */
  130. activate: function() {
  131. this.dragPan.activate();
  132. if (this.zoomWheelEnabled) {
  133. this.handlers.wheel.activate();
  134. }
  135. this.handlers.click.activate();
  136. if (this.zoomBoxEnabled) {
  137. this.zoomBox.activate();
  138. }
  139. if (this.pinchZoom) {
  140. this.pinchZoom.activate();
  141. }
  142. return OpenLayers.Control.prototype.activate.apply(this,arguments);
  143. },
  144. /**
  145. * Method: deactivate
  146. */
  147. deactivate: function() {
  148. if (this.pinchZoom) {
  149. this.pinchZoom.deactivate();
  150. }
  151. this.zoomBox.deactivate();
  152. this.dragPan.deactivate();
  153. this.handlers.click.deactivate();
  154. this.handlers.wheel.deactivate();
  155. return OpenLayers.Control.prototype.deactivate.apply(this,arguments);
  156. },
  157. /**
  158. * Method: draw
  159. */
  160. draw: function() {
  161. // disable right mouse context menu for support of right click events
  162. if (this.handleRightClicks) {
  163. this.map.viewPortDiv.oncontextmenu = OpenLayers.Function.False;
  164. }
  165. var clickCallbacks = {
  166. 'click': this.defaultClick,
  167. 'dblclick': this.defaultDblClick,
  168. 'dblrightclick': this.defaultDblRightClick
  169. };
  170. var clickOptions = {
  171. 'double': true,
  172. 'stopDouble': true
  173. };
  174. this.handlers.click = new OpenLayers.Handler.Click(
  175. this, clickCallbacks, clickOptions
  176. );
  177. this.dragPan = new OpenLayers.Control.DragPan(
  178. OpenLayers.Util.extend({
  179. map: this.map,
  180. documentDrag: this.documentDrag
  181. }, this.dragPanOptions)
  182. );
  183. this.zoomBox = new OpenLayers.Control.ZoomBox(
  184. {map: this.map, keyMask: this.zoomBoxKeyMask});
  185. this.dragPan.draw();
  186. this.zoomBox.draw();
  187. this.handlers.wheel = new OpenLayers.Handler.MouseWheel(
  188. this, {"up" : this.wheelUp,
  189. "down": this.wheelDown},
  190. this.mouseWheelOptions );
  191. if (OpenLayers.Control.PinchZoom) {
  192. this.pinchZoom = new OpenLayers.Control.PinchZoom(
  193. OpenLayers.Util.extend(
  194. {map: this.map}, this.pinchZoomOptions));
  195. }
  196. },
  197. /**
  198. * Method: defaultClick
  199. *
  200. * Parameters:
  201. * evt - {Event}
  202. */
  203. defaultClick: function (evt) {
  204. if (evt.lastTouches && evt.lastTouches.length == 2) {
  205. this.map.zoomOut();
  206. }
  207. },
  208. /**
  209. * Method: defaultDblClick
  210. *
  211. * Parameters:
  212. * evt - {Event}
  213. */
  214. defaultDblClick: function (evt) {
  215. var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );
  216. this.map.setCenter(newCenter, this.map.zoom + 1);
  217. },
  218. /**
  219. * Method: defaultDblRightClick
  220. *
  221. * Parameters:
  222. * evt - {Event}
  223. */
  224. defaultDblRightClick: function (evt) {
  225. var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );
  226. this.map.setCenter(newCenter, this.map.zoom - 1);
  227. },
  228. /**
  229. * Method: wheelChange
  230. *
  231. * Parameters:
  232. * evt - {Event}
  233. * deltaZ - {Integer}
  234. */
  235. wheelChange: function(evt, deltaZ) {
  236. var currentZoom = this.map.getZoom();
  237. var newZoom = this.map.getZoom() + Math.round(deltaZ);
  238. newZoom = Math.max(newZoom, 0);
  239. newZoom = Math.min(newZoom, this.map.getNumZoomLevels());
  240. if (newZoom === currentZoom) {
  241. return;
  242. }
  243. var size = this.map.getSize();
  244. var deltaX = size.w/2 - evt.xy.x;
  245. var deltaY = evt.xy.y - size.h/2;
  246. var newRes = this.map.baseLayer.getResolutionForZoom(newZoom);
  247. var zoomPoint = this.map.getLonLatFromPixel(evt.xy);
  248. var newCenter = new OpenLayers.LonLat(
  249. zoomPoint.lon + deltaX * newRes,
  250. zoomPoint.lat + deltaY * newRes );
  251. this.map.setCenter( newCenter, newZoom );
  252. },
  253. /**
  254. * Method: wheelUp
  255. * User spun scroll wheel up
  256. *
  257. * Parameters:
  258. * evt - {Event}
  259. * delta - {Integer}
  260. */
  261. wheelUp: function(evt, delta) {
  262. this.wheelChange(evt, delta || 1);
  263. },
  264. /**
  265. * Method: wheelDown
  266. * User spun scroll wheel down
  267. *
  268. * Parameters:
  269. * evt - {Event}
  270. * delta - {Integer}
  271. */
  272. wheelDown: function(evt, delta) {
  273. this.wheelChange(evt, delta || -1);
  274. },
  275. /**
  276. * Method: disableZoomBox
  277. */
  278. disableZoomBox : function() {
  279. this.zoomBoxEnabled = false;
  280. this.zoomBox.deactivate();
  281. },
  282. /**
  283. * Method: enableZoomBox
  284. */
  285. enableZoomBox : function() {
  286. this.zoomBoxEnabled = true;
  287. if (this.active) {
  288. this.zoomBox.activate();
  289. }
  290. },
  291. /**
  292. * Method: disableZoomWheel
  293. */
  294. disableZoomWheel : function() {
  295. this.zoomWheelEnabled = false;
  296. this.handlers.wheel.deactivate();
  297. },
  298. /**
  299. * Method: enableZoomWheel
  300. */
  301. enableZoomWheel : function() {
  302. this.zoomWheelEnabled = true;
  303. if (this.active) {
  304. this.handlers.wheel.activate();
  305. }
  306. },
  307. CLASS_NAME: "OpenLayers.Control.Navigation"
  308. });