AmCharts 4 Maps加载自定义GeoJSON地图显示区域反转问题求助

这个问题的核心是你导出的GeoJSON多边形坐标环绕顺序不符合渲染要求：GeoJSON规范要求多边形外环坐标按逆时针顺序排列，顺时针的坐标就会导致渲染引擎把多边形外部判定为内部，出现你遇到的区域反转问题。

你可以任选下面一种方法解决：

方法1：QGIS导出前调整（一劳永逸） #

在QGIS导出GeoJSON时，勾选导出设置中的「强制符合RFC 7946规范」/「强制右手定则」选项，或者提前对图层执行「修复几何」工具后再导出，新生成的GeoJSON导入AmCharts就不会出现反转问题。

方法2：前端直接翻转坐标 #

如果不想重新导出文件，可以在前端导入后手动翻转坐标顺序，适配渲染要求：

import nigeria from "./maps/countries/nigeriaNorth";

// 翻转MultiPolygon的坐标环顺序
nigeria.geometry.coordinates.forEach(polygon => {
  polygon.forEach(ring => ring.reverse())
})

let countriesSeries = chart.series.push(new am4maps.MapPolygonSeries());
countriesSeries.useGeodata = true;
countriesSeries.geodata = nigeria;

方法3：用AmCharts内置配置直接修正（最便捷） #

AmCharts 4的MapPolygonSeries本身提供了反转渲染区域的配置，只需要加一行参数即可：

import nigeria from "./maps/countries/nigeriaNorth";

let countriesSeries = chart.series.push(new am4maps.MapPolygonSeries());
countriesSeries.useGeodata = true;
countriesSeries.geodata = nigeria;
countriesSeries.invert = true; // 新增这一行直接反转渲染区域

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