如何獲得 Highmaps 縮放級別以及是否有 Highmaps 縮放事件？

Question

是否有 Highmaps 縮放事件？

另外，您如何獲得地圖的當前縮放級別？

設置縮放級別很容易，但我需要得到它。

我查看了 API 文檔，但似乎沒有縮放事件或 getZoomLevel 函數

（這是站點允許的知識共享，我將回答我自己的問題.. StackOverflow 建議的 javascript 標記）

https://api.highcharts.com/highmaps/chart.events

顯然，如果有人有相關信息，請隨時回答自己:)

Answer 1

這是我的代碼。 它是用 Angular 編寫的，但它沒有使用任何 Angular 包裝器，它直接使用 Highcharts / Highmaps v7.1.1，因此如果需要，它應該很容易轉換為 vanilla。

代碼的相關部分是用於計算縮放級別的load和redraw Highmaps 事件。 它們還用於代替縮放事件（因為沒有縮放事件）。 lodash debounce 用於防止 setZoomLevel 函數被過於頻繁地調用。

import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
import { getRandomNumber } from '@utils/number-utils'
import { debounce, merge } from 'lodash'

declare const Highcharts: any

@Component({
  selector: 'app-highmaps',
  templateUrl: './highmaps.component.html',
  styleUrls: ['./highmaps.component.scss']
})

export class HighmapsComponent implements OnInit, OnDestroy {

  @Input() height: number
  @Input() width: number
  @Input() options: any

  @Output() highmapsLoad = new EventEmitter<any>()
  @Output() highmapsRedraw = new EventEmitter<any>()
  @Output() highmapsMouseOver = new EventEmitter<any>()
  @Output() highmapsMouseOut = new EventEmitter<any>()
  @Output() highmapsZoom = new EventEmitter<any>()

  ext0: any
  highmapsContainerId: string
  highmapsLoadInterval: any
  map: any
  zoomLevel: number

  constructor() {
    this.onHighmapsLoad = this.onHighmapsLoad.bind(this)
    this.onHighmapsRedraw = this.onHighmapsRedraw.bind(this)
    this.onHighmapsMouseOver = this.onHighmapsMouseOver.bind(this)
    this.onHighmapsMouseOut = this.onHighmapsMouseOut.bind(this)
    this.onHighmapsZoom = debounce(this.onHighmapsZoom.bind(this), 100, {leading: false, trailing: true})
  }

  ngOnInit() {
    this.highmapsContainerId = 'highmaps-container' + getRandomNumber()
    this.options = merge({}, this.options, {
      chart: {
        events: {
          load: this.onHighmapsLoad,
          redraw: this.onHighmapsRedraw
        }
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        series: {
          point: {
            events: {
              mouseOver: this.onHighmapsMouseOver,
              mouseOut: this.onHighmapsMouseOut
            }
          }
        }
      }
    })

    setTimeout(() => {
      this.map = Highcharts.mapChart(this.highmapsContainerId, this.options)
    })
  }

  ngOnDestroy() {
    clearInterval(this.highmapsLoadInterval)
  }

  private onHighmapsLoad(evt) {
    this.highmapsLoadInterval = setInterval(() => {
      if (this.map && this.map.axes) {
        this.highmapsLoad.emit(this.getEmitObj(evt))
        this.ext0 = this.map.axes[0].getExtremes()
        clearInterval(this.highmapsLoadInterval)
      }
    }, 50)
  }

  private onHighmapsRedraw(evt) {
    this.highmapsRedraw.emit(this.getEmitObj(evt))
    this.onHighmapsZoom(evt)
  }

  private onHighmapsMouseOver(evt) {
    this.highmapsMouseOver.emit(this.getEmitObj(evt))
  }

  private onHighmapsMouseOut(evt) {
    this.highmapsMouseOut.emit(this.getEmitObj(evt))
  }

  private onHighmapsZoom(evt) {
    const ext1 = this.map.axes[0].getExtremes()
    const zoom = (ext1.max - ext1.min) / (this.ext0.max - this.ext0.min)
    const temp = Number((zoom).toFixed(3))
    if (this.zoomLevel !== temp) {
      const emitObj = this.getEmitObj(evt)
      this.zoomLevel = temp
      emitObj.zoomLevel = this.zoomLevel
      this.highmapsZoom.emit(emitObj)
    }
  }

  private getEmitObj(evt): any {
    return {evt, map: this.map}
  }
}