Polygon.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <script>
  2. import commonMixin from '../base/mixins/common.js'
  3. import bindEvents from '../base/bindEvent.js'
  4. import {createPoint} from '../base/factory.js'
  5. export default {
  6. name: 'bm-polygon',
  7. render () {},
  8. mixins: [commonMixin('overlay')],
  9. props: {
  10. path: {
  11. type: Array,
  12. default () {
  13. return []
  14. }
  15. },
  16. strokeColor: {
  17. type: String
  18. },
  19. strokeWeight: {
  20. type: Number
  21. },
  22. strokeOpacity: {
  23. type: Number
  24. },
  25. strokeStyle: {
  26. type: String
  27. },
  28. fillColor: {
  29. type: String
  30. },
  31. fillOpacity: {
  32. type: Number
  33. },
  34. massClear: {
  35. type: Boolean,
  36. default: true
  37. },
  38. clicking: {
  39. type: Boolean,
  40. default: true
  41. },
  42. editing: {
  43. type: Boolean,
  44. default: false
  45. }
  46. },
  47. watch: {
  48. path: {
  49. handler (val, oldVal) {
  50. this.reload()
  51. },
  52. deep: true
  53. },
  54. strokeColor (val) {
  55. this.originInstance.setStrokeColor(val)
  56. },
  57. strokeOpacity (val) {
  58. this.originInstance.setStrokeOpacity(val)
  59. },
  60. strokeWeight (val) {
  61. this.originInstance.setStrokeWeight(val)
  62. },
  63. strokeStyle (val) {
  64. this.originInstance.setStrokeStyle(val)
  65. },
  66. fillColor (val) {
  67. this.originInstance.setFillColor(val)
  68. },
  69. fillOpacity (val) {
  70. this.originInstance.setFillOpacity(val)
  71. },
  72. editing (val) {
  73. val ? this.originInstance.enableEditing() : this.originInstance.disableEditing()
  74. },
  75. massClear (val) {
  76. val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
  77. },
  78. clicking (val) {
  79. this.reload()
  80. }
  81. },
  82. methods: {
  83. load () {
  84. const {BMap, map, path, strokeColor, strokeWeight, strokeOpacity, strokeStyle, fillColor, fillOpacity, editing, massClear, clicking} = this
  85. const overlay = new BMap.Polygon(path.map(item => createPoint(BMap, {lng: item.lng, lat: item.lat})), {
  86. strokeColor,
  87. strokeWeight,
  88. strokeOpacity,
  89. strokeStyle,
  90. fillColor,
  91. fillOpacity,
  92. // enableEditing: editing,
  93. enableMassClear: massClear,
  94. enableClicking: clicking
  95. })
  96. this.originInstance = overlay
  97. map.addOverlay(overlay)
  98. bindEvents.call(this, overlay)
  99. // 这里有一个诡异的bug,直接给 editing 赋值时会出现未知错误,因为使用下面的方法抹平。
  100. editing ? overlay.enableEditing() : overlay.disableEditing()
  101. }
  102. }
  103. }
  104. </script>