From 78dc2c68477c643d0d5d714e9791c3b9361d0b45 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Sun, 24 Sep 2023 20:27:07 +0200
Subject: [PATCH] feat(ol-source-geo-tiff): add new source for GeoTIFF

---
 docs/.vitepress/config.ts                     |  4 ++
 docs/componentsguide/sources/geotiff/index.md | 68 +++++++++++++++++++
 src/components/sources/OlSourceGeoTIFF.vue    | 56 +++++++++++++++
 src/components/sources/index.ts               |  3 +
 src/demos/GeoTIFFDemo.vue                     | 45 ++++++++++++
 5 files changed, 176 insertions(+)
 create mode 100644 docs/componentsguide/sources/geotiff/index.md
 create mode 100644 src/components/sources/OlSourceGeoTIFF.vue
 create mode 100644 src/demos/GeoTIFFDemo.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index f577805d..793d0ec9 100644
--- a/docs/.vitepress/config.ts
+++ b/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/",
diff --git a/docs/componentsguide/sources/geotiff/index.md b/docs/componentsguide/sources/geotiff/index.md
new file mode 100644
index 00000000..b893cf0c
--- /dev/null
+++ b/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>
+```
diff --git a/src/components/sources/OlSourceGeoTIFF.vue b/src/components/sources/OlSourceGeoTIFF.vue
new file mode 100644
index 00000000..b6280a37
--- /dev/null
+++ b/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>
diff --git a/src/components/sources/index.ts b/src/components/sources/index.ts
index f8b266c0..02b3d533 100644
--- a/src/components/sources/index.ts
+++ b/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,
diff --git a/src/demos/GeoTIFFDemo.vue b/src/demos/GeoTIFFDemo.vue
new file mode 100644
index 00000000..d7758836
--- /dev/null
+++ b/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>