我有一个 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
类型中定义。
如果您需要在应用程序中使用任何缺失的类型,您可以扩展 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