MouseToolbar.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  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. * @requires OpenLayers/Control/MouseDefaults.js
  8. */
  9. /**
  10. * Class: OpenLayers.Control.MouseToolbar
  11. * This class is DEPRECATED in 2.4 and will be removed by 3.0.
  12. * If you need this functionality, use <OpenLayers.Control.NavToolbar>
  13. * instead!!!
  14. */
  15. OpenLayers.Control.MouseToolbar = OpenLayers.Class(
  16. OpenLayers.Control.MouseDefaults, {
  17. /**
  18. * Property: mode
  19. */
  20. mode: null,
  21. /**
  22. * Property: buttons
  23. */
  24. buttons: null,
  25. /**
  26. * APIProperty: direction
  27. * {String} 'vertical' or 'horizontal'
  28. */
  29. direction: "vertical",
  30. /**
  31. * Property: buttonClicked
  32. * {String}
  33. */
  34. buttonClicked: null,
  35. /**
  36. * Constructor: OpenLayers.Control.MouseToolbar
  37. *
  38. * Parameters:
  39. * position - {<OpenLayers.Pixel>}
  40. * direction - {String}
  41. */
  42. initialize: function(position, direction) {
  43. OpenLayers.Control.prototype.initialize.apply(this, arguments);
  44. this.position = new OpenLayers.Pixel(OpenLayers.Control.MouseToolbar.X,
  45. OpenLayers.Control.MouseToolbar.Y);
  46. if (position) {
  47. this.position = position;
  48. }
  49. if (direction) {
  50. this.direction = direction;
  51. }
  52. this.measureDivs = [];
  53. },
  54. /**
  55. * APIMethod: destroy
  56. */
  57. destroy: function() {
  58. for( var btnId in this.buttons) {
  59. var btn = this.buttons[btnId];
  60. btn.map = null;
  61. btn.events.destroy();
  62. }
  63. OpenLayers.Control.MouseDefaults.prototype.destroy.apply(this,
  64. arguments);
  65. },
  66. /**
  67. * Method: draw
  68. */
  69. draw: function() {
  70. OpenLayers.Control.prototype.draw.apply(this, arguments);
  71. OpenLayers.Control.MouseDefaults.prototype.draw.apply(this, arguments);
  72. this.buttons = {};
  73. var sz = new OpenLayers.Size(28,28);
  74. var centered = new OpenLayers.Pixel(OpenLayers.Control.MouseToolbar.X,0);
  75. this._addButton("zoombox", "drag-rectangle-off.png", "drag-rectangle-on.png", centered, sz, "Shift->Drag to zoom to area");
  76. centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
  77. this._addButton("pan", "panning-hand-off.png", "panning-hand-on.png", centered, sz, "Drag the map to pan.");
  78. centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
  79. this.switchModeTo("pan");
  80. return this.div;
  81. },
  82. /**
  83. * Method: _addButton
  84. */
  85. _addButton:function(id, img, activeImg, xy, sz, title) {
  86. var imgLocation = OpenLayers.Util.getImagesLocation() + img;
  87. var activeImgLocation = OpenLayers.Util.getImagesLocation() + activeImg;
  88. // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
  89. var btn = OpenLayers.Util.createAlphaImageDiv(
  90. "OpenLayers_Control_MouseToolbar_" + id,
  91. xy, sz, imgLocation, "absolute");
  92. //we want to add the outer div
  93. this.div.appendChild(btn);
  94. btn.imgLocation = imgLocation;
  95. btn.activeImgLocation = activeImgLocation;
  96. btn.events = new OpenLayers.Events(this, btn, null, true);
  97. btn.events.on({
  98. "mousedown": this.buttonDown,
  99. "mouseup": this.buttonUp,
  100. "dblclick": OpenLayers.Event.stop,
  101. scope: this
  102. });
  103. btn.action = id;
  104. btn.title = title;
  105. btn.alt = title;
  106. btn.map = this.map;
  107. //we want to remember/reference the outer div
  108. this.buttons[id] = btn;
  109. return btn;
  110. },
  111. /**
  112. * Method: buttonDown
  113. *
  114. * Parameters:
  115. * evt - {Event}
  116. */
  117. buttonDown: function(evt) {
  118. if (!OpenLayers.Event.isLeftClick(evt)) {
  119. return;
  120. }
  121. this.buttonClicked = evt.element.action;
  122. OpenLayers.Event.stop(evt);
  123. },
  124. /**
  125. * Method: buttonUp
  126. *
  127. * Parameters:
  128. * evt - {Event}
  129. */
  130. buttonUp: function(evt) {
  131. if (!OpenLayers.Event.isLeftClick(evt)) {
  132. return;
  133. }
  134. if (this.buttonClicked != null) {
  135. if (this.buttonClicked == evt.element.action) {
  136. this.switchModeTo(evt.element.action);
  137. }
  138. OpenLayers.Event.stop(evt);
  139. this.buttonClicked = null;
  140. }
  141. },
  142. /**
  143. * Method: defaultDblClick
  144. *
  145. * Parameters:
  146. * evt - {Event}
  147. */
  148. defaultDblClick: function (evt) {
  149. this.switchModeTo("pan");
  150. this.performedDrag = false;
  151. var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );
  152. this.map.setCenter(newCenter, this.map.zoom + 1);
  153. OpenLayers.Event.stop(evt);
  154. return false;
  155. },
  156. /**
  157. * Method: defaultMouseDown
  158. *
  159. * Parameters:
  160. * evt - {Event}
  161. */
  162. defaultMouseDown: function (evt) {
  163. if (!OpenLayers.Event.isLeftClick(evt)) {
  164. return;
  165. }
  166. this.mouseDragStart = evt.xy.clone();
  167. this.performedDrag = false;
  168. this.startViaKeyboard = false;
  169. if (evt.shiftKey && this.mode !="zoombox") {
  170. this.switchModeTo("zoombox");
  171. this.startViaKeyboard = true;
  172. } else if (evt.altKey && this.mode !="measure") {
  173. this.switchModeTo("measure");
  174. } else if (!this.mode) {
  175. this.switchModeTo("pan");
  176. }
  177. switch (this.mode) {
  178. case "zoombox":
  179. this.map.div.style.cursor = "crosshair";
  180. this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
  181. this.mouseDragStart,
  182. null,
  183. null,
  184. "absolute",
  185. "2px solid red");
  186. this.zoomBox.style.backgroundColor = "white";
  187. this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
  188. this.zoomBox.style.opacity = "0.50";
  189. this.zoomBox.style.fontSize = "1px";
  190. this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
  191. this.map.eventsDiv.appendChild(this.zoomBox);
  192. this.performedDrag = true;
  193. break;
  194. case "measure":
  195. var distance = "";
  196. if (this.measureStart) {
  197. var measureEnd = this.map.getLonLatFromViewPortPx(this.mouseDragStart);
  198. distance = OpenLayers.Util.distVincenty(this.measureStart, measureEnd);
  199. distance = Math.round(distance * 100) / 100;
  200. distance = distance + "km";
  201. this.measureStartBox = this.measureBox;
  202. }
  203. this.measureStart = this.map.getLonLatFromViewPortPx(this.mouseDragStart);;
  204. this.measureBox = OpenLayers.Util.createDiv(null,
  205. this.mouseDragStart.add(
  206. -2-parseInt(this.map.layerContainerDiv.style.left),
  207. -2-parseInt(this.map.layerContainerDiv.style.top)),
  208. null,
  209. null,
  210. "absolute");
  211. this.measureBox.style.width="4px";
  212. this.measureBox.style.height="4px";
  213. this.measureBox.style.fontSize = "1px";
  214. this.measureBox.style.backgroundColor="red";
  215. this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
  216. this.map.layerContainerDiv.appendChild(this.measureBox);
  217. if (distance) {
  218. this.measureBoxDistance = OpenLayers.Util.createDiv(null,
  219. this.mouseDragStart.add(
  220. -2-parseInt(this.map.layerContainerDiv.style.left),
  221. 2-parseInt(this.map.layerContainerDiv.style.top)),
  222. null,
  223. null,
  224. "absolute");
  225. this.measureBoxDistance.innerHTML = distance;
  226. this.measureBoxDistance.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
  227. this.map.layerContainerDiv.appendChild(this.measureBoxDistance);
  228. this.measureDivs.push(this.measureBoxDistance);
  229. }
  230. this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
  231. this.map.layerContainerDiv.appendChild(this.measureBox);
  232. this.measureDivs.push(this.measureBox);
  233. break;
  234. default:
  235. this.map.div.style.cursor = "move";
  236. break;
  237. }
  238. document.onselectstart = OpenLayers.Function.False;
  239. OpenLayers.Event.stop(evt);
  240. },
  241. /**
  242. * Method: switchModeTo
  243. *
  244. * Parameters:
  245. * mode - {String}
  246. */
  247. switchModeTo: function(mode) {
  248. if (mode != this.mode) {
  249. if (this.mode && this.buttons[this.mode]) {
  250. OpenLayers.Util.modifyAlphaImageDiv(this.buttons[this.mode], null, null, null, this.buttons[this.mode].imgLocation);
  251. }
  252. if (this.mode == "measure" && mode != "measure") {
  253. for(var i=0, len=this.measureDivs.length; i<len; i++) {
  254. if (this.measureDivs[i]) {
  255. this.map.layerContainerDiv.removeChild(this.measureDivs[i]);
  256. }
  257. }
  258. this.measureDivs = [];
  259. this.measureStart = null;
  260. }
  261. this.mode = mode;
  262. if (this.buttons[mode]) {
  263. OpenLayers.Util.modifyAlphaImageDiv(this.buttons[mode], null, null, null, this.buttons[mode].activeImgLocation);
  264. }
  265. switch (this.mode) {
  266. case "zoombox":
  267. this.map.div.style.cursor = "crosshair";
  268. break;
  269. default:
  270. this.map.div.style.cursor = "";
  271. break;
  272. }
  273. }
  274. },
  275. /**
  276. * Method: leaveMode
  277. */
  278. leaveMode: function() {
  279. this.switchModeTo("pan");
  280. },
  281. /**
  282. * Method: defaultMouseMove
  283. *
  284. * Parameters:
  285. * evt - {Event}
  286. */
  287. defaultMouseMove: function (evt) {
  288. if (this.mouseDragStart != null) {
  289. switch (this.mode) {
  290. case "zoombox":
  291. var deltaX = Math.abs(this.mouseDragStart.x - evt.xy.x);
  292. var deltaY = Math.abs(this.mouseDragStart.y - evt.xy.y);
  293. this.zoomBox.style.width = Math.max(1, deltaX) + "px";
  294. this.zoomBox.style.height = Math.max(1, deltaY) + "px";
  295. if (evt.xy.x < this.mouseDragStart.x) {
  296. this.zoomBox.style.left = evt.xy.x+"px";
  297. }
  298. if (evt.xy.y < this.mouseDragStart.y) {
  299. this.zoomBox.style.top = evt.xy.y+"px";
  300. }
  301. break;
  302. default:
  303. var deltaX = this.mouseDragStart.x - evt.xy.x;
  304. var deltaY = this.mouseDragStart.y - evt.xy.y;
  305. var size = this.map.getSize();
  306. var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
  307. size.h / 2 + deltaY);
  308. var newCenter = this.map.getLonLatFromViewPortPx( newXY );
  309. this.map.setCenter(newCenter, null, true);
  310. this.mouseDragStart = evt.xy.clone();
  311. }
  312. this.performedDrag = true;
  313. }
  314. },
  315. /**
  316. * Method: defaultMouseUp
  317. *
  318. * Parameters:
  319. * evt - {Event}
  320. */
  321. defaultMouseUp: function (evt) {
  322. if (!OpenLayers.Event.isLeftClick(evt)) {
  323. return;
  324. }
  325. switch (this.mode) {
  326. case "zoombox":
  327. this.zoomBoxEnd(evt);
  328. if (this.startViaKeyboard) {
  329. this.leaveMode();
  330. }
  331. break;
  332. case "pan":
  333. if (this.performedDrag) {
  334. this.map.setCenter(this.map.center);
  335. }
  336. }
  337. document.onselectstart = null;
  338. this.mouseDragStart = null;
  339. this.map.div.style.cursor = "default";
  340. },
  341. /**
  342. * Method: defaultMouseOut
  343. *
  344. * Parameters:
  345. * evt - {Event}
  346. */
  347. defaultMouseOut: function (evt) {
  348. if (this.mouseDragStart != null
  349. && OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
  350. if (this.zoomBox) {
  351. this.removeZoomBox();
  352. if (this.startViaKeyboard) {
  353. this.leaveMode();
  354. }
  355. }
  356. this.mouseDragStart = null;
  357. this.map.div.style.cursor = "default";
  358. }
  359. },
  360. /**
  361. * Method: defaultClick
  362. *
  363. * Parameters:
  364. * evt - {Event}
  365. */
  366. defaultClick: function (evt) {
  367. if (this.performedDrag) {
  368. this.performedDrag = false;
  369. return false;
  370. }
  371. },
  372. CLASS_NAME: "OpenLayers.Control.MouseToolbar"
  373. });
  374. OpenLayers.Control.MouseToolbar.X = 6;
  375. OpenLayers.Control.MouseToolbar.Y = 300;