如何组装经纬度坐标数组传递给Vue组件渲染leaflet-vue折线

核心逻辑 #

利用数组map方法，将每条路线下shapes数组里的坐标点按原有顺序转换为[lat, lng]格式的二维数组，直接传入l-polyline组件的lat-lngs参数即可，不需要编写复杂的多层遍历组装逻辑。

两种可直接复用的实现方式 #

方式1：模板内直接转换（代码量最少） #

直接在遍历路线时完成坐标转换，适合中小数据量场景：

<template>
  <div>
    <!-- 原有遍历展示坐标点的代码可直接保留 -->
    <div v-for="route in routeShapes">
      <div v-for="shape in route.shapes">
        {{ shape.lat}} {{ shape.lng }}
      </div>
      <br>
    </div>

    <!-- 地图渲染部分 -->
    <l-map style="height: 800px;">
      <!-- 替换为项目中实际使用的瓦片层组件 -->
      <l-tile-layer />
      <!-- 遍历每条路线生成独立折线 -->
      <l-polyline
        v-for="route in routeShapes"
        :key="route.routeId"
        :lat-lngs="route.shapes.map(shape => [shape.lat, shape.lng])"
        color="green"
      />
    </l-map>
  </div>
</template>

注意：:key绑定的值替换为路线数据中的唯一标识字段即可，不要使用数组索引，避免出现渲染异常。

方式2：计算属性预处理（性能更优） #

如果路线数据量较大，或者转换后的坐标数组需要在多处复用，可以通过计算属性提前完成数据转换，避免模板重复执行计算：

<script setup>
import { computed } from 'vue'
// 替换为实际的routeShapes数据源，此处以props接收为例
const props = defineProps({
  routeShapes: {
    type: Array,
    required: true
  }
})

// 预处理所有路线的折线坐标
const polylineList = computed(() => {
  return props.routeShapes.map(route => {
    return {
      routeId: route.routeId,
      path: route.shapes.map(point => [point.lat, point.lng])
    }
  })
})
</script>

<template>
  <l-map style="height: 800px;">
    <l-tile-layer />
    <l-polyline
      v-for="line in polylineList"
      :key="line.routeId"
      :lat-lngs="line.path"
      color="green"
    />
  </l-map>
</template>

格式校验说明 #

转换后的坐标数组结构完全匹配组件入参要求：

[
  [lat1, lng1],
  [lat2, lng2],
  [lat3, lng3]
]

坐标点顺序和原始shapes数组顺序完全一致，不会出现折线点顺序错乱的问题。如果原始数据中存在缺失经纬度的无效点，可以在map时增加过滤逻辑避免渲染报错。

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