Sentinel-2 Multi-Band

<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerMultiCog } from '@geoql/v-maplibre/geotiff';
import { LinearRescale } from '@developmentseed/deck.gl-raster/gpu-modules';

const base =
  'https://sentinel-cogs.s3.us-west-2.amazonaws.com/' +
  'sentinel-s2-l2a-cogs/33/S/VB/2024/7/S2B_33SVB_20240725_0_L2A';

const sources = {
  red:   { url: `${base}/B04.tif` },
  green: { url: `${base}/B03.tif` },
  blue:  { url: `${base}/B02.tif` },
};

const composite = { r: 'red', g: 'green', b: 'blue' };

// Sentinel-2 reflectance is uint16 (DN = reflectance * 10000); the r16unorm
// texture normalization folds it into 0.0 - 0.15, so rescale back to 0 - 1.
const renderPipeline = [
  { module: LinearRescale, props: { rescaleMin: 0, rescaleMax: 0.15 } },
];
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerMultiCog
      id="sentinel2"
      :sources="sources"
      :composite="composite"
      :render-pipeline="renderPipeline"
    />
  </VMap>
</template>