How do I build an array of these coordinates to pass to a vue component?-CodePudding

I have an object Routes, which contains a Shapes objects, which each represents a geographical point, which each has a latitude and longitude.

I can display each of of these by doing the following:

<div v-for="route in routeShapes">

    <div v-for="shape in route.shapes">
        {{ shape.lat}} {{ shape.lng }}
    </div>
    <br>

</div>

Each polyline should represent a route, which is composed of multiple Shapes(points). I understand how to use the Polyline component in the leaflet-vue library, but I'm not sure how I would go about doing a v-for that would give me all of the route's shapes in one array to give to the polyline

[
    [shape.lat, shape.lng],
    [shape2.lat, shape2.lng],
    [shape3.lat, shape3.lng],
    [shape4.lat, shape4.lng]
]

I imagine that I can use a method or computed property to assemble this array structure, but I don't know how to define the logic that would map the four coordinates.

Polyline accepts an array like this to build a shape:

<l-polyline
  :lat-lngs="[
    [47.334852, -1.509485],
    [47.342596, -1.328731],
    [47.241487, -1.190568],
    [47.234787, -1.358337],
  ]"
  color="green"
/>

So I want each polyline to represent a collection of shapes(points), which makes up a route. Each route should be its own polyline consisting of all of the points in sequence.

CodePudding user response：

If I understood the interface of the "Routes" object correctly you can use Array.prototype.map() method to achieve the intended structure of the array.

<template>
  <l-polyline
    v-for="polyline, index in polylines"
    :key="index"
    :lat-lngs="polyline"
    color="green"
  />
</template>
<script>
export default {
  name: 'Polyline',
  data() {
    return {
      routeShapes: [
        {shapes: [{lat: 1, lng: 2},{lat: 3, lng: 4},{lat: 5, lng: 6}]},
        {shapes: [{lat: 8, lng: 9},{lat: 10, lng: 11},{lat: 12, lng: 13}]},
        {shapes: [{lat: 14, lng: 15},{lat: 16, lng: 17},{lat: 18, lng: 19}]},
      ],
    }
  },
  computed: {
    polylines() {
      const polylines = [];
      this.routeShapes.forEach((route) => {
        const polyline = route.shapes.map((e) => [e.lat, e.lng])
        polylines.push(polyline);
      })
      return polylines;
    },
  },
}
</script>