HighCharts Map钻取问题：向上钻取后地图旋转180度

问题原因 #

你通过SVG转JSON生成的美国地图数据，向下钻取到州级地图后，点击面包屑“USA”向上钻取时地图倒置，核心原因是自定义地图的坐标系与HighCharts默认投影不匹配，向上钻取时HighCharts自动应用了默认校正逻辑，导致地图翻转。

修复步骤 #

1. 启用并配置mapView参数 #

当前代码中注释了mapView，需要启用它并设置匹配的投影、中心坐标和缩放级别，确保向上钻取后视图保持正确：

mapView: {
    projection: {
        name: 'WebMercator' // 与自定义地图投影保持一致
    },
    center: [-98.5795, 39.8283], // 美国地图中心经纬度
    zoom: 4 // 初始缩放级别
}

2. 修正地图JSON数据的坐标系 #

检查转换后的mapJason数据，确保包含正确的坐标系声明。如果没有crs字段，手动添加：

{
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:EPSG::3857" // WebMercator对应的EPSG编码
        }
    },
    // 其他地图特征数据...
}

3. 强制重置钻取后的视图（可选） #

如果上述方法无效，在afterDrillUp事件中手动重置地图视图：

function afterDrillUp() {
    this.mapView.setView({
        center: [-98.5795, 39.8283],
        zoom: 4,
        projection: 'WebMercator'
    });
}

修改后的核心代码片段 #

Highcharts.mapChart('container', {
    chart: {
        events: {
            drilldown,
            afterDrillUp
        }
    },

    title: {
        text: 'Highcharts Map Drilldown'
    },

    mapView: {
        projection: {
            name: 'WebMercator'
        },
        center: [-98.5795, 39.8283],
        zoom: 4
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    plotOptions: {
        map: {
            states: {
                hover: {
                    color: '#EEDD66'
                }
            }
        }
    },

    series: mapJason,

    drilldown: {
        activeDataLabelStyle: {
            color: '#FFFFFF',
            textDecoration: 'none',
            textOutline: '1px #000000'
        },
        breadcrumbs: {
            floating: true,
            relativeTo: 'spacingBox'
        },
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                x: 0,
                y: 60
            }
        }
    }
});

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