feat(ol-source-geo-tiff): add new source for GeoTIFF

docs/.vitepress/config.ts

@@ -125,6 +125,10 @@ export default defineConfig({
             text: "ol-source-cluster",
             link: "/componentsguide/sources/cluster/",
           },
+          {
+            text: "ol-source-geo-tiff",
+            link: "/componentsguide/sources/geotiff/",
+          },
           {
             text: "ol-source-image-static",
             link: "/componentsguide/sources/imagestatic/",

docs/componentsguide/sources/geotiff/index.md

@@ -0,0 +1,68 @@
+# ol-source-geo-tiff
+
+Source for GeoTIFF tiles.
+
+<script setup>
+import GeoTIFFDemo from "@demos/GeoTIFFDemo.vue"
+</script>
+
+<ClientOnly>
+<GeoTIFFDemo />
+</ClientOnly>
+
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/GeoTIFFDemo.vue
+
+:::
+
+## Properties
+
+### Props from OpenLayers
+
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_GeoTIFF.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
+
+### Deviating Properties
+
+none.
+
+## Events
+
+You have access to all Events from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_GeoTIFF.html) to see the available events tht will be fired.
+
+```html
+<ol-source-tile-wms :url="imgUrl" @error="handleEvent" />
+```
+
+## Methods
+
+You have access to all Methods from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_GeoTIFF.html) to see the available methods.
+
+To access the source, you can use a `ref()` as shown below:
+
+```vue
+<template>
+  <!-- ... -->
+  <ol-source-tile-wms :url="url" ref="sourceRef" />
+  <!-- ... -->
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type GeoTIFF from "ol/source/GeoTIFF";
+
+const sourceRef = ref<{ source: GeoTIFF }>(null);
+
+onMounted(() => {
+  const source: GeoTIFF = sourceRef.value?.source;
+  // call your method on `source`
+});
+</script>
+```

src/components/sources/OlSourceGeoTIFF.vue

@@ -0,0 +1,56 @@
+<template>
+  <div v-if="false"></div>
+</template>
+
+<script setup lang="ts">
+import GeoTIFF, { type Options } from "ol/source/GeoTIFF";
+import { inject, onMounted, onUnmounted, watch, type Ref } from "vue";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type TileLayer from "ol/layer/Tile";
+import projectionFromProperties from "@/helpers/projection";
+import {
+  TILE_SOURCE_EVENTS,
+  useOpenLayersEvents,
+} from "@/composables/useOpenLayersEvents";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<Options>()
+
+const layer = inject<Ref<TileLayer<GeoTIFF>> | null>("tileLayer");
+const { properties } = usePropsAsObjectProperties(props);
+
+const createSource = () => {
+  return new GeoTIFF({
+    ...properties,
+    projection: projectionFromProperties(properties.projection),
+  });
+
+}
+
+
+let source = createSource();
+
+useOpenLayersEvents(source, TILE_SOURCE_EVENTS);
+
+watch(properties, () => {
+  layer?.value.setSource(null);
+  source = createSource();
+  layer?.value.setSource(source);
+});
+onMounted(() => {
+  layer?.value.setSource(source);
+});
+
+onUnmounted(() => {
+  layer?.value.setSource(null);
+});
+
+defineExpose({
+  layer,
+  source,
+});
+</script>

src/components/sources/index.ts

@@ -8,6 +8,7 @@ import OlSourceStadiaMaps from "./OlSourceStadiaMaps.vue";
 import OlSourceTianDiTu from "./OlSourceTianDiTu.vue";
 import OlSourceTileArcGISRest from "@/components/sources/OlSourceTileArcGISRest.vue";
 import OlSourceTileDebug from "./OlSourceTileDebug.vue";
+import OlSourceGeoTIFF from "./OlSourceGeoTIFF.vue";
 import OlSourceTileJSON from "./OlSourceTileJSON.vue";
 import OlSourceTileWMS from "./OlSourceTileWMS.vue";
 import OlSourceVector from "./OlSourceVector.vue";
@@ -26,6 +27,7 @@ function install(app: App) {
   app.component("ol-source-tianditu", OlSourceTianDiTu);
   app.component("ol-source-tile-arcgis-rest", OlSourceTileArcGISRest);
   app.component("ol-source-tile-debug", OlSourceTileDebug);
+  app.component("ol-source-geo-tiff", OlSourceGeoTIFF);
   app.component("ol-source-tile-json", OlSourceTileJSON);
   app.component("ol-source-tile-wms", OlSourceTileWMS);
   app.component("ol-source-vector", OlSourceVector);
@@ -48,6 +50,7 @@ export {
   OlSourceTianDiTu,
   OlSourceTileArcGISRest,
   OlSourceTileDebug,
+  OlSourceGeoTIFF,
   OlSourceTileJSON,
   OlSourceTileWMS,
   OlSourceVector,

src/demos/GeoTIFFDemo.vue

@@ -0,0 +1,45 @@
+<template>
+  <ol-map
+    :loadTilesWhileAnimating="true"
+    :loadTilesWhileInteracting="true"
+    style="height: 400px"
+  >
+    <ol-view ref="view" :center="center" :zoom="zoom" :projection="projection"/>
+
+    <ol-webgl-tile-layer :style="trueColor" >
+      <ol-source-geo-tiff
+      :normalize="false"
+      :sources="[
+        {
+          url: 'https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif'
+        }
+      ]"
+      :wrapX="true"/>
+    </ol-webgl-tile-layer>
+  </ol-map>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import {sourcesFromTileGrid} from 'ol/source.js';
+
+const center = ref([0, 0]);
+const zoom = ref(2);
+const rotation = ref(0);
+const projection = ref('EPSG:4326');
+
+const max = 3000;
+function normalize(value) {
+  return ['/', value, max];
+}
+
+const red = normalize(['band', 1]);
+const green = normalize(['band', 2]);
+const blue = normalize(['band', 3]);
+const nir = normalize(['band', 4]);
+
+const trueColor = ref({
+  color: ['array', red, green, blue, 1],
+  gamma: 1.1,
+});
+</script>