CurveLine.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <script>
  2. import CurveLine from 'bmaplib.curveline'
  3. import commonMixin from '../base/mixins/common.js'
  4. import bindEvents from '../base/bindEvent.js'
  5. import {createPoint} from '../base/factory.js'
  6. const eventList = [
  7. 'click',
  8. 'dblclick',
  9. 'mousedown',
  10. 'mouseup',
  11. 'mouseout',
  12. 'mouseover',
  13. 'remove',
  14. 'lineupdate'
  15. ]
  16. export default {
  17. name: 'bml-curve-line',
  18. render () {},
  19. mixins: [commonMixin('overlay')],
  20. props: {
  21. points: {
  22. type: Array,
  23. default: Array
  24. },
  25. strokeColor: {
  26. type: String
  27. },
  28. strokeWeight: {
  29. type: Number
  30. },
  31. strokeOpacity: {
  32. type: Number
  33. },
  34. strokeStyle: {
  35. type: String
  36. },
  37. massClear: {
  38. type: Boolean,
  39. default: true
  40. },
  41. clicking: {
  42. type: Boolean,
  43. default: true
  44. },
  45. editing: {
  46. type: Boolean,
  47. default: false
  48. }
  49. },
  50. watch: {
  51. points: {
  52. handler (val, oldVal) {
  53. this.originInstance.disableEditing()
  54. this.reload()
  55. },
  56. deep: true
  57. },
  58. strokeColor (val) {
  59. this.originInstance.setStrokeColor(val)
  60. },
  61. strokeOpacity (val) {
  62. this.originInstance.setStrokeOpacity(val)
  63. },
  64. strokeWeight (val) {
  65. this.originInstance.setStrokeWeight(val)
  66. },
  67. strokeStyle (val) {
  68. this.originInstance.setStrokeStyle(val)
  69. },
  70. editing (val) {
  71. val ? this.originInstance.enableEditing() : this.originInstance.disableEditing()
  72. },
  73. massClear (val) {
  74. val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
  75. },
  76. clicking (val) {
  77. this.reload()
  78. }
  79. },
  80. methods: {
  81. load () {
  82. const {BMap, map, points, strokeColor, strokeWeight, strokeOpacity, strokeStyle, editing, massClear, clicking} = this
  83. const overlay = new CurveLine(points.map(item => createPoint(BMap, item)), {
  84. strokeColor,
  85. strokeWeight,
  86. strokeOpacity,
  87. strokeStyle,
  88. // enableEditing: editing,
  89. enableMassClear: massClear,
  90. enableClicking: clicking
  91. })
  92. editing ? overlay.enableEditing() : overlay.disableEditing()
  93. this.originInstance = overlay
  94. map.addOverlay(overlay)
  95. bindEvents.call(this, overlay, eventList)
  96. }
  97. }
  98. }
  99. </script>