Heatmap.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <script>
  2. import commonMixin from '../base/mixins/common.js'
  3. import Heatmap from 'bmaplib.heatmap'
  4. export default {
  5. name: 'bml-heatmap',
  6. render () {},
  7. mixins: [commonMixin('overlay')],
  8. props: {
  9. data: {
  10. type: Array,
  11. default: Array
  12. },
  13. max: {
  14. type: Number
  15. },
  16. radius: {
  17. type: Number
  18. },
  19. gradient: {
  20. type: Object
  21. },
  22. opacity: {
  23. type: Number
  24. }
  25. },
  26. watch: {
  27. data: {
  28. handler () {
  29. this.reload()
  30. },
  31. deep: true
  32. },
  33. max () {
  34. this.reload()
  35. },
  36. radius (val) {
  37. const {originInstance, opacity, gradient} = this
  38. originInstance.setOptions({
  39. radius: val,
  40. opacity,
  41. gradient
  42. })
  43. },
  44. gradient: {
  45. handler (val) {
  46. const {originInstance, radius, opacity} = this
  47. originInstance.setOptions({
  48. radius,
  49. opacity,
  50. gradient: val
  51. })
  52. },
  53. deep: true
  54. },
  55. opacity (val) {
  56. const {originInstance, radius, gradient} = this
  57. originInstance.setOptions({
  58. radius,
  59. opacity: val,
  60. gradient
  61. })
  62. }
  63. },
  64. methods: {
  65. load () {
  66. const {map, data, max, radius, opacity, gradient} = this
  67. const overlay = this.originInstance = new Heatmap({
  68. radius,
  69. opacity,
  70. gradient
  71. })
  72. map.addOverlay(overlay)
  73. overlay.setDataSet({data, max})
  74. }
  75. }
  76. }
  77. </script>