@deck.gl/mapbox 8.8.11 → 8.9.0-alpha.3

package/src/deck-utils.ts

@@ -3,13 +3,19 @@ import type {DeckProps, MapViewState, Layer} from '@deck.gl/core';
 import type MapboxLayer from './mapbox-layer';
 import type {Map} from 'mapbox-gl';
 
+import {lngLatToWorld, unitsPerMeter} from '@math.gl/web-mercator';
+
 type UserData = {
   isExternal: boolean;
   currentViewport?: WebMercatorViewport | null;
   mapboxLayers: Set<MapboxLayer<any>>;
-  mapboxVersion: {minor: number; major: number};
+  // mapboxVersion: {minor: number; major: number};
 };
 
+// Mercator constants
+const TILE_SIZE = 512;
+const DEGREES_TO_RADIANS = Math.PI / 180;
+
 export function getDeckInstance({
   map,
   gl,
@@ -79,7 +85,7 @@ export function getDeckInstance({
   }
 
   (deckInstance.userData as UserData).mapboxLayers = new Set();
-  (deckInstance.userData as UserData).mapboxVersion = getMapboxVersion(map);
+  // (deckInstance.userData as UserData).mapboxVersion = getMapboxVersion(map);
   map.__deck = deckInstance;
   map.on('render', () => {
     if (deckInstance.isInitialized) afterRender(deckInstance, map);
@@ -135,7 +141,16 @@ export function getViewState(map: Map): MapViewState & {
   };
 } {
   const {lng, lat} = map.getCenter();
-  return {
+
+  const viewState: MapViewState & {
+    repeat: boolean;
+    padding: {
+      left: number;
+      right: number;
+      top: number;
+      bottom: number;
+    };
+  } = {
     // Longitude returned by getCenter can be outside of [-180, 180] when zooming near the anti meridian
     // https://github.com/visgl/deck.gl/issues/6894
     longitude: ((lng + 540) % 360) - 180,
@@ -146,49 +161,81 @@ export function getViewState(map: Map): MapViewState & {
     padding: map.getPadding(),
     repeat: map.getRenderWorldCopies()
   };
+
+  if (map.getTerrain?.()) {
+    // When the base map has terrain, we need to target the camera at the terrain surface
+    centerCameraOnTerrain(map, viewState);
+  }
+
+  return viewState;
 }
 
-function getMapboxVersion(map: Map): {minor: number; major: number} {
-  // parse mapbox version string
-  let major = 0;
-  let minor = 0;
-  // @ts-ignore (2339) undefined property
-  const version: string = map.version;
-  if (version) {
-    [major, minor] = version.split('.').slice(0, 2).map(Number);
+function centerCameraOnTerrain(map: Map, viewState: MapViewState) {
+  if (map.getFreeCameraOptions) {
+    // mapbox-gl v2
+    const {position} = map.getFreeCameraOptions();
+    if (!position || position.z === undefined) {
+      return;
+    }
+
+    // @ts-ignore transform is not typed
+    const height = map.transform.height;
+    const {longitude, latitude, pitch} = viewState;
+
+    // Convert mapbox mercator coordinate to deck common space
+    const cameraX = position.x * TILE_SIZE;
+    const cameraY = (1 - position.y) * TILE_SIZE;
+    const cameraZ = position.z * TILE_SIZE;
+
+    // Mapbox manipulates zoom in terrain mode, see discussion here: https://github.com/mapbox/mapbox-gl-js/issues/12040
+    const center = lngLatToWorld([longitude, latitude]);
+    const dx = cameraX - center[0];
+    const dy = cameraY - center[1];
+    const cameraToCenterDistanceGround = Math.sqrt(dx * dx + dy * dy);
+
+    const pitchRadians = pitch! * DEGREES_TO_RADIANS;
+    const altitudePixels = 1.5 * height;
+    const scale = (altitudePixels * Math.sin(pitchRadians)) / cameraToCenterDistanceGround;
+    viewState.zoom = Math.log2(scale);
+
+    const cameraZFromSurface = (altitudePixels * Math.cos(pitchRadians)) / scale;
+    const surfaceElevation = cameraZ - cameraZFromSurface;
+    viewState.position = [0, 0, surfaceElevation / unitsPerMeter(latitude)];
+  }
+  // @ts-ignore transform is not typed
+  else if (typeof map.transform.elevation === 'number') {
+    // maplibre-gl
+    // @ts-ignore transform is not typed
+    viewState.position = [0, 0, map.transform.elevation];
   }
-  return {major, minor};
 }
 
+// function getMapboxVersion(map: Map): {minor: number; major: number} {
+//   // parse mapbox version string
+//   let major = 0;
+//   let minor = 0;
+//   // @ts-ignore (2339) undefined property
+//   const version: string = map.version;
+//   if (version) {
+//     [major, minor] = version.split('.').slice(0, 2).map(Number);
+//   }
+//   return {major, minor};
+// }
+
 function getViewport(deck: Deck, map: Map, useMapboxProjection = true): WebMercatorViewport {
-  const {mapboxVersion} = deck.userData as UserData;
-
-  return new WebMercatorViewport(
-    Object.assign(
-      {
-        id: 'mapbox',
-        x: 0,
-        y: 0,
-        width: deck.width,
-        height: deck.height
-      },
-      getViewState(map),
-      useMapboxProjection
-        ? {
-            // match mapbox's projection matrix
-            // A change of near plane was made in 1.3.0
-            // https://github.com/mapbox/mapbox-gl-js/pull/8502
-            nearZMultiplier:
-              (mapboxVersion.major === 1 && mapboxVersion.minor >= 3) || mapboxVersion.major >= 2
-                ? 0.02
-                : 1 / (deck.height || 1)
-          }
-        : {
-            // use deck.gl's own default
-            nearZMultiplier: 0.1
-          }
-    )
-  );
+  return new WebMercatorViewport({
+    id: 'mapbox',
+    x: 0,
+    y: 0,
+    width: deck.width,
+    height: deck.height,
+    ...getViewState(map),
+    nearZMultiplier: useMapboxProjection
+      ? // match mapbox-gl@>=1.3.0's projection matrix
+        0.02
+      : // use deck.gl's own default
+        0.1
+  });
 }
 
 function afterRender(deck: Deck, map: Map): void {

package/typed/deck-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deck-utils.d.ts","sourceRoot":"","sources":["../src/deck-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAoD,MAAM,eAAe,CAAC;AACtF,OAAO,KAAK,EAAY,YAAY,EAAQ,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,WAAW,CAAC;AASnC,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,EAAE,EACF,IAAI,EACL,EAAE;IACD,GAAG,EAAE,GAAG,GAAG;QAAC,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;IAClC,EAAE,EAAE,qBAAqB,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,IAAI,CAoEP;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAGlE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAGrE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAErE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAqB7E;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,YAAY,GAAG;IACrD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAaA"}
+{"version":3,"file":"deck-utils.d.ts","sourceRoot":"","sources":["../src/deck-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAoD,MAAM,eAAe,CAAC;AACtF,OAAO,KAAK,EAAY,YAAY,EAAQ,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,WAAW,CAAC;AAenC,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,EAAE,EACF,IAAI,EACL,EAAE;IACD,GAAG,EAAE,GAAG,GAAG;QAAC,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;IAClC,EAAE,EAAE,qBAAqB,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,IAAI,CAoEP;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAGlE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAGrE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAErE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI,CAqB7E;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,YAAY,GAAG;IACrD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CA6BA"}