You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

KeyboardRoaming.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. /**
  2. * @Author: Caven
  3. * @Date: 2021-06-08 20:41:51
  4. */
  5. import { Cesium } from '@dc-modules/namespace'
  6. class KeyboardRoaming {
  7. constructor(viewer) {
  8. this._viewer = viewer
  9. this._enable = false
  10. this._moveRate = 100.0
  11. this._rotateRate = 0.01
  12. this._flags = {
  13. moveForward: false,
  14. moveBackward: false,
  15. moveUp: false,
  16. moveDown: false,
  17. moveLeft: false,
  18. moveRight: false,
  19. turnLeft: false,
  20. turnRight: false
  21. }
  22. }
  23. set enable(enable) {
  24. if (this._enable === enable) {
  25. return this
  26. }
  27. if (this._viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
  28. return this
  29. }
  30. this._enable = enable
  31. this._enable ? this._bindEvent() : this._unbindEvent()
  32. return this
  33. }
  34. get enable() {
  35. return this._enable
  36. }
  37. set moveRate(moveRate) {
  38. this._moveRate = moveRate
  39. return this
  40. }
  41. get moveRate() {
  42. return this._moveRate
  43. }
  44. set rotateRate(rotateRate) {
  45. this._rotateRate = rotateRate
  46. return this
  47. }
  48. get rotateRate() {
  49. return this._rotateRate
  50. }
  51. /**
  52. *
  53. * @private
  54. */
  55. _bindEvent() {
  56. let canvas = this._viewer.scene.canvas
  57. canvas.setAttribute('tabindex', '0')
  58. canvas.addEventListener('click', this._onClick.bind(this), false)
  59. this._viewer.clock.onTick.addEventListener(this._onTick, this)
  60. document.addEventListener('keydown', this._onKeydown.bind(this), false)
  61. document.addEventListener('keyup', this._onKeyup.bind(this), false)
  62. }
  63. /**
  64. *
  65. * @private
  66. */
  67. _unbindEvent() {
  68. Object.keys(this._flags).forEach(key => {
  69. this._flags[key] = false
  70. })
  71. let canvas = this._viewer.scene.canvas
  72. canvas.removeAttribute('tabindex')
  73. canvas.removeEventListener('click', this._onClick, false)
  74. this._viewer.clock.onTick.removeEventListener(this._onTick, this)
  75. document.removeEventListener('keydown', this._onKeydown, false)
  76. document.removeEventListener('keyup', this._onKeyup, false)
  77. }
  78. /**
  79. *
  80. * @param e
  81. * @returns {undefined}
  82. * @private
  83. */
  84. _getFlagForKeyCode(e) {
  85. let flag = undefined
  86. switch (e.keyCode) {
  87. case 'W'.charCodeAt(0):
  88. case 38:
  89. if (e.shiftKey) {
  90. flag = 'moveUp'
  91. } else {
  92. flag = 'moveForward'
  93. }
  94. break
  95. case 'S'.charCodeAt(0):
  96. case 40:
  97. if (e.shiftKey) {
  98. flag = 'moveDown'
  99. } else {
  100. flag = 'moveBackward'
  101. }
  102. break
  103. case 'A'.charCodeAt(0):
  104. case 37:
  105. flag = 'moveLeft'
  106. break
  107. case 'D'.charCodeAt(0):
  108. case 39:
  109. flag = 'moveRight'
  110. break
  111. case 'Q'.charCodeAt(0):
  112. flag = 'turnLeft'
  113. break
  114. case 'E'.charCodeAt(0):
  115. flag = 'turnRight'
  116. break
  117. default:
  118. break
  119. }
  120. return flag
  121. }
  122. /**
  123. *
  124. * @private
  125. */
  126. _onClick() {
  127. let canvas = this._viewer.scene.canvas
  128. canvas.focus()
  129. }
  130. /**
  131. *
  132. * @param e
  133. * @private
  134. */
  135. _onKeydown(e) {
  136. let flag = this._getFlagForKeyCode(e)
  137. if (flag) {
  138. this._flags[flag] = true
  139. }
  140. }
  141. /**
  142. *
  143. * @param e
  144. * @private
  145. */
  146. _onKeyup(e) {
  147. Object.keys(this._flags).forEach(key => {
  148. this._flags[key] = false
  149. })
  150. }
  151. /**
  152. *
  153. * @private
  154. */
  155. _onTick() {
  156. let camera = this._viewer.scene.camera
  157. let cameraHeight = this._viewer.scene.globe.ellipsoid.cartesianToCartographic(
  158. camera.position
  159. ).height
  160. let moveRate = cameraHeight / this._moveRate
  161. let axis = Cesium.Cartesian3.clone(camera.position, new Cesium.Cartesian3())
  162. this._flags.moveForward && camera.moveForward(moveRate)
  163. this._flags.moveBackward && camera.moveBackward(moveRate)
  164. this._flags.moveUp && camera.moveUp(moveRate)
  165. this._flags.moveDown && camera.moveDown(moveRate)
  166. this._flags.moveLeft && camera.moveLeft(moveRate)
  167. this._flags.moveRight && camera.moveRight(moveRate)
  168. this._flags.turnLeft && camera.rotate(axis, -this._rotateRate)
  169. this._flags.turnRight && camera.rotate(axis, this._rotateRate)
  170. }
  171. }
  172. export default KeyboardRoaming