Lushu.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <script>
  2. /*eslint-disable*/
  3. import commonMixin from '../base/mixins/common.js'
  4. import {createIcon} from '../base/factory.js'
  5. import Lushu from 'bmaplib.lushu'
  6. export default {
  7. name: 'bm-lushu',
  8. render (h) {},
  9. mixins: [commonMixin('lushu')],
  10. props: {
  11. path: {
  12. type: Array,
  13. default: []
  14. },
  15. landmarkPois: {
  16. type: Array,
  17. default () {
  18. return []
  19. }
  20. },
  21. icon: {
  22. type: Object
  23. },
  24. speed: {
  25. type: Number,
  26. default: 4000
  27. },
  28. content: {
  29. type: String,
  30. default: ''
  31. },
  32. autoView: {
  33. type: Boolean,
  34. default: false
  35. },
  36. rotation: {
  37. type: Boolean,
  38. default: false
  39. },
  40. infoWindow: {
  41. type: Boolean,
  42. default: true
  43. },
  44. play: {
  45. type: Boolean,
  46. default: true
  47. }
  48. },
  49. watch: {
  50. path: {
  51. handler (val) {
  52. this.reload()
  53. },
  54. deep: true
  55. },
  56. landmarkPois: {
  57. handler (val) {
  58. this.reload()
  59. },
  60. deep: true
  61. },
  62. icon: {
  63. handler (val) {
  64. const {originInstance, content} = this
  65. const newMarker = createIcon(BMap, val)
  66. originInstance._opts.icon = newMarker
  67. originInstance._marker = newMarker
  68. },
  69. deep: true
  70. },
  71. speed (val) {
  72. const {originInstance, content} = this
  73. originInstance._opts.speed = val
  74. },
  75. content (val) {
  76. const {originInstance, infoWindow} = this
  77. val && infoWindow ? originInstance.showInfoWindow() : originInstance.hideInfoWindow()
  78. originInstance._opts.defaultContent = val
  79. originInstance._overlay && originInstance._overlay.setHtml(val)
  80. },
  81. autoView (val) {
  82. const {originInstance, content} = this
  83. originInstance._opts.autoView = val
  84. },
  85. rotation (val) {
  86. const {originInstance, content} = this
  87. originInstance._opts.enableRotation = val
  88. },
  89. infoWindow (val) {
  90. const {originInstance, content} = this
  91. originInstance && val && content ? originInstance.showInfoWindow() : originInstance.hideInfoWindow()
  92. },
  93. play (val) {
  94. const {originInstance} = this
  95. val && originInstance ? originInstance.start() : !this._isEnd && originInstance.pause()
  96. }
  97. },
  98. methods: {
  99. load () {
  100. const {BMap, map, path, landmarkPois, icon, speed, content, autoView, rotation, infoWindow, play} = this
  101. const lushu = this.originInstance = new Lushu(map, path, {
  102. enableRotation: rotation,
  103. landmarkPois,
  104. showInfoWindow: infoWindow,
  105. defaultContent: content,
  106. icon: icon && createIcon(BMap, icon),
  107. speed,
  108. autoView,
  109. onstart: e => {
  110. this._isEnd = false
  111. this.$emit('start')
  112. },
  113. onstop: e => {
  114. this._isEnd = true
  115. this.$emit('stop')
  116. },
  117. onpause: e => this.$emit('pause')
  118. })
  119. play && path.length && lushu.start(this)
  120. path.length && (content && infoWindow ? lushu.showInfoWindow() : lushu.hideInfoWindow())
  121. }
  122. }
  123. }
  124. </script>