GeoArrow Polygons (deck.gl-geoarrow)

<script setup lang="ts">
                  import { VMap } from '@geoql/v-maplibre';
                  import { VLayerDeckglGeoArrowPolygon } from '@geoql/v-maplibre/deck.gl';
                  import { tableFromIPC } from 'apache-arrow';
                  import type { RecordBatch } from 'apache-arrow';

const table = shallowRef<Table | null>(null);

                  onMounted(async () => {
                    const url = 'https://cdn.jsdelivr.net/gh/geoarrow/geoarrow-data@main/natural-earth/files/natural-earth_countries-geography.arrows';
                    const buffer = await (await fetch(url)).arrayBuffer();
                    const table = tableFromIPC(new Uint8Array(buffer));
                    batch.value = table.batches[0];
                  });
                </script>

                <template>
                  <VMap :options="mapOptions" class="h-125 w-full">
                    <VControlNavigation position="top-right" />
                    <VLayerDeckglGeoArrowPolygon
                      v-if="batch"
                      id="geoarrow-countries"
                      :data="batch"
                      :get-fill-color="[100, 150, 220, 180]"
                      :get-line-color="[180, 220, 255, 255]"
                      :line-width-min-pixels="1"
                      stroked
                      filled
                      pickable
                    />
                  </VMap>
                </template>