0

我是 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

谢谢！！

4

3 回答 3

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

于 2020-08-22T11:21:50.627 回答
1

假设它是一个数组数组，您可以使用该函数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; }

于 2020-08-22T11:22:07.993 回答
0

您可以使用该map方法。您似乎彼此之间有 3 层数组，最后您有一个[lat, lng]要更改为的数组{ lat, lng }，但似乎您有一层仅包含一个您想要展平的子元素。因此，您可以级联两个map调用（其中一个隐式解构单元素数组），如下所示：

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; }

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

于 2020-08-22T11:31:32.613 回答