OSM地图中Polyline无法显示的问题排查求助

我以Node作为后端，正在使用OSM和Leaflet绘制路径。前端的leaflet2.html脚本标签中包含以下代码：

const mymap = L.map("map");

async function getGeoJSONArr() {
  const response = await fetch("http://localhost:3000/data");
  const jsonArr = await response.json();
  console.log("jsonARR", jsonArr);
  const reversedCoords = jsonArr[0].slice().reverse();
  console.log(reversedCoords);
  return { jsonArr: jsonArr, reversedCoords: reversedCoords };
}

(async function buildMap(params) {
  const o = await getGeoJSONArr();
  console.log(o);
  const polyline1 = o.jsonArr;
  const reversedCoords = o.reversedCoords;
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    maxZoom: 18,
  }).addTo(mymap);

  mymap.setView(reversedCoords, 13);

  // Add a polyline
  L.polyline(polyline1, { color: "blue" }).addTo(mymap);
})();

控制台输出如下：

{jsonArr: Array(5), 
reversedCoords: Array(2)}jsonArr: Array(5)0: (2) [-110.9582708, 31.9323673]

1: (2) [-110.9579731, 31.9323537]2: (2) [-110.9576486, 31.9323673]3: (2) [-110.955342, 31.931959]4: (2) [-110.952628, 31.931936]length: 5[[Prototype]]: Array(0)
reversedCoords: (2) [31.9323673, -110.9582708][[Prototype]]: Object

控制台无任何报错，预期能在地图上看到Polyline，但实际并未显示，请问哪里操作出错了？

问题出在坐标顺序上：Leaflet要求的坐标格式是[纬度, 经度]，但你从后端获取的jsonArr里的坐标是[经度, 纬度]（比如第一个坐标[-110.9582708, 31.9323673]里，-110是经度，31是纬度）。

你只反转了第一个坐标用来设置地图视图，但整条Polyline的所有坐标都没调整顺序，导致线条的位置和当前地图视图完全不匹配，所以看不到。

解决步骤： #

把polyline1的所有坐标都反转顺序，转换成Leaflet需要的格式：

修改buildMap函数里的代码，替换const polyline1 = o.jsonArr;这一行：

// 反转每个坐标对的顺序，从[经,纬]转成[纬,经]
const polyline1 = o.jsonArr.map(coord => coord.slice().reverse());

这样处理后，Polyline的坐标格式就符合Leaflet的要求，就能在地图上显示出来了。

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