Search code examples
svgcoordinatesopenlayersopenlayers-6

Get geometry from flatCoordinates derived from VectorTile layer

We have a VectorTile layer from which we want to retrieve individual geometries in order to build a svg. There are polygons that have holes and therefore the flatCoordinates_ Array does not provide enough information per-se to reconstruct the polygon with holes.

flatCoordinates_: Array(38)
0: 1767257.5351531499
1: 6175806.137329102
2: 1767786.0255440278
3: 6175733.2832865175
4: 1767836.7845081235
5: 6175407.828752021
6: 1767832.0071938557
7: 6175403.051437754
8: 1767182.889617715
9: 6175493.223244559
10: 1767178.7094677307
11: 6175499.792051678
12: 1767205.5818604873
13: 6175599.518487018
14: 1767243.80037463
15: 6175738.657765068
16: 1767257.5351531499
17: 6175806.137329102
18: 1767673.1614944504
19: 6175498.597723111
20: 1767664.8011944818
21: 6175498.597723111
22: 1767664.2040301983
23: 6175490.834587425
24: 1767673.1614944504
25: 6175490.2374231415
26: 1767673.1614944504
27: 6175498.597723111
28: 1767502.372509376
29: 6175583.395051364
30: 1767494.012209407
31: 6175583.395051364
32: 1767494.6093736906
33: 6175575.034751396
34: 1767501.7753450924
35: 6175575.034751396
36: 1767502.372509376
37: 6175583.395051364
length: 38

OpenLayers must at some point have access to the original geometry. Else it could not correctly display the holes. How can we reconstruct the original geometry from the flatCoordinates_?

OpenLayers Polygon with Holes

Edit: My ends are [18, 28, 38].

Solution

  • OpenLayers seems to flatten all geometries for internal use (probably for performance reasons). If you have access to the "ends" property of the feature, you could inflate your geometry using https://github.com/openlayers/openlayers/blob/main/src/ol/geom/flat/inflate.js:

    import { inflateCoordinatesArray } from "ol/geom/flat/inflate"

const inflatedCoordinates = inflateCoordinatesArray(
  feature.getFlatCoordinates(), // flat coordinates
  0, // offset
  feature.getEnds(), // geometry end indices
  2, // stride
)

    This does two things:

    • it pairs the coordinates back into separate x/y arrays
    • at every end index (this is the array you get from feature.getEnds()) it creates a new geometry, resulting in multiple geometries

    Edit: Assuming feature.getEnds() returns [18, 28, 38] (as mentioned in your comment), the inflateCoordinatesArray function would return the following array:

    [
  [
    [ 1767257.535153149, 6175806.435911242 ], 
    [ 1767786.3241261686, 6175732.984704374 ], 
    [ 1767837.0830902644, 6175407.82875202 ], 
    [ 1767832.0071938548, 6175402.752855611 ], 
    [ 1767182.889617714, 6175492.924662416 ], 
    [ 1767178.410885588, 6175499.493469534 ], 
    [ 1767205.8804426282, 6175599.518487017 ], 
    [ 1767243.800374629, 6175738.359182926 ], 
    [ 1767257.535153149, 6175806.435911242 ]
  ], 
  [
    [ 1767664.8011944809, 6175498.59772311 ], 
    [ 1767664.2040301973, 6175490.834587424 ], 
    [ 1767672.862912308, 6175490.237423141 ], 
    [ 1767672.862912308, 6175498.299140967 ], 
    [ 1767664.8011944809, 6175498.59772311 ]
  ], 
  [
    [ 1767494.3107915479, 6175583.395051363 ], 
    [ 1767494.3107915479, 6175575.034751395 ], 
    [ 1767501.7753450915, 6175575.034751395 ], 
    [ 1767502.372509375, 6175583.096469222 ], 
    [ 1767494.3107915479, 6175583.395051363 ]
  ]
]

    Note how the function also the first coordinate of each geometry and repeats it at the last place, thus closing each geometry.