AEF Mosaic

<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerZarr } from '@geoql/v-maplibre/geotiff';
import { SampleAefRgb } from '~/utils/gpu/sample-aef-rgb';
import * as zarr from 'zarrita';

const node = shallowRef(null);
const yearIdx = ref(8);
const rBand = ref(0), gBand = ref(16), bBand = ref(32);
const rescaleMin = ref(-0.3), rescaleMax = ref(0.3);

onMounted(async () => {
  const store = new zarr.FetchStore(
    'https://data.source.coop/tge-labs/aef-mosaic',
  );
  const root = await zarr.open.v3(store, { kind: 'group' });
  node.value = await zarr.open.v3(root.resolve('embeddings'), {
    kind: 'array',
  });
});

const selection = computed(() => ({
  time: yearIdx.value,
  band: null,
}));

async function getTileData(arr, { device, sliceSpec, width, height }) {
  const chunk = await zarr.get(arr, sliceSpec);
  const texture = device.createTexture({
    dimension: '2d-array',
    format: 'r8sint',
    width, height, depth: 64,
    data: chunk.data,
  });
  return { texture, width, height };
}

function renderTile(data) {
  return {
    renderPipeline: [{
      module: SampleAefRgb,
      props: {
        dataTex: data.texture,
        rBandIdx: rBand.value,
        gBandIdx: gBand.value,
        bBandIdx: bBand.value,
        rescaleMin: rescaleMin.value,
        rescaleMax: rescaleMax.value,
      },
    }],
  };
}
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerZarr
      v-if="node"
      id="aef"
      :node="node"
      :selection="selection"
      :get-tile-data="getTileData"
      :render-tile="renderTile"
    />
  </VMap>
</template>