如何实现鼠标滚轮缩放至一定比例时切换HighchartMap与OpenStreetMap？

实现思路 #

• 监听地图缩放事件（通过afterSetExtremes事件捕获经纬度轴范围变化）
• 设定缩放阈值：通过计算当前地图经纬度范围的面积判断放大程度（范围越小，放大级别越高）
• 放大至阈值时：隐藏原HighchartMap图层，加载OpenStreetMap瓦片图层
• 缩小至阈值以下时：恢复原HighchartMap图层，移除OpenStreetMap瓦片图层

完整实现代码 #

<div id="container" style="height: 600px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<script>
// 设定缩放阈值（经纬度范围面积，值越小代表放大程度越高）
const zoomThreshold = 10000;

Highcharts.mapChart('container', {
    chart: {
        map: 'custom/world',
        events: {
            afterSetExtremes: function(e) {
                const chart = this;
                // 计算当前地图范围面积，判断缩放程度
                const currentRangeArea = (e.xAxis.max - e.xAxis.min) * (e.yAxis.max - e.yAxis.min);
                const isZoomedIn = currentRangeArea < zoomThreshold;

                if (isZoomedIn && !chart.osmActive) {
                    // 切换到OpenStreetMap
                    chart.series[0].hide();
                    chart.update({
                        chart: {
                            map: null
                        },
                        title: {
                            text: 'OpenStreetMap'
                        },
                        tileLayer: {
                            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                            attribution: '&copy; OpenStreetMap contributors'
                        }
                    }, false);
                    chart.osmActive = true;
                    chart.redraw();
                } else if (!isZoomedIn && chart.osmActive) {
                    // 切换回HighchartMap
                    chart.update({
                        chart: {
                            map: 'custom/world'
                        },
                        title: {
                            text: 'HighchartMap'
                        },
                        tileLayer: null
                    }, false);
                    chart.series[0].show();
                    chart.osmActive = false;
                    chart.redraw();
                }
            }
        }
    },
    title: {
        text: 'HighchartMap'
    },
    legend: {
        enabled: false
    },
    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },
    series: [{
        name: 'Countries',
        color: '#E0E0E0',
        enableMouseTracking: false
    }]
});
</script>

关键说明 #

• zoomThreshold可按需调整：数值越小，触发切换到OpenStreetMap的放大程度越高
• 切换时通过chart.update()修改地图配置，结合hide()/show()控制原图层显示状态
• 自定义标记osmActive用于避免重复触发切换逻辑

内容的提问来源于stack exchange，提问作者Oleg Kuznetsov