amcharts角度zoomlevelchanged事件

Question

当我单击某个国家/地区时，zoomlevelchanged事件被触发了一百次！我希望它最多可以触发2次。

是故意的还是做错了什么？

我想提供一个Codepen示例帖子，但是如果我在下面插入代码，它将失败：

  chart.events.on("zoomlevelchanged", function(e) {
    console.log(e);
  });

在我看来，不应经常触发该事件，因为如果需要计算某事件，它将占用一些资源。根据缩放级别。

有人放大地图时，是否可以使用另一个事件做出反应？它不应受缩放方向的约束，例如向上或向下，并且在鼠标和智能手机输入之间也不应有所不同。

完整代码：

import { Component, NgZone, AfterViewInit, OnDestroy } from "@angular/core";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnDestroy {
  private chart: am4maps.MapChart;

  constructor(private zone: NgZone) { }

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      // create map instance
      let chart = am4core.create("mapdiv", am4maps.MapChart);

      // set map definition
      chart.geodata = am4geodata_worldLow;

      // set projection
      chart.projection = new am4maps.projections.Miller();

      // Create map polygon series
      var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

      // Configure series
      let polygonTemplate = this.configureTemplate(polygonSeries.mapPolygons.template);

      // Make map load polygon (like country names) from GeoJSON
      polygonSeries.useGeodata = true;

      // Use data instead for additional information
      polygonSeries.data = [{
        "id": "US",
        "name": "United States",
        "value": 100,
        "fill": am4core.color("#F05C5C")
      }, {
        "id": "FR",
        "name": "France",
        "value": 50,
        "fill": am4core.color("#5C5CFF")
      }];


      polygonTemplate.propertyFields.fill = "fill";

      // exclude antarktika
      polygonSeries.exclude = ["AQ"];

      // include germany only
      // polygonSeries.include = ["DE"];

      // ImageSeries (for adding visual objects like markers)
      let imageSeries = chart.series.push(new am4maps.MapImageSeries());
      // Basic Circle Image
      let imageSeriesTemplate = imageSeries.mapImages.template;
      let circle = imageSeriesTemplate.createChild(am4core.Circle);
      circle.radius = 4;
      circle.fill = am4core.color("#B27799");
      circle.stroke = am4core.color("#FFFFFF");
      circle.strokeWidth = 2;
      circle.nonScaling = true;
      circle.tooltipText = "{title}";

      // Binding Marker Properties to Data
      imageSeriesTemplate.propertyFields.latitude = "latitude";
      imageSeriesTemplate.propertyFields.longitude = "longitude";

      // Adding 3 Markers to the Map
      imageSeries.data = [{
        "latitude": 48.856614,
        "longitude": 2.352222,
        "title": "Paris"
      }, {
        "latitude": 40.712775,
        "longitude": -74.005973,
        "title": "New York"
      }, {
        "latitude": 49.282729,
        "longitude": -123.120738,
        "title": "Vancouver"
      }];

      // Adding Zoom Controls
      // chart.zoomControl = new am4maps.ZoomControl();

      // Heat map based on the value property in data
      // polygonSeries.heatRules.push({
      //   "property": "fill",
      //   "target": polygonSeries.mapPolygons.template,
      //   "min": am4core.color("#ffffff"),
      //   "max": am4core.color("#AAAA00")
      // });


      chart.events.on("zoomlevelchanged", function(e) {
        console.log(e);
      });

      // chart code goes here
      this.chart = chart;

    });
  }

  configureTemplate(polygonTemplate) {
    // Create ToolTip
    polygonTemplate.tooltipText = "{name}";
    //  Fill Template Color
    polygonTemplate.fill = am4core.color("#BADA55");

    // Create hover state 
    let hoverState = polygonTemplate.states.create("hover");
    // set alternative Fill Color when hovering
    hoverState.properties.fill = am4core.color("#367B25");

    // show additional data in tooltip, akquired from polygonSeries.data
    polygonTemplate.tooltipText = "{name}: {value}";

    // Zooming to map area on click
    polygonTemplate.events.on("hit", function(ev){
      ev.target.series.chart.zoomToMapObject(ev.target)
    });

    return polygonTemplate;
  }

  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.chart) {
        this.chart.dispose();
      }
    });
  }
}