React-Leaflet中如何反转坐标？解决多边形绘制错位问题

问题根源是坐标顺序搞反了：Leaflet（包括react-leaflet）要求坐标格式为**[纬度, 经度]**，但你当前的多边形、地图中心、标记点坐标都把经度放在了前面，纬度在后面，导致图形偏移到了错误区域。

修正方法 #

把所有坐标对的两个数值反转顺序，将[经度, 纬度]调整为[纬度, 经度]即可。

修改后的完整代码 #

import { LatLngExpression } from "leaflet";
import { MapContainer, Marker, Polygon, Popup, TileLayer } from "react-leaflet";
import "./App.css";

const App: React.FC = () => {
  const purpleOptions = { color: "purple" };

  // 反转每个坐标对的顺序，改为[纬度, 经度]
  const polygon: LatLngExpression[] = [
    [-17.461451, -59.019286],
    [-17.461451, -52.197749],
    [-12.684053, -52.197749],
    [-12.684053, -59.019286],
  ];


  return (
    <MapContainer
      // 同步反转地图中心坐标
      center={[-15.289267763, -54.125496427]}
      zoom={5} // 适当调高缩放级别，更清晰展示巴西区域
      scrollWheelZoom={true}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[-15.289267763, -54.125496427]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
      <Polygon pathOptions={purpleOptions} positions={polygon} />
    </MapContainer>
  );
};

export default App;

批量处理坐标的小技巧 #

如果后续有大量坐标需要转换，可以写一个简单的工具函数批量反转：

const reverseCoords = (coords: LatLngExpression[]) => {
  return coords.map(([lon, lat]) => [lat, lon] as LatLngExpression);
};

// 使用示例
const originalPolygon = [
    [-59.019286, -17.461451],
    [-52.197749, -17.461451],
    [-52.197749, -12.684053],
    [-59.019286, -12.684053],
];
const polygon = reverseCoords(originalPolygon);

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