GoogleMapsOverlay support non-interleaved mode for vector maps (visgl…

…#6804)
forestofrain · Apr 7, 2022 · 1cf1eb0 · 1cf1eb0
1 parent 1e65c97
commit 1cf1eb0
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 32 deletions.
diff --git a/modules/google-maps/src/google-maps-overlay.js b/modules/google-maps/src/google-maps-overlay.js
@@ -17,11 +17,17 @@ const GL_STATE = {
   blendEquation: GL.FUNC_ADD
 };
 
+function noop() {}
+
+const defaultProps = {
+  interleaved: true
+};
+
 export default class GoogleMapsOverlay {
   constructor(props) {
     this.props = {};
     this._map = null;
-    this.setProps(props);
+    this.setProps({...defaultProps, ...props});
   }
 
   /* Public API */
@@ -81,6 +87,7 @@ export default class GoogleMapsOverlay {
 
   /* Private API */
   _createOverlay(map) {
+    const {interleaved} = this.props;
     const {VECTOR, UNINITIALIZED} = google.maps.RenderingType;
     const renderingType = map.getRenderingType();
     if (renderingType === UNINITIALIZED) {
@@ -92,10 +99,16 @@ export default class GoogleMapsOverlay {
 
     // Lifecycle methods are different depending on map type
     if (isVectorMap) {
-      overlay.onAdd = () => {};
+      if (interleaved) {
+        overlay.onAdd = noop;
+        overlay.onContextRestored = this._onContextRestored.bind(this);
+        overlay.onDraw = this._onDrawVectorInterleaved.bind(this);
+      } else {
+        overlay.onAdd = this._onAdd.bind(this);
+        overlay.onContextRestored = noop;
+        overlay.onDraw = this._onDrawVectorOverlay.bind(this);
+      }
       overlay.onContextLost = this._onContextLost.bind(this);
-      overlay.onContextRestored = this._onContextRestored.bind(this);
-      overlay.onDraw = this._onDrawVector.bind(this);
     } else {
       overlay.onAdd = this._onAdd.bind(this);
       overlay.draw = this._onDrawRaster.bind(this);
@@ -165,15 +178,19 @@ export default class GoogleMapsOverlay {
   }
 
   // Vector code path
-  _onDrawVector({gl, transformer}) {
+  _onDrawVectorInterleaved({gl, transformer}) {
     if (!this._deck || !this._map) {
       return;
     }
 
     const deck = this._deck;
 
     deck.setProps({
-      ...getViewPropsFromCoordinateTransformer(this._map, transformer)
+      ...getViewPropsFromCoordinateTransformer(this._map, transformer),
+
+      // Using external gl context - do not set css size
+      width: false,
+      height: false
     });
 
     if (deck.layerManager) {
@@ -202,4 +219,16 @@ export default class GoogleMapsOverlay {
       });
     }
   }
+
+  _onDrawVectorOverlay({gl, transformer}) {
+    if (!this._deck || !this._map) {
+      return;
+    }
+
+    const deck = this._deck;
+    deck.setProps({
+      ...getViewPropsFromCoordinateTransformer(this._map, transformer)
+    });
+    deck.redraw();
+  }
 }
diff --git a/modules/google-maps/src/utils.js b/modules/google-maps/src/utils.js
@@ -29,7 +29,7 @@ export function createDeckInstance(map, overlay, deck, props) {
 
   deck = new Deck({
     ...props,
-    style: null,
+    style: props.interleaved ? null : {pointerEvents: 'none'},
     parent: getContainer(overlay, props.style),
     initialViewState: {
       longitude: 0,
@@ -204,9 +204,8 @@ export function getViewPropsFromCoordinateTransformer(map, transformer) {
   const focalDistance = 0.5 * projectionMatrix[5];
 
   return {
-    // Using external gl context - do not set css size
-    width: false,
-    height: false,
+    width,
+    height,
     viewState: {
       altitude: focalDistance,
       bearing,

diff --git a/test/modules/google-maps/google-maps-overlay.spec.js b/test/modules/google-maps/google-maps-overlay.spec.js
@@ -27,6 +27,7 @@ test('GoogleMapsOverlay#constructor', t => {
   map.emit({type: 'renderingtype_changed'});
   const deck = overlay._deck;
   t.ok(deck, 'Deck instance is created');
+  t.ok(overlay.props.interleaved, 'interleaved defaults to true');
 
   overlay.setMap(map);
   t.is(overlay._deck, deck, 'Deck instance is the same');
@@ -40,38 +41,24 @@ test('GoogleMapsOverlay#constructor', t => {
   t.end();
 });
 
-test('GoogleMapsOverlay#raster lifecycle', t => {
-  const map = new mapsApi.Map({
-    width: 1,
-    height: 1,
-    longitude: 0,
-    latitude: 0,
-    zoom: 1,
-    renderingType: mapsApi.RenderingType.RASTER
-  });
-
+test('GoogleMapsOverlay#interleaved prop', t => {
   const overlay = new GoogleMapsOverlay({
+    interleaved: false,
     layers: []
   });
 
-  overlay.setMap(map);
-  map.emit({type: 'renderingtype_changed'});
-  t.ok(overlay._overlay.onAdd, 'onAdd lifecycle function is registered');
-  t.ok(overlay._overlay.draw, 'draw lifecycle function is registered');
-  t.ok(overlay._overlay.onRemove, 'onRemove lifecycle function is registered');
-  overlay.finalize();
-
+  t.ok(!overlay.props.interleaved, 'interleaved set to false');
   t.end();
 });
 
-test('GoogleMapsOverlay#vector lifecycle', t => {
+test('GoogleMapsOverlay#raster lifecycle', t => {
   const map = new mapsApi.Map({
     width: 1,
     height: 1,
     longitude: 0,
     latitude: 0,
     zoom: 1,
-    renderingType: mapsApi.RenderingType.VECTOR
+    renderingType: mapsApi.RenderingType.RASTER
   });
 
   const overlay = new GoogleMapsOverlay({
@@ -81,15 +68,42 @@ test('GoogleMapsOverlay#vector lifecycle', t => {
   overlay.setMap(map);
   map.emit({type: 'renderingtype_changed'});
   t.ok(overlay._overlay.onAdd, 'onAdd lifecycle function is registered');
-  t.ok(overlay._overlay.onContextLost, 'onContextLost lifecycle function is registered');
-  t.ok(overlay._overlay.onContextRestored, 'onContextRestored lifecycle function is registered');
-  t.ok(overlay._overlay.onDraw, 'onDraw lifecycle function is registered');
+  t.ok(overlay._overlay.draw, 'draw lifecycle function is registered');
   t.ok(overlay._overlay.onRemove, 'onRemove lifecycle function is registered');
   overlay.finalize();
 
   t.end();
 });
 
+for (const interleaved of [true, false]) {
+  test(`GoogleMapsOverlay#vector lifecycle (interleaved:${interleaved}`, t => {
+    const map = new mapsApi.Map({
+      width: 1,
+      height: 1,
+      longitude: 0,
+      latitude: 0,
+      zoom: 1,
+      renderingType: mapsApi.RenderingType.VECTOR
+    });
+
+    const overlay = new GoogleMapsOverlay({
+      interleaved,
+      layers: []
+    });
+
+    overlay.setMap(map);
+    map.emit({type: 'renderingtype_changed'});
+    t.ok(overlay._overlay.onAdd, 'onAdd lifecycle function is registered');
+    t.ok(overlay._overlay.onContextLost, 'onContextLost lifecycle function is registered');
+    t.ok(overlay._overlay.onContextRestored, 'onContextRestored lifecycle function is registered');
+    t.ok(overlay._overlay.onDraw, 'onDraw lifecycle function is registered');
+    t.ok(overlay._overlay.onRemove, 'onRemove lifecycle function is registered');
+    overlay.finalize();
+
+    t.end();
+  });
+}
+
 test('GoogleMapsOverlay#style', t => {
   const map = new mapsApi.Map({
     width: 1,