如何使用两个值动态 render/load 我的数组？

Question

我是 Java Script 和 ReactJS 的初学者，我正在做一个项目来提高我的知识。

我会在地图上渲染一些多边形点，我使用的是google-maps-react库。

我有一个关于多边形的问题，为了能够在地图上绘制我必须以这种方式发送数据：

const coords = {
  coords: [
    [
      { lat: 25.774, lng: -80.19 },
      { lat: 18.466, lng: -66.118 },
      { lat: 32.321, lng: -64.757 },
      { lat: 25.774, lng: -80.19 },
    ],
    [
      { lat: 25.774, lng: -60.19 },
      { lat: 18.466, lng: -46.118 },
      { lat: 32.321, lng: -44.757 },
      { lat: 25.774, lng: -60.19 },
    ],
  ],
};

问题是我的坐标格式不同。它们采用以下格式：

[
  [
    [-47.7027099655629, -22.26485424139211],
    [-47.70271526762656, -22.26487408404245],
    [-47.70272860122938, -22.26486817968162],
    [-47.70275769033151, -22.26485486960603],
    [-47.7027803963492, -22.26483968832534],
    [-47.7027099655629, -22.26485424139211]
  ]
], [
  [
    [-47.70336262481528, -22.26561084941619],
    [-47.70336542334331, -22.26561213882109],
    [-47.70336596593334, -22.26561211173161],
    [-47.7033695288571, -22.2656092720629],
    [-47.70337969579747, -22.26560034650085],
    [-47.70336262481528, -22.26561084941619]
  ]
]

如你所见，它们是不同类型的对象，它们知道如何告诉我是否有任何 javascript 函数可以让我以与模型的模型相同的方式保留我的坐标数组图书馆 google-maps-react?

我希望我的数组看起来像这样：

const coords = {
  coords: [
    [
      { lat: -47.7027099655629, lng: -22.26485424139211 },
      { lat: -47.70271526762656, lng: -22.26487408404245 },
      { lat: -47.70275769033151, lng: -22.26485486960603 },
      { lat: -47.7027803963492, lng: -22.26483968832534 },
      { lat: -47.7027099655629, lng: -22.26485424139211 },
    ],
    [
      { lat: -47.70336262481528, lng: -22.26561084941619 },
      { lat: -47.70336542334331, lng: -22.26561213882109 },
      { lat: -47.70336596593334, lng: -22.26561211173161 },
      { lat: -47.70337969579747, lng: -22.26560034650085 },
      { lat: -47.70336262481528, lng: -22.26561084941619 },
    ],
  ],
};

我没有办法一个一个地更改这些数据，我的坐标原始文件将近八千行，所以我需要一个自动执行此操作的功能。

这是我尝试使用的原始数据：https://gist.githubusercontent.com/bernalvinicius/6213d045e6f1c360008489bb416e58b5/raw/b8b997bb7e8d640a41a76ae0214663499fe1d8e5/coordinates.json

谢谢！！

Answer 1

您必须使用循环函数映射该数据。由于在这里您需要遍历多个数组，因此我建议使用 reduce 函数。

如果你不知道什么是 reduce 函数，你应该先看看这里：https://www.w3schools.com/jsref/jsref_reduce.asp

基本上，您遍历每个元素并更改值。这是一个小例子，您可能需要根据需要进行调整：

const newCoordinates = coordinates.reduce((acc, curr) => {
  const newCoordiantes = curr[0].map((coord) => ({
    lat: coord[0],
    lng: coord[1]
  }));
  acc.push([newCoordiantes]);
  return acc;
}, []);

这是一个工作示例：https://codesandbox.io/s/sharp-cloud-nfx4k?file=/src/index.js

Answer 2

假设它是一个数组数组，您可以使用函数 reduce 和函数 map 来构建所需的输出。

let arr = [  [    [      [-47.7027099655629, -22.26485424139211],      [-47.70271526762656, -22.26487408404245],      [-47.70272860122938, -22.26486817968162],      [-47.70275769033151, -22.26485486960603],      [-47.7027803963492, -22.26483968832534],      [-47.7027099655629, -22.26485424139211]    ]  ], [    [      [-47.70336262481528, -22.26561084941619],      [-47.70336542334331, -22.26561213882109],      [-47.70336596593334, -22.26561211173161],      [-47.7033695288571, -22.2656092720629],      [-47.70337969579747, -22.26560034650085],      [-47.70336262481528, -22.26561084941619]    ]  ]];
let coords = {
  coords: arr.reduce((a, [c]) => a.concat([c.map(([lat, lng]) => ({lat, lng}))]), [])
};

console.log(coords);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

可以使用map方法。您似乎在彼此之间有 3 层数组，最后您有一个 [lat, lng] 的数组，您想要将其更改为 { lat, lng }，但似乎您有一层只包含一个sub-element 你想把它弄平。因此，您可以级联两个 map 调用（其中一个调用隐式解构 single-element 数组），如下所示：

const convert = arr => arr.map(([group]) => group.map(([lat, lng]) => ({ lat, lng })))

const inputData = [[[[-47.7027099655629,-22.26485424139211],[-47.70271526762656,-22.26487408404245],[-47.70272860122938,-22.26486817968162],[-47.70275769033151,-22.26485486960603],[-47.7027803963492,-22.26483968832534],[-47.7027099655629,-22.26485424139211]]],[[[-47.70336262481528,-22.26561084941619],[-47.70336542334331,-22.26561213882109],[-47.70336596593334,-22.26561211173161],[-47.7033695288571,-22.2656092720629],[-47.70337969579747,-22.26560034650085],[-47.70336262481528,-22.26561084941619]]]]

const outputData = convert(inputData)
console.log(outputData)

.as-console-wrapper { max-height: 100% !important; top: 0; }

请注意，您显示的输入数据的格式为 [...], [...]，它本身并不是一个完整的数据结构（它将是两个由逗号运算符连接的数组，这没有多大意义） .我猜应该有一个围绕它的外部数组 ([[...], [...]])，我在我的示例中添加了它（否则它不会工作）。

如何使用两个值动态 render/load 我的数组？

How to dynamically render/load my array with two values?

javascript

google-maps-react