Polygon.vue 2.6 KB

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