问题描述
在使用highcharts地图实现钻取（drilldown）功能时，特别是当顶层地图是自定义svg文件转换而来的json数据（通常不包含highcharts内置的地理投影信息），而下层钻取地图是highcharts内置的topojson数据（通常包含明确的地理投影）时，用户可能会遇到一个特定问题。当从下层地图（例如某个州或区域的地图）钻取返回到上层地图（例如美国整体地图）时，上层地图会意外地旋转180度，导致地图倒置。
这个问题发生的根本原因在于，当从一个具有内置投影的TopoJSON地图（下层）返回到不依赖Highcharts内置投影的自定义SVG地图（上层）时，Highcharts尝试将之前应用于下层地图的投影逻辑再次应用于上层SVG地图。由于自定义SVG地图可能已经预先投影或根本不需要Highcharts的地理投影处理，这种不匹配的投影应用就会导致地图显示异常，表现为180度旋转。
解决方案
要解决Highcharts地图钻取后上层地图旋转180度的问题，关键在于在钻取上溯（drill up）操作完成后，明确告知Highcharts，当前的地图视图（即自定义SVG地图）不需要进行地理坐标投影处理。这可以通过在chart.events.afterDrillUp事件中，将mapView.projection.hasCoordinates属性设置为false来实现。
mapView.projection.hasCoordinates是一个内部标志，用于指示当前地图数据是否包含地理坐标，从而需要Highcharts的投影引擎进行转换。对于一个已经通过SVG转换而来的地图，它可能已经是一个平面坐标系，不需要Highcharts再进行地理投影。
实施步骤与代码示例
以下是具体的代码修改，展示如何在Highcharts配置中集成此解决方案：
Highcharts.mapChart('container', {
chart: {
events: {
// 当钻取下层地图时触发
drilldown: function(e) {
// 可在此处添加钻取下层前的自定义逻辑
console.log('Drilling down to:', e.point.name);
},
// 当钻取返回上层地图时触发
afterDrillUp: function(e) {
// 核心修复：在钻取上溯后，将hasCoordinates设置为false
// 这告诉Highcharts，当前视图（即顶层自定义SVG地图）不需要地理投影
if (this.mapView && this.mapView.projection) {
this.mapView.projection.hasCoordinates = false;
}
console.log('Drilled up. Current map view projection hasCoordinates set to false.');
}
}
},
title: {
text: 'Highcharts 地图钻取示例'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
// 假设 mapJason 包含顶层（如美国）的地图数据
series: mapJason,
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
breadcrumbs: {
floating: true,
relativeTo: 'spacingBox'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
},
// drilldown.series 属性用于定义钻取下层的地图数据
// 例如：
// series: [{
// id: 'california',
// mapData: californiaMapData, // 加州的TopoJSON数据
// data: [...]
// }]
}
});在上述代码中，关键的修改位于chart.events.afterDrillUp函数内部。当用户点击面包屑导航中的“USA”或其他上溯按钮时，afterDrillUp事件会被触发。此时，我们检查this.mapView和this.mapView.projection是否存在，然后将this.mapView.projection.hasCoordinates设置为false。这样，Highcharts就不会尝试对返回的顶层SVG地图应用不正确的地理投影，从而避免了180度旋转的问题。
注意事项与最佳实践
- 理解地图投影： Highcharts在处理地理地图时会使用投影将三维地球表面映射到二维平面。对于Highcharts内置的地图数据（如TopoJSON），通常会包含投影信息。然而，自定义SVG地图可能已经是一个平面表示，或者其坐标系统与Highcharts的默认投影不兼容。
- 适用场景： 此解决方案特别适用于混合使用自定义SVG地图（通常不含Highcharts内置投影信息）和Highcharts内置TopoJSON地图（含内置投影信息）的钻取场景。如果您的所有地图数据都统一使用Highcharts的内置投影或都不使用，则可能不需要此修复。
- 事件生命周期： afterDrillUp事件在Highcharts完成钻取上溯操作并更新图表视图之后触发，是修改mapView属性的理想时机。
- 调试： 如果问题依然存在，请检查您的mapJason数据源是否确实是一个不依赖Highcharts内置投影的自定义SVG转换数据。同时，可以在afterDrillUp事件中添加更多的console.log语句来观察this.mapView.projection的属性变化。
总结
通过在Highcharts地图钻取功能的afterDrillUp事件中，将mapView.projection.hasCoordinates属性设置为false，可以有效解决当混合使用自定义SVG地图和具有内置投影的TopoJSON地图时，钻取上溯后地图发生180度旋转的问题。这一简单而关键的配置调整，确保了不同类型地图数据在钻取过程中的正确渲染和显示，提升了用户体验。
