refactor(ol-source-wmts): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/sources/wmts/index.md

@@ -19,7 +19,7 @@ Example below shows how to use ol-layer-tile component together with ol-source-w
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:400px"
+    style="height: 400px"
   >
     <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" />
 
@@ -40,35 +40,20 @@ Example below shows how to use ol-layer-tile component together with ol-source-w
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([-11158582, 4813697]);
-    const zoom = ref(4);
-    const rotation = ref(0);
-    const url = ref("https://mrdata.usgs.gov/mapcache/wmts");
-    const layerName = ref("sgmc2");
-    const matrixSet = ref("GoogleMapsCompatible");
-    const format = ref("image/png");
-    const styleName = ref("default");
-    const attribution = ref(
-      'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
-    );
-
-    return {
-      center,
-      zoom,
-      rotation,
-      url,
-      layerName,
-      matrixSet,
-      format,
-      styleName,
-      attribution,
-    };
-  },
-};
+
+const center = ref([-11158582, 4813697]);
+const zoom = ref(4);
+const rotation = ref(0);
+const url = ref("https://mrdata.usgs.gov/mapcache/wmts");
+const layerName = ref("sgmc2");
+const matrixSet = ref("GoogleMapsCompatible");
+const format = ref("image/png");
+const styleName = ref("default");
+const attribution = ref(
+  'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
+);
 </script>
 ```
 

src/components/sources/OlSourceWMTS.vue

@@ -0,0 +1,142 @@
+<template>
+  <div v-if="false"></div>
+</template>
+
+<script setup>
+import WMTS from "ol/source/WMTS";
+import Projection from "ol/proj/Projection";
+import WMTSTileGrid from "ol/tilegrid/WMTS";
+import { get as getProjection } from "ol/proj";
+import { getTopLeft, getWidth } from "ol/extent";
+import { inject, onMounted, onUnmounted, watch, computed } from "vue";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+
+const props = defineProps({
+  tileZoomLevel: {
+    type: Number,
+    default: 30,
+  },
+  attributions: {
+    type: String,
+  },
+  cacheSize: {
+    type: Number,
+  },
+  crossOrigin: {
+    type: String,
+  },
+  projection: {
+    type: [String, Object],
+    default: "EPSG:3857",
+  },
+  reprojectionErrorThreshold: {
+    type: Number,
+    default: 0.5,
+  },
+  tilePixelRatio: {
+    type: Number,
+    default: 1,
+  },
+  format: {
+    type: String,
+    default: "image/jpeg",
+  },
+  version: {
+    type: String,
+    default: "1.0.0",
+  },
+  matrixSet: {
+    type: String,
+  },
+  dimensions: {
+    type: Object,
+  },
+  requestEncoding: {
+    type: String,
+    default: "KVP",
+  },
+  url: {
+    type: String,
+  },
+  urls: {
+    type: Array,
+  },
+  wrapX: {
+    type: Boolean,
+    default: false,
+  },
+  transition: {
+    type: Number,
+  },
+  layer: {
+    type: String,
+  },
+  tileMatrixPrefix: {
+    type: String,
+    default: "",
+  },
+  styles: {
+    type: [String, Array, Function],
+  },
+});
+
+const tileLayer = inject("tileLayer");
+const { properties } = usePropsAsObjectProperties(props);
+
+const extent = computed(() => getProjection(properties.projection).getExtent());
+const origin = computed(() => getTopLeft(extent.value));
+const size = computed(() => getWidth(extent.value) / 256);
+
+const getTileGrid = computed(() => {
+  const resolutions = new Array(properties.tileZoomLevel);
+  const matrixIds = new Array(properties.tileZoomLevel);
+
+  for (let z = 0; z < properties.tileZoomLevel; ++z) {
+    resolutions[z] = size.value / Math.pow(2, z);
+    matrixIds[z] = props.tileMatrixPrefix + z;
+  }
+
+  return new WMTSTileGrid({
+    origin: origin.value,
+    resolutions,
+    matrixIds,
+  });
+});
+
+const source = computed(
+  () =>
+    new WMTS({
+      ...properties,
+      projection:
+        typeof properties.projection == "string"
+          ? properties.projection
+          : new Projection({
+              ...properties.projection,
+            }),
+      tileGrid: getTileGrid.value,
+    })
+);
+
+watch(source, () => {
+  tileLayer.value.setSource(source.value);
+});
+
+watch(tileLayer, () => {
+  tileLayer.value.setSource(source.value);
+});
+
+onMounted(() => {
+  tileLayer.value.setSource(source.value);
+});
+
+onUnmounted(() => {
+  tileLayer.value.setSource(null);
+});
+
+defineExpose({
+  tileLayer,
+  source,
+});
+</script>
+
+<style lang=""></style>

src/components/sources/SourceWMTS.vue

@@ -1,7 +1,7 @@
 import OlSourceXYZ from "./OlSourceXYZ.vue";
+import OlSourceWMTS from "./OlSourceWMTS.vue";
 import SourceOSM from "./SourceOSM.vue";
 import SourceImageStatic from "./SourceImageStatic.vue";
-import SourceWMTS from "./SourceWMTS.vue";
 import SourceVector from "./SourceVector.vue";
 import SourceCluster from "./SourceCluster.vue";
 import SourceBingMaps from "./SourceBingMaps.vue";
@@ -19,9 +19,9 @@ function install(app) {
   install.installed = true;
 
   app.component("ol-source-xyz", OlSourceXYZ);
+  app.component("ol-source-wmts", OlSourceWMTS);
   app.component(SourceOSM.name, SourceOSM);
   app.component(SourceImageStatic.name, SourceImageStatic);
-  app.component(SourceWMTS.name, SourceWMTS);
   app.component(SourceVector.name, SourceVector);
   app.component(SourceCluster.name, SourceCluster);
   app.component(SourceBingMaps.name, SourceBingMaps);
@@ -37,9 +37,9 @@ export default install;
 export {
   install,
   OlSourceXYZ,
+  OlSourceWMTS,
   SourceOSM,
   SourceImageStatic,
-  SourceWMTS,
   SourceVector,
   SourceCluster,
   SourceTianDiTu,