BGDIINF_SB-2978: Updates according to comments

Author: vladyslav-tk

src/config.js

@@ -188,10 +188,9 @@ export const TILEGRID_RESOLUTIONS = [
 ]
 
 /**
- * Map view's mininal resolution
- * Currently set so that OL scalebar displays 10 meters
- * Scalebar about 1" on screen, hence about 100px.  So, 10 meters/100px = 0.1
- * Caveat: setting resolution (mininum and maximum) has the precedence over zoom (minimum/maximum)
+ * Map view's mininal resolution Currently set so that OL scalebar displays 10 meters Scalebar about
+ * 1" on screen, hence about 100px. So, 10 meters/100px = 0.1 Caveat: setting resolution (mininum
+ * and maximum) has the precedence over zoom (minimum/maximum)
  */
 
 export const VIEW_MIN_RESOLUTION = 0.1 // meters/pixel
@@ -216,14 +215,14 @@ export const TILEGRID_EXTENT = [2420000, 1030000, 2900000, 1350000]
  *
  * @type {Number[]}
  */
-export const LV95_EXTENT = [572215.44, 5684416.96, 1277662.37, 6145307.4]
+export const TILEGRID_EXTENT_EPSG_3857 = [572215.44, 5684416.96, 1277662.37, 6145307.4]
 
 /**
  * TILEGRID_EXTENT (defined above) reprojected in EPSG:4326 through epsg.io website.
  *
  * @type {Number[]}
  */
