如何检测视图是否完全缩小到 highcharts 地图？

Question

我有一个 highcharts 地图，我希望在地图完全缩小或不缩小的情况下添加触发器。

但是我对图表和地图视图对象数据是否已达到最小缩放级别了解不够。

如何确定地图何时完全缩小？

我正在使用 highcharts 11.4.0、Typescript 和 React。

我当前正在使用

afterSetView

事件来确定视图何时更改：

// const chart: HighCharts.mapChart = ...


Highcharts.addEvent(chart.mapView, 'afterSetView', (/* event */) => {
    /*
     * `event.target` is an instance of `MapView`,
     *  or I can reference it just via. `chart.mapView`.
     */

    if (/* not fully zoomed out */) {
        onPanZoom();
    } else {
        onFit();
    }
});

我知道缩放级别也会根据视口大小而变化 - 较小的内容区域意味着最小缩放级别较低，以便使地图完全适合容器 - 因此我不能依赖静态值来确定最低缩放金额。

我还看到

minZoom

对象上有一个未记录的

mapView

键，但我使用的是打字稿，因此我无法访问该值，因为它没有在

Highcharts.MapView

类型中定义。

Answer 1

如果您需要在应用程序中使用任何缺失的类型，您可以扩展 Highcharts 类型声明。

interface extendedChart extends Higchcharts.Chart {
    mapView?: {
        minZoom: number;
        zoom: number;
    }
}

我相信确定

mapView

是否完全缩小的最简单方法是与简单的条件检查进行比较：

minZoom === zoom

，因为

minZoom

会在图表容器调整大小时不断更新，因此您不需要将其状态存储在代码中。

演示： https://stackblitz.com/edit/react-starter-typescript-ne8vie?file=App.tsx

参考： https://www.highcharts.com/docs/advanced-chart-features/highcharts-typescript-declarations#extending-highcharts-typing