LngLatBounds used in bbox

Deltares · Aug 10, 2023 · 9a2c6a2 · 9a2c6a2
1 parent 8247465
commit 9a2c6a2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 25 deletions.
diff --git a/src/components/AnimatedMapboxLayer.vue b/src/components/AnimatedMapboxLayer.vue
@@ -35,7 +35,7 @@ function isBoundsWithinBounds(innerBounds: LngLatBounds, outerBounds: LngLatBoun
 export interface MapboxLayerOptions {
   name: string;
   time: Date;
-  bbox:number[];
+  bbox: LngLatBounds;
 }
 
 function getMercatorBboxFromBounds(bounds: LngLatBounds): number[] {
@@ -102,13 +102,9 @@ export default class AnimatedMapboxLayer extends Vue {
 
   setDefaultZoom() {
     if (this.layer === null || this.layer.bbox === undefined) return
-    if (this.mapObject && this.layer.bbox.length === 4) {
-      const bbox = this.layer.bbox
+    if (this.mapObject) {
       const currentBounds = this.mapObject.getBounds()
-      const bounds = new LngLatBounds(
-        [bbox[0], bbox[1]], // sw
-        [bbox[2], bbox[3]], // ne
-      )
+      const bounds = this.layer.bbox
       if (isBoundsWithinBounds(currentBounds, bounds)) {
           return
         } else {

diff --git a/src/views/SpatialDisplay.vue b/src/views/SpatialDisplay.vue
@@ -50,14 +50,8 @@ import { Layer } from '@deltares/fews-wms-requests'
 import {LayerGroup} from "@deltares/fews-wms-requests/src/response/getCapabilitiesResponse";
 import { toWgs84 } from '@turf/projection';
 import { point } from '@turf/helpers';
-
-interface BoundingBox {
-  crs: string;
-  minx: string;
-  miny: string;
-  maxx: string;
-  maxy: string;
-}
+import { BoundingBox } from '@deltares/fews-wms-requests'
+import { LngLatBounds } from 'mapbox-gl'
 
 @Component({
   components: {
@@ -84,7 +78,7 @@ export default class SpatialDisplay extends Mixins(WMSMixin) {
   layerOptions: MapboxLayerOptions | null = null
   legend: ColourMap = []
   unit: string = ""
-  layersBbox: {[key: string]: number[]} = {}
+  layersBbox: {[key: string]: LngLatBounds} = {}
 
   created (): void {
     this.dateController = new DateController([])
@@ -135,12 +129,12 @@ export default class SpatialDisplay extends Mixins(WMSMixin) {
       }
       groupNode?.children?.push(item)
       if (layer.boundingBox) {
-        this.layersBbox[layer.name] = this.convertBoundingBoxToLatLngArray(layer.boundingBox)
+        this.layersBbox[layer.name] = this.convertBoundingBoxToLngLatBounds(layer.boundingBox)
       }
     }
   }
 
-  private convertBoundingBoxToLatLngArray(boundingBox: BoundingBox): [number, number, number, number] {
+  private convertBoundingBoxToLngLatBounds(boundingBox: BoundingBox): LngLatBounds {
     const crs = boundingBox.crs
 
     const minx = parseFloat(boundingBox.minx)
@@ -150,13 +144,10 @@ export default class SpatialDisplay extends Mixins(WMSMixin) {
 
     const p1 = toWgs84(point([minx, miny], { crs: crs }))
     const p2 = toWgs84(point([maxx, maxy], { crs: crs }))
-
-    return [
-      p1.geometry.coordinates[0],
-      p1.geometry.coordinates[1],
-      p2.geometry.coordinates[0],
-      p2.geometry.coordinates[1]
-    ]
+    return  new LngLatBounds(
+        [p1.geometry.coordinates[0], p1.geometry.coordinates[1]], // sw
+        [p2.geometry.coordinates[0], p2.geometry.coordinates[1]], // ne
+      )
   }
 
   private buildMenuFromGroups(groups: LayerGroup[], groupNodes: Map<string, ColumnItem>, rootNode: ColumnItem) {