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防抖用于防止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}
  }
}

如何获得Highmaps缩放级别，并且有Highmaps缩放事件？

1 个答案: