wip: Ability to rotate the map (#855)

kalisio · May 30, 2024 · 0d69639 · 0d69639
1 parent 9bae9a2
commit 0d69639
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/map/client/mixins/globe/mixin.base-globe.js b/map/client/mixins/globe/mixin.base-globe.js
@@ -318,8 +318,9 @@ export const baseGlobe = {
         }
       }
     },
-    center (longitude, latitude, altitude, heading = 0, pitch = -90, roll = 0, duration = 0) {
+    center (longitude, latitude, altitude, heading = 0, pitch = -90, roll = 0, options = {}) {
       const center = this.viewer.camera.positionCartographic
+      const duration = _.get(options, 'duration', 0)
       const target = {
         destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude || center.height),
         orientation: {

diff --git a/map/client/mixins/map/mixin.base-map.js b/map/client/mixins/map/mixin.base-map.js
@@ -159,7 +159,12 @@ export const baseMap = {
         let zIndex
         if (typeof paneOrZIndex === 'object') zIndex = paneOrZIndex.zIndex || 400
         else if (typeof paneOrZIndex === 'number') zIndex = paneOrZIndex
-        pane = this.map.createPane(paneName)
+        // Check for parent pane if any, useful for leaflet-rotate plugin
+        let container = paneOrZIndex.container
+        // Defaults to rotate pane
+        if (this.map._rotate && !container) container = 'rotatePane'
+        container = this.map.getPane(container)
+        pane = this.map.createPane(paneName, container)
         _.set(pane, 'style.zIndex', zIndex || 400) // Defaults for overlay in Leaflet
       }
       this.leafletPanes[paneName] = pane
@@ -526,10 +531,14 @@ export const baseMap = {
     zoomToBBox (bbox) {
       this.zoomToBounds([[bbox[1], bbox[0]], [bbox[3], bbox[2]]])
     },
-    center (longitude, latitude, zoomLevel, options) {
+    center (longitude, latitude, zoomLevel, bearing = 0, options = {}) {
+      this.setBearing(bearing)
       const duration = _.get(options, 'duration', 0)
-      if (duration) this.map.flyTo(new L.LatLng(latitude, longitude), zoomLevel || this.map.getZoom(), options)
-      else this.map.setView(new L.LatLng(latitude, longitude), zoomLevel || this.map.getZoom(), options)
+      if (duration) {
+        this.map.flyTo(new L.LatLng(latitude, longitude), zoomLevel || this.map.getZoom(), options)
+      } else {
+        this.map.setView(new L.LatLng(latitude, longitude), zoomLevel || this.map.getZoom(), options)
+      }
     },
     getCenter () {
       const center = this.map.getCenter()
@@ -540,6 +549,20 @@ export const baseMap = {
         zoomLevel: zoom
       }
     },
+    setBearing(bearing) {
+      if (typeof this.map.setBearing !== 'function') {
+        logger.warn(`[KDK] Map not configured to handle bearing, ignoring`)
+        return
+      }
+      this.map.setBearing(bearing)
+    },
+    getBearing () {
+      if (typeof this.map.getBearing !== 'function') {
+        logger.warn(`[KDK] Map not configured to handle bearing, ignoring`)
+        return 0
+      }
+      return this.map.getBearing()
+    },
     getBounds () {
       this.viewBounds = this.map.getBounds()
       const south = this.viewBounds.getSouth()

diff --git a/map/client/mixins/map/mixin.canvas-layers.js b/map/client/mixins/map/mixin.canvas-layers.js
@@ -361,7 +361,8 @@ export const canvasLayers = {
 
       // Check for valid type
       if (layerOptions.type !== 'kanvasLayer') return
-
+      // Defaults to rotate pane
+      if (this.map._rotate && !options.pane) options.pane = 'rotatePane'
       const layer = this.createLeafletLayer(options)
       this.setCanvasLayerDrawCode(layer, layerOptions.draw)
       if (layerOptions.userData) this.setCanvasLayerUserData(layer, layerOptions.userData)