I have an array of objects as follows:
this.gridcrds = [
[
{
"lat": 51.00445965809624,
"lng": 5.505536355741434
},
{
"lat": 51.00431971638806,
"lng": 5.505461423372382
},
{
"lat": 51.00417977463196,
"lng": 5.505386491455417
},
{
"lat": 51.00403983282792,
"lng": 5.505311559990534
},
{
"lat": 51.00389989097598,
"lng": 5.505236628977724
},
{
"lat": 51.00375994907609,
"lng": 5.505161698416986
},
{
"lat": 51.00362000712828,
"lng": 5.505086768308312
}
],
[
{
"lat": 51.00440846173839,
"lng": 5.505785160705168
},
{
"lat": 51.00426821144456,
"lng": 5.505709911534925
},
{
"lat": 51.00412796110243,
"lng": 5.50563466281968
},
{
"lat": 51.00398771071194,
"lng": 5.5055594145594275
},
{
"lat": 51.00384746027312,
"lng": 5.505484166754162
},
{
"lat": 51.00370720978598,
"lng": 5.5054089194038776
},
{
"lat": 51.0035669592505,
"lng": 5.50533367250857
}
],
[
{
"lat": 51.004357264852146,
"lng": 5.506033965119733
},
{
"lat": 51.00421670597403,
"lng": 5.505958399145694
},
{
"lat": 51.004076147047186,
"lng": 5.505882833629572
},
{
"lat": 51.003935588071585,
"lng": 5.505807268571363
},
{
"lat": 51.00379502904726,
"lng": 5.505731703971063
},
{
"lat": 51.003654469974194,
"lng": 5.5056561398286625
},
{
"lat": 51.00351391085237,
"lng": 5.505580576144162
}
],
[
{
"lat": 51.00430606743754,
"lng": 5.506282768985127
},
{
"lat": 51.00416519997647,
"lng": 5.506206886204688
},
{
"lat": 51.00402433246626,
"lng": 5.506131003885096
},
{
"lat": 51.00388346490688,
"lng": 5.506055122026344
},
{
"lat": 51.00374259729837,
"lng": 5.505979240628427
},
{
"lat": 51.00360172964068,
"lng": 5.505903359691342
},
{
"lat": 51.003460861933874,
"lng": 5.505827479215082
}
]
]
This is the image of pitch which has blocks and each block has coordinates as given in above array:
and the following code is doing them restructure but not making a square block.
this.blocksVertices = this.gridsCrds.slice(1).flatMap((row: any, y: any) =>
row.slice(1).map((_: any, x: any) => [
...this.gridsCrds[y].slice(x, x 2),
...row.slice(x, x 2)
]));
and provides me with the following result:
[
[
{
"lat": 51.00445965809624,
"lng": 5.505536355741434
},
{
"lat": 51.00431971638806,
"lng": 5.505461423372382
},
{
"lat": 51.00440846173839,
"lng": 5.505785160705168
},
{
"lat": 51.00426821144456,
"lng": 5.505709911534925
}
],
[
{
"lat": 51.00431971638806,
"lng": 5.505461423372382
},
{
"lat": 51.00417977463196,
"lng": 5.505386491455417
},
{
"lat": 51.00426821144456,
"lng": 5.505709911534925
},
{
"lat": 51.00412796110243,
"lng": 5.50563466281968
}
],
[
{
"lat": 51.00417977463196,
"lng": 5.505386491455417
},
{
"lat": 51.00403983282792,
"lng": 5.505311559990534
},
{
"lat": 51.00412796110243,
"lng": 5.50563466281968
},
{
"lat": 51.00398771071194,
"lng": 5.5055594145594275
}
],
[
{
"lat": 51.00403983282792,
"lng": 5.505311559990534
},
{
"lat": 51.00389989097598,
"lng": 5.505236628977724
},
{
"lat": 51.00398771071194,
"lng": 5.5055594145594275
},
{
"lat": 51.00384746027312,
"lng": 5.505484166754162
}
],
[
{
"lat": 51.00389989097598,
"lng": 5.505236628977724
},
{
"lat": 51.00375994907609,
"lng": 5.505161698416986
},
{
"lat": 51.00384746027312,
"lng": 5.505484166754162
},
{
"lat": 51.00370720978598,
"lng": 5.5054089194038776
}
],
[
{
"lat": 51.00375994907609,
"lng": 5.505161698416986
},
{
"lat": 51.00362000712828,
"lng": 5.505086768308312
},
{
"lat": 51.00370720978598,
"lng": 5.5054089194038776
},
{
"lat": 51.0035669592505,
"lng": 5.50533367250857
}
],
[
{
"lat": 51.00440846173839,
"lng": 5.505785160705168
},
{
"lat": 51.00426821144456,
"lng": 5.505709911534925
},
{
"lat": 51.004357264852146,
"lng": 5.506033965119733
},
{
"lat": 51.00421670597403,
"lng": 5.505958399145694
}
],
[
{
"lat": 51.00426821144456,
"lng": 5.505709911534925
},
{
"lat": 51.00412796110243,
"lng": 5.50563466281968
},
{
"lat": 51.00421670597403,
"lng": 5.505958399145694
},
{
"lat": 51.004076147047186,
"lng": 5.505882833629572
}
],
[
{
"lat": 51.00412796110243,
"lng": 5.50563466281968
},
{
"lat": 51.00398771071194,
"lng": 5.5055594145594275
},
{
"lat": 51.004076147047186,
"lng": 5.505882833629572
},
{
"lat": 51.003935588071585,
"lng": 5.505807268571363
}
],
[
{
"lat": 51.00398771071194,
"lng": 5.5055594145594275
},
{
"lat": 51.00384746027312,
"lng": 5.505484166754162
},
{
"lat": 51.003935588071585,
"lng": 5.505807268571363
},
{
"lat": 51.00379502904726,
"lng": 5.505731703971063
}
],
[
{
"lat": 51.00384746027312,
"lng": 5.505484166754162
},
{
"lat": 51.00370720978598,
"lng": 5.5054089194038776
},
{
"lat": 51.00379502904726,
"lng": 5.505731703971063
},
{
"lat": 51.003654469974194,
"lng": 5.5056561398286625
}
],
[
{
"lat": 51.00370720978598,
"lng": 5.5054089194038776
},
{
"lat": 51.0035669592505,
"lng": 5.50533367250857
},
{
"lat": 51.003654469974194,
"lng": 5.5056561398286625
},
{
"lat": 51.00351391085237,
"lng": 5.505580576144162
}
],
[
{
"lat": 51.004357264852146,
"lng": 5.506033965119733
},
{
"lat": 51.00421670597403,
"lng": 5.505958399145694
},
{
"lat": 51.00430606743754,
"lng": 5.506282768985127
},
{
"lat": 51.00416519997647,
"lng": 5.506206886204688
}
],
[
{
"lat": 51.00421670597403,
"lng": 5.505958399145694
},
{
"lat": 51.004076147047186,
"lng": 5.505882833629572
},
{
"lat": 51.00416519997647,
"lng": 5.506206886204688
},
{
"lat": 51.00402433246626,
"lng": 5.506131003885096
}
],
[
{
"lat": 51.004076147047186,
"lng": 5.505882833629572
},
{
"lat": 51.003935588071585,
"lng": 5.505807268571363
},
{
"lat": 51.00402433246626,
"lng": 5.506131003885096
},
{
"lat": 51.00388346490688,
"lng": 5.506055122026344
}
],
[
{
"lat": 51.003935588071585,
"lng": 5.505807268571363
},
{
"lat": 51.00379502904726,
"lng": 5.505731703971063
},
{
"lat": 51.00388346490688,
"lng": 5.506055122026344
},
{
"lat": 51.00374259729837,
"lng": 5.505979240628427
}
],
[
{
"lat": 51.00379502904726,
"lng": 5.505731703971063
},
{
"lat": 51.003654469974194,
"lng": 5.5056561398286625
},
{
"lat": 51.00374259729837,
"lng": 5.505979240628427
},
{
"lat": 51.00360172964068,
"lng": 5.505903359691342
}
],
[
{
"lat": 51.003654469974194,
"lng": 5.5056561398286625
},
{
"lat": 51.00351391085237,
"lng": 5.505580576144162
},
{
"lat": 51.00360172964068,
"lng": 5.505903359691342
},
{
"lat": 51.003460861933874,
"lng": 5.505827479215082
}
]
]
It should be in the following format. Third object should be at the fourth position. and first object should be on the last position as well.
[
[
{ lat: 51.00445965809624, lng: 5.505536355741434 },
{ lat: 51.00431971638806, lng: 5.505461423372382 },
{ lat: 51.00426821144456, lng: 5.505709911534925 },
{ lat: 51.00440846173839, lng: 5.505785160705168 },
{ lat: 51.00445965809624, lng: 5.505536355741434 }
],
[
{ "lat": 51.00431971638806,"lng": 5.505461423372382 },
{ "lat": 51.00417977463196,"lng": 5.505386491455417 },
{ "lat": 51.00412796110243,"lng": 5.50563466281968 },
{ "lat": 51.00426821144456,"lng": 5.505709911534925 },
{ "lat": 51.00431971638806,"lng": 5.505461423372382 }
],
[
...
],
[
...
]
]
Can I update this array of objects so that I can make square blocks on google map?
CodePudding user response：
The difference between the current output and the desired output is that the current output gives the four unique points of the square in the order (top-left, top-right, bottom-left, bottom-right), while the desired output has the first point repeated at the end, and follows a clockwise order: (top-left, top-right, bottom-right, bottom-left, top-left).
So change the existing code to call .reverse() on the two bottom points, and add the first point to the inner array:
this.blocksVertices = this.gridsCrds.slice(1).flatMap((row, y) =>
row.slice(1).map((_, x) => [
...this.gridsCrds[y].slice(x, x 2),
...row.slice(x, x 2).reverse(), // <-- reversed order
this.gridsCrds[y][x] // <-- add top-left again
]));
As a runnable snippet:
this.gridsCrds = [[{"lat": 51.00445965809624,"lng": 5.505536355741434},{"lat": 51.00431971638806,"lng": 5.505461423372382},{"lat": 51.00417977463196,"lng": 5.505386491455417},{"lat": 51.00403983282792,"lng": 5.505311559990534},{"lat": 51.00389989097598,"lng": 5.505236628977724},{"lat": 51.00375994907609,"lng": 5.505161698416986},{"lat": 51.00362000712828,"lng": 5.505086768308312}],[{"lat": 51.00440846173839,"lng": 5.505785160705168},{"lat": 51.00426821144456,"lng": 5.505709911534925},{"lat": 51.00412796110243,"lng": 5.50563466281968},{"lat": 51.00398771071194,"lng": 5.5055594145594275},{"lat": 51.00384746027312,"lng": 5.505484166754162},{"lat": 51.00370720978598,"lng": 5.5054089194038776},{"lat": 51.0035669592505,"lng": 5.50533367250857}],[{"lat": 51.004357264852146,"lng": 5.506033965119733},{"lat": 51.00421670597403,"lng": 5.505958399145694},{"lat": 51.004076147047186,"lng": 5.505882833629572},{"lat": 51.003935588071585,"lng": 5.505807268571363},{"lat": 51.00379502904726,"lng": 5.505731703971063},{"lat": 51.003654469974194,"lng": 5.5056561398286625},{"lat": 51.00351391085237,"lng": 5.505580576144162}],[{"lat": 51.00430606743754,"lng": 5.506282768985127},{"lat": 51.00416519997647,"lng": 5.506206886204688},{"lat": 51.00402433246626,"lng": 5.506131003885096},{"lat": 51.00388346490688,"lng": 5.506055122026344},{"lat": 51.00374259729837,"lng": 5.505979240628427},{"lat": 51.00360172964068,"lng": 5.505903359691342},{"lat": 51.003460861933874,"lng": 5.505827479215082}]];
this.blocksVertices = this.gridsCrds.slice(1).flatMap((row, y) =>
row.slice(1).map((_, x) => [
...this.gridsCrds[y].slice(x, x 2),
...row.slice(x, x 2).reverse(),
this.gridsCrds[y][x]
]));
console.log(JSON.stringify(this.blocksVertices, null, 2));