-export const WGS84_EXTENT = [5.1402988, 45.3981222, 11.4774363, 48.230617]
+export const TILEGRID_EXTENT_EPSG_4326 = [5.1402988, 45.3981222, 11.4774363, 48.230617]
 
 /**
  * Map center default value is the center of switzerland LV:95 projection's extent (from

src/modules/map/components/cesium/CesiumWMSLayer.vue

@@ -7,11 +7,12 @@
 <script>
 import { CoordinateSystem, WEBMERCATOR } from '@/utils/coordinateSystems'
 import { ImageryLayer, Rectangle, WebMapServiceImageryProvider } from 'cesium'
-import { WGS84_EXTENT } from '@/config'
+import { TILEGRID_EXTENT_EPSG_4326 } from '@/config'
 import { mapState } from 'vuex'
 import { YEAR_TO_DESCRIBE_ALL_OR_CURRENT_DATA } from '@/api/layers/LayerTimeConfigEntry.class'
 import GeoAdminWMSLayer from '@/api/layers/GeoAdminWMSLayer.class'
 import addImageryLayerMixins from '@/modules/map/components/cesium/utils/addImageryLayer-mixins'
+import { getWMSTimestampFromConfig } from '@/utils/wmsLayerUtils'
 
 // todo should we adapt LOD to resolution?
 const MAXIMUM_LEVEL_OF_DETAILS = 18
@@ -20,7 +21,7 @@ export default {
     mixins: [addImageryLayerMixins],
     props: {
         wmsLayerConfig: {
-            type: [GeoAdminWMSLayer],
+            type: GeoAdminWMSLayer,
             required: true,
         },
         previewYear: {
@@ -53,35 +54,14 @@ export default {
             return this.wmsLayerConfig.format || 'png'
         },
         url() {
-            return this.wmsLayerConfig.getURL(this.previewYear, this.projection.epsgNumber)
+            return this.wmsLayerConfig.getURL()
         },
         timestamp() {
-            if (this.wmsLayerConfig.timeConfig) {
-                // if there is a preview year set, we search for the matching timestamp
-                if (this.previewYear) {
-                    const matchingTimeEntry = this.wmsLayerConfig.getTimeEntryForYear(
-                        this.previewYear
-                    )
-                    if (matchingTimeEntry) {
-                        return matchingTimeEntry.timestamp
-                    }
-                }
-                // if a time entry is defined, and is different from 'all'
-                // (no need to pass 'all' to our WMS, that's the default timestamp used under the hood)
-                if (
-                    this.wmsLayerConfig.timeConfig.currentYear !==
-                    YEAR_TO_DESCRIBE_ALL_OR_CURRENT_DATA
-                ) {
-                    return this.wmsLayerConfig.timeConfig.currentTimestamp
-                }
-            }
-            return ''
+            return getWMSTimestampFromConfig(this.wmsLayerConfig)
         },
         /**
-         * Definition of all relevant URL param for our WMS backends. This is because both
-         * https://openlayers.org/en/latest/apidoc/module-ol_source_TileWMS-TileWMS.html and
-         * https://openlayers.org/en/latest/apidoc/module-ol_source_ImageWMS-ImageWMS.html have this
-         * option.
+         * Definition of all relevant URL param for our WMS backends. Passes as parameters to
+         * https://cesium.com/learn/cesiumjs/ref-doc/WebMapServiceImageryProvider.html#.ConstructorOptions
          *
          * If we let the URL have all the param beforehand (sending all URL param through the url
          * option), most of our wanted params will be doubled, resulting in longer and more
@@ -111,7 +91,7 @@ export default {
                     subdomains: '0123',
                     layers: this.wmsLayerConfig.geoAdminID,
                     maximumLevel: MAXIMUM_LEVEL_OF_DETAILS,
-                    rectangle: Rectangle.fromDegrees(...WGS84_EXTENT),
+                    rectangle: Rectangle.fromDegrees(...TILEGRID_EXTENT_EPSG_4326),
                 }),
                 {
                     show: this.wmsLayerConfig.visible,

src/modules/map/components/cesium/CesiumWMTSLayer.vue

@@ -8,8 +8,9 @@
 import GeoAdminWMTSLayer from '@/api/layers/GeoAdminWMTSLayer.class'
 import { CoordinateSystem, WEBMERCATOR } from '@/utils/coordinateSystems'
 import { ImageryLayer, Rectangle, UrlTemplateImageryProvider } from 'cesium'
-import { WGS84_EXTENT } from '@/config'
+import { TILEGRID_EXTENT_EPSG_4326 } from '@/config'
 import addImageryLayerMixins from './utils/addImageryLayer-mixins'
+import { getTimestampForPreviewLayer } from '@/utils/wmtsLayerUtils'
 
 // todo should we adapt LOD to resolution?
 const MAXIMUM_LEVEL_OF_DETAILS = 18
@@ -42,15 +43,7 @@ export default {
             return this.wmtsLayerConfig.opacity || 1.0
         },
         timestampForPreviewYear() {
-            if (
-                this.previewYear &&
-                this.wmtsLayerConfig.timeConfig &&
-                this.wmtsLayerConfig.timeConfig.years.includes(this.previewYear)
-            ) {
-                return this.wmtsLayerConfig.timeConfig.getTimeEntryForYear(this.previewYear)
-                    .timestamp
-            }
-            return null
+            return getTimestampForPreviewLayer(this.previewYear, this.wmtsLayerConfig)
         },
         url() {
             return this.wmtsLayerConfig.getURL(
@@ -63,7 +56,7 @@ export default {
         createImagery(url) {
             return new ImageryLayer(
                 new UrlTemplateImageryProvider({
-                    rectangle: Rectangle.fromDegrees(...WGS84_EXTENT),
+                    rectangle: Rectangle.fromDegrees(...TILEGRID_EXTENT_EPSG_4326),
                     maximumLevel: MAXIMUM_LEVEL_OF_DETAILS,
                     url: url,
                 }),

src/modules/map/components/cesium/utils/addImageryLayer-mixins.js

@@ -1,3 +1,15 @@
+/**
+ * Vue mixin that will handle the addition or removal of a Cesium Imagery layer. This is a
+ * centralized way of describing this logic.
+ *
+ * Each component that uses this mixin must create a layer (`this.layer`) in their `created(){}`
+ * method. This layer will then be added to the viewer (through dependency injection with
+ * `getViewer`). The mixin will manage this layer and will remove it from the viewer as soon as the
+ * component that has incorporated this mixin will be removed from the DOM.
+ *
+ * It is also set/update zIndex of the layer, which places the layer accordingly in the stack of the
+ * imagery layers in Cesium viewer.
+ */
 const addImageryLayerMixins = {
     inject: ['getViewer'],
     data() {

src/modules/map/components/openlayers/OpenLayersWMSLayer.vue

@@ -18,6 +18,7 @@ import TileGrid from 'ol/tilegrid/TileGrid'
 import proj4 from 'proj4'
 import { mapState } from 'vuex'
 import addLayerToMapMixin from './utils/addLayerToMap-mixins'
+import { getWMSTimestampFromConfig } from '@/utils/wmsLayerUtils'
 
 /** Renders a WMS layer on the map */
 export default {
@@ -60,29 +61,10 @@ export default {
             return this.wmsLayerConfig.gutter || -1
         },
         url() {
-            return this.wmsLayerConfig.getURL(this.previewYear, this.projection.epsgNumber)
+            return this.wmsLayerConfig.getURL()
         },
         timestamp() {
-            if (this.wmsLayerConfig.timeConfig) {
-                // if there is a preview year set, we search for the matching timestamp
-                if (this.previewYear) {
-                    const matchingTimeEntry = this.wmsLayerConfig.getTimeEntryForYear(
-                        this.previewYear
-                    )
-                    if (matchingTimeEntry) {
-                        return matchingTimeEntry.timestamp
-                    }
-                }
-                // if a time entry is defined, and is different from 'all'
-                // (no need to pass 'all' to our WMS, that's the default timestamp used under the hood)
-                if (
-                    this.wmsLayerConfig.timeConfig.currentYear !==
-                    YEAR_TO_DESCRIBE_ALL_OR_CURRENT_DATA
-                ) {
-                    return this.wmsLayerConfig.timeConfig.currentTimestamp
-                }
-            }
-            return ''
+            return getWMSTimestampFromConfig(this.wmsLayerConfig)
         },
         /**
          * Definition of all relevant URL param for our WMS backends. This is because both

src/modules/map/components/openlayers/OpenLayersWMTSLayer.vue

@@ -14,6 +14,7 @@ import { XYZ as XYZSource } from 'ol/source'
 import TileGrid from 'ol/tilegrid/TileGrid'
 import proj4 from 'proj4'
 import addLayerToMapMixin from './utils/addLayerToMap-mixins'
+import { getTimestampForPreviewLayer } from '@/utils/wmtsLayerUtils'
 
 /** Renders a WMTS layer on the map */
 export default {
@@ -44,15 +45,7 @@ export default {
             return this.wmtsLayerConfig.opacity || 1.0
         },
         timestampForPreviewYear() {
-            if (
-                this.previewYear &&
-                this.wmtsLayerConfig.timeConfig &&
-                this.wmtsLayerConfig.timeConfig.years.includes(this.previewYear)
-            ) {
-                return this.wmtsLayerConfig.timeConfig.getTimeEntryForYear(this.previewYear)
-                    .timestamp
-            }
-            return null
+            return getTimestampForPreviewLayer(this.previewYear, this.wmtsLayerConfig)
         },
         url() {
             return this.wmtsLayerConfig.getURL(

src/store/modules/position.store.js

@@ -1,4 +1,4 @@
-import { LV95_EXTENT, MAP_CENTER } from '@/config'
+import { TILEGRID_EXTENT_EPSG_3857, MAP_CENTER } from '@/config'
 import { WEBMERCATOR, WGS84 } from '@/utils/coordinateSystems'
 import log from '@/utils/logging'
 import { round } from '@/utils/numberUtils'
@@ -174,10 +174,10 @@ const getters = {
     isExtentOnlyWithinLV95Bounds(state, getters) {
         const [currentExtentBottomLeft, currentExtentTopRight] = getters.extent
         return (
-            currentExtentBottomLeft[0] >= LV95_EXTENT[0] &&
-            currentExtentBottomLeft[1] >= LV95_EXTENT[1] &&
-            currentExtentTopRight[0] <= LV95_EXTENT[2] &&
-            currentExtentTopRight[1] <= LV95_EXTENT[3]
+            currentExtentBottomLeft[0] >= TILEGRID_EXTENT_EPSG_3857[0] &&
+            currentExtentBottomLeft[1] >= TILEGRID_EXTENT_EPSG_3857[1] &&
+            currentExtentTopRight[0] <= TILEGRID_EXTENT_EPSG_3857[2] &&
+            currentExtentTopRight[1] <= TILEGRID_EXTENT_EPSG_3857[3]
         )
     },
 }

src/utils/__tests__/coordinateUtils.spec.js

@@ -1,4 +1,4 @@
-import { LV95_EXTENT } from '@/config'
+import { TILEGRID_EXTENT_EPSG_3857 } from '@/config'
 import {
     coordinateFromString,
     reprojectUnknownSrsCoordsToWebMercator,
@@ -504,14 +504,14 @@ describe('Unit test functions from coordinateUtils.js', () => {
             // checking that the split happened on the LV95 bounds
             const intersectingCoordinate = outOfBoundChunk.coordinates[1]
             expect(intersectingCoordinate).to.be.an('Array').of.length(2)
-            expect(intersectingCoordinate).to.eql([LV95_EXTENT[0], yValue])
+            expect(intersectingCoordinate).to.eql([TILEGRID_EXTENT_EPSG_3857[0], yValue])
             // next chunk must start by the intersecting coordinate
             expect(inBoundChunk).to.haveOwnProperty('isWithinLV95Bounds')
             expect(inBoundChunk.isWithinLV95Bounds).to.be.true
             expect(inBoundChunk.coordinates).to.be.an('Array').of.length(6)
             const [firstInBoundCoordinate] = inBoundChunk.coordinates
             expect(firstInBoundCoordinate).to.be.an('Array').of.length(2)
-            expect(firstInBoundCoordinate).to.eql([LV95_EXTENT[0], yValue])
+            expect(firstInBoundCoordinate).to.eql([TILEGRID_EXTENT_EPSG_3857[0], yValue])
             // checking that further coordinates have been correctly copied
             coordinatesOverlappingSwissBounds.slice(1).forEach((coordinate, index) => {
                 expect(inBoundChunk.coordinates[index + 1][0]).to.eq(coordinate[0])
@@ -527,9 +527,9 @@ describe('Unit test functions from coordinateUtils.js', () => {
                 [700000, 6000000], // inside
                 [1000000, 6000000], // inside
             ]
-            const expectedFirstIntersection = [LV95_EXTENT[0], 6000000]
-            const expectedSecondIntersection = [800000, LV95_EXTENT[1]]
-            const expectedThirdIntersection = [700000, LV95_EXTENT[1]]
+            const expectedFirstIntersection = [TILEGRID_EXTENT_EPSG_3857[0], 6000000]
+            const expectedSecondIntersection = [800000, TILEGRID_EXTENT_EPSG_3857[1]]
+            const expectedThirdIntersection = [700000, TILEGRID_EXTENT_EPSG_3857[1]]
 
             const result = splitIfOutOfLV95Bounds(coordinatesGoingBackAndForth)
             expect(result).to.be.an('Array').of.length(4)

src/utils/coordinateUtils.js

@@ -1,4 +1,4 @@
-import { LV95_EXTENT } from '@/config'
+import { TILEGRID_EXTENT_EPSG_3857 } from '@/config'
 import clip from 'liang-barsky'
 import proj4 from 'proj4'
 import { LV03, LV95, WEBMERCATOR, WGS84 } from './coordinateSystems'
@@ -77,12 +77,12 @@ const LV95_BOUNDS = {
  */
 const LV95_IN_MERCATOR_BOUNDS = {
     x: {
-        lower: LV95_EXTENT[0],
-        upper: LV95_EXTENT[2],
+        lower: TILEGRID_EXTENT_EPSG_3857[0],
+        upper: TILEGRID_EXTENT_EPSG_3857[2],
     },
     y: {
-        lower: LV95_EXTENT[1],
-        upper: LV95_EXTENT[3],
+        lower: TILEGRID_EXTENT_EPSG_3857[1],
+        upper: TILEGRID_EXTENT_EPSG_3857[3],
     },
 }
 /**
@@ -468,7 +468,7 @@ function splitIfOutOfLV95BoundsRecurse(coordinates, previousChunks = [], isFirst
     clip(
         lastCoordinateWithSameBounds,
         nextCoordinateWithoutSameBounds,
-        LV95_EXTENT,
+        TILEGRID_EXTENT_EPSG_3857,
         crossing1,
         crossing2
     )

src/utils/wmsLayerUtils.js

@@ -0,0 +1,25 @@
+import { YEAR_TO_DESCRIBE_ALL_OR_CURRENT_DATA } from '@/api/layers/LayerTimeConfigEntry.class'
+
+/**
+ * Returns timestamp for WMS layer from config data
+ *
+ * @param {GeoAdminWMSLayer} wmsLayerConfig
+ * @returns {String | string | LayerTimeConfig.currentTimeEntry.timestamp}
+ */
+export function getWMSTimestampFromConfig(wmsLayerConfig) {
+    if (wmsLayerConfig.timeConfig) {
+        // if there is a preview year set, we search for the matching timestamp
+        if (this.previewYear) {
+            const matchingTimeEntry = wmsLayerConfig.getTimeEntryForYear(this.previewYear)
+            if (matchingTimeEntry) {
+                return matchingTimeEntry.timestamp
+            }
+        }
+        // if a time entry is defined, and is different from 'all'
+        // (no need to pass 'all' to our WMS, that's the default timestamp used under the hood)
+        if (wmsLayerConfig.timeConfig.currentYear !== YEAR_TO_DESCRIBE_ALL_OR_CURRENT_DATA) {
+            return wmsLayerConfig.timeConfig.currentTimestamp
+        }
+    }
+    return ''
+}

src/utils/wmtsLayerUtils.js

@@ -0,0 +1,17 @@
+/**
+ * Returns timestamp of preview year for WMTS layer from config data
+ *
+ * @param {Number} previewYear
+ * @param {GeoAdminWMTSLayer} wmtsLayerConfig
+ * @returns {String | null}
+ */
+export function getTimestampForPreviewLayer(previewYear, wmtsLayerConfig) {
+    if (
+        previewYear &&
+        wmtsLayerConfig.timeConfig &&
+        wmtsLayerConfig.timeConfig.years.includes(previewYear)
+    ) {
+        return wmtsLayerConfig.timeConfig.getTimeEntryForYear(previewYear).timestamp
+    }
+    return null
+}