feat: generic quadkey tile url function for xyz sources

Author: ofr1tz

src/components/DigitizeProject.vue

@@ -198,6 +198,14 @@ export default defineComponent({
       this.taskFeatures.clear()
       this.taskFeatures.push(newFeature)
     },
+    xyzUrl(tileCoord: [number, number, number]) {
+      const url = makeXyzUrl(this.project.tileServer, tileCoord)
+      return url
+    },
+    xyzUrlB(tileCoord: [number, number, number]) {
+      const url = makeXyzUrl(this.project.tileServerB, tileCoord)
+      return url
+    },
   },
   created() {
     this.startTime = new Date().toISOString()
@@ -280,24 +288,17 @@ export default defineComponent({
       </ol-tile-layer>
 
       <ol-tile-layer ref="basemapLayer" :zIndex="2">
-        <ol-source-bingmaps
-          v-if="project?.tileServer?.name === 'bing'"
-          :api-key="project?.tileServer?.apiKey"
-          :imagery-set="project?.tileServer?.imagerySet || 'Aerial'"
-        />
         <ol-source-xyz
-          v-else
+          :tile-url-function="xyzUrl"
           :opaque="false"
-          :url="makeXyzUrl(project.tileServer)"
           :attributions="project.tileServer.credits"
         />
       </ol-tile-layer>
-
       <ol-tile-layer v-if="project.tileServerB && !transparent" ref="basemapLayerB" :zIndex="3">
         <ol-source-xyz
+          :tile-url-function="xyzUrlB"
           :opaque="false"
-          :url="makeXyzUrl(project.tileServerB)"
-          :attributions="project.tileServerB.credits"
+          :attributions="project.tileServer.credits"
         />
       </ol-tile-layer>
 

src/components/ValidateProjectTask.vue

@@ -69,9 +69,6 @@ export default defineComponent({
         height: 'max(calc(100vh - 390px), 600px)',
       }
     },
-    xyzUrl() {
-      return makeXyzUrl(this.project.tileServer)
-    },
     strokeColor() {
       const color = hex2rgb(theme.light.accent, this.transparent ? 0.4 : 1)
       return color
@@ -116,6 +113,10 @@ export default defineComponent({
         }, delay)
       }
     },
+    xyzUrl(tileCoord: [number, number, number]) {
+      const url = makeXyzUrl(this.project.tileServer, tileCoord)
+      return url
+    },
   },
 })
 </script>
@@ -138,12 +139,7 @@ export default defineComponent({
       <ol-source-osm />
     </ol-tile-layer>
     <ol-tile-layer id="basemapLayer" ref="basemapLayer" :zIndex="2">
-      <ol-source-bingmaps
-        v-if="project?.tileServer?.name === 'bing'"
-        :api-key="project?.tileServer?.apiKey"
-        :imagery-set="project?.tileServer?.imagerySet || 'Aerial'"
-      />
-      <ol-source-xyz v-else :url="xyzUrl" :attributions="project.tileServer.credits" />
+      <ol-source-xyz :tile-url-function="xyzUrl" :attributions="project.tileServer.credits" />
     </ol-tile-layer>
     <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="3" :key="task.taskId">
       <ol-source-vector :features="taskFeatures" ref="taskSource" ident="taskSource" />

src/utils/buildTasks.ts

@@ -1,3 +1,5 @@
+import getQuadKeyFromCoordsAndZoom from './getQuadKeyFromCoordsAndZoom'
+
 const arrayFromMinMax = (min, max) => {
   min = parseInt(min)
   max = parseInt(max)
@@ -21,25 +23,6 @@ const getBingURLFromQuadKey = (urlTemplate, quadKey, apiKey) => {
   return bingUrl
 }
 
-const getQuadKeyFromCoordsAndZoom = (x, y, zoom) => {
-  // Create a quadkey for use with certain tileservers that use them, e.g. Bing
-  let quadKey = ''
-  for (let i = zoom; i > 0; i -= 1) {
-    let digit = 0
-    /* eslint-disable no-bitwise */
-    const mask = 1 << (i - 1)
-    if ((x & mask) !== 0) {
-      digit += 1
-    }
-    if ((y & mask) !== 0) {
-      digit += 2
-    }
-    /* eslint-enable no-bitwise */
-    quadKey += digit.toString()
-  }
-  return quadKey
-}
-
 const getTileUrlFromCoordsAndTileserver = (x, y, zoom, tileServer) => {
   // based on https://github.com/mapswipe/mapswipe/blob/master/src/shared/common/tile_functions.js
   const urlTemplate = tileServer.url

src/utils/getQuadKeyFromCoordsAndZoom.ts

@@ -0,0 +1,20 @@
+const getQuadKeyFromCoordsAndZoom = (x: number, y: number, zoom: number) => {
+  // Create a quadkey for use with certain tileservers that use them, e.g. Bing
+  let quadKey = ''
+  for (let i = zoom; i > 0; i -= 1) {
+    let digit = 0
+    /* eslint-disable no-bitwise */
+    const mask = 1 << (i - 1)
+    if ((x & mask) !== 0) {
+      digit += 1
+    }
+    if ((y & mask) !== 0) {
+      digit += 2
+    }
+    /* eslint-enable no-bitwise */
+    quadKey += digit.toString()
+  }
+  return quadKey
+}
+
+export default getQuadKeyFromCoordsAndZoom

src/utils/makeXyzUrl.ts

@@ -1,9 +1,18 @@
-const makeXyzUrl = (tileServer) => {
+import getQuadKeyFromCoordsAndZoom from './getQuadKeyFromCoordsAndZoom'
+
+const makeXyzUrl = (tileServer: string, tileCoord: [number, number, number]) => {
   const apiKey = tileServer.apiKey
   const wmtsLayerName = tileServer.wmtsLayerName
-  const url = tileServer.url
+  const [zoom, x, y] = tileCoord
+  const quadkey = getQuadKeyFromCoordsAndZoom(x, y, zoom)
+  let url = tileServer.url
     .replace(/({apiKey})|({key})/, apiKey)
     .replace(/({layer})|({name})/, wmtsLayerName)
+    .replace(/({quad_key})/, quadkey)
+    .replace(/{z}/gi, zoom.toString())
+    .replace(/{x}/gi, x.toString())
+    .replace(/{y}/gi, y.toString())
+  console.log(url)
   return url
 }