如何将GeoJSON的LangLat坐标转为LatLang，在Vue-Leaflet中绘制多边形？

遇到GeoJSON的[经度,纬度]和Leaflet要求的[纬度,经度]不匹配的问题很常见，尤其是处理不同层级的坐标数组时，递归转换是最稳妥的方案。下面给你一套完整的实现思路：

1. 通用坐标反转函数 #

首先写一个递归函数，它能自动处理任意嵌套层级的坐标数组（不管是单个点、多边形环还是带孔的多边形结构）：

function reverseCoordinates(coords) {
  // 基础情况：当前数组是[lon, lat]格式的坐标点，直接反转
  if (typeof coords[0] === 'number') {
    return [coords[1], coords[0]];
  }
  // 递归处理子数组
  return coords.map(reverseCoordinates);
}

这个函数的逻辑很简单：如果当前元素是数值（说明是单个坐标点的数组），就反转纬度和经度；如果是子数组，就遍历每个子元素继续递归转换。这样不管你的坐标是[lon, lat]、[[lon1, lat1], ...]还是[[[outer...]], [[inner...]]]，都能正确转换。

2. 在Vue组件中集成 #

结合Vue-Leaflet的<l-polygon>组件，你可以用计算属性来实时转换原始坐标：

<template>
  <!-- 使用转换后的坐标 -->
  <l-polygon :lat-lngs="formattedCoordinates" />
</template>

<script>
export default {
  data() {
    return {
      // 这里替换成你从GeoJSON读取的原始坐标
      rawGeoJsonCoords: [[[116.397, 39.908], [116.407, 39.908], [116.407, 39.918], [116.397, 39.918]]]
    };
  },
  computed: {
    formattedCoordinates() {
      // 调用反转函数处理原始坐标
      return this.reverseCoordinates(this.rawGeoJsonCoords);
    }
  },
  methods: {
    reverseCoordinates(coords) {
      if (typeof coords[0] === 'number') {
        return [coords[1], coords[0]];
      }
      return coords.map(this.reverseCoordinates);
    }
  }
};
</script>

3. 适配完整GeoJSON Feature #

如果你的数据是完整的GeoJSON Feature对象，只需要提取geometry.coordinates部分传入转换函数即可：

// 假设geoJsonFeature是你的完整Feature对象
const rawCoords = geoJsonFeature.geometry.coordinates;
const formattedCoords = this.reverseCoordinates(rawCoords);

这样处理后，<l-polygon>就能正确识别并渲染多边形了。

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