將物件資料修改為坐標，使其成為方形塊

我有一個物件陣列，如下所示：

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.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)
    ]));

并為我提供以下結果：

[
  [
    {
      "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
    }
  ]
]

它應該采用以下格式。第三個物件應該在第四個位置。并且第一個物件也應該在最后一個位置。

 [
  [
   { 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 }
  ],
  [
     ...
  ],
  [ 
     ...
  ]
 ] 

我可以更新這個物件陣列以便我可以在谷歌地圖上制作方塊嗎？

uj5u.com熱心網友回復：

當前輸出與期望輸出的區別在于，當前輸出按順序（左上、右上、左下、右下）給出了正方形的四個唯一點，而期望輸出具有第一個點在末尾重復，并遵循順時針順序：（左上，右上，右下，左下，左上）。

因此，更改現有代碼以呼叫.reverse()底部的兩個點，并將第一個點添加到內部陣列：

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
]));

作為一個可運行的片段：

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

標籤：javascript谷歌地图

上一篇：在一個表單中，如何只允許選擇一個物體的一部分？

下一篇：html2canvas無法捕獲谷歌靜態地圖