Fix HeatmapLayer in offset mode (visgl#5625)

harisbal · Apr 5, 2021 · 26bcb63 · 26bcb63
1 parent e367115
commit 26bcb63
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git a/modules/aggregation-layers/src/heatmap-layer/heatmap-layer.js b/modules/aggregation-layers/src/heatmap-layer/heatmap-layer.js
@@ -180,6 +180,9 @@ export default class HeatmapLayer extends AggregationLayer {
         updateTriggers
       }),
       {
+        // position buffer is filled with world coordinates generated from viewport.unproject
+        // i.e. LNGLAT if geospatial, CARTESIAN otherwise
+        coordinateSystem: COORDINATE_SYSTEM.DEFAULT,
         data: {
           attributes: {
             positions: triPositionBuffer,
@@ -523,24 +526,39 @@ export default class HeatmapLayer extends AggregationLayer {
     const [minLong, minLat, maxLong, maxLat] = worldBounds;
     const {viewport} = this.context;
     const {textureSize} = this.state;
-
+    const {coordinateSystem} = this.props;
+
+    const offsetMode =
+      useLayerCoordinateSystem &&
+      (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS ||
+        coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS);
+    const offsetOriginCommon = offsetMode
+      ? viewport.projectPosition(this.props.coordinateOrigin)
+      : [0, 0];
     const size = (textureSize * RESOLUTION) / viewport.scale;
 
     let bottomLeftCommon;
     let topRightCommon;
 
     // Y-axis is flipped between World and Common bounds
-    if (useLayerCoordinateSystem) {
+    if (useLayerCoordinateSystem && !offsetMode) {
       bottomLeftCommon = this.projectPosition([minLong, minLat, 0]);
       topRightCommon = this.projectPosition([maxLong, maxLat, 0]);
     } else {
       bottomLeftCommon = viewport.projectPosition([minLong, minLat, 0]);
       topRightCommon = viewport.projectPosition([maxLong, maxLat, 0]);
     }
     // Ignore z component
-    let commonBounds = bottomLeftCommon.slice(0, 2).concat(topRightCommon.slice(0, 2));
-    commonBounds = scaleToAspectRatio(commonBounds, size, size);
-    return commonBounds;
+    return scaleToAspectRatio(
+      [
+        bottomLeftCommon[0] - offsetOriginCommon[0],
+        bottomLeftCommon[1] - offsetOriginCommon[1],
+        topRightCommon[0] - offsetOriginCommon[0],
+        topRightCommon[1] - offsetOriginCommon[1]
+      ],
+      size,
+      size
+    );
   }
 
   // input commonBounds: [xMin, yMin, xMax, yMax]

diff --git a/test/render/test-cases/heatmap-layer.js b/test/render/test-cases/heatmap-layer.js
@@ -1,4 +1,5 @@
 import {HeatmapLayer} from '@deck.gl/aggregation-layers';
+import {COORDINATE_SYSTEM} from '@deck.gl/core';
 import {points} from 'deck.gl-test/data';
 
 export default [
@@ -89,5 +90,29 @@ export default [
       })
     ],
     goldenImage: './test/render/golden-images/heatmap-lnglat-high-precision.png'
+  },
+  {
+    name: 'heatmap-lnglat-offset',
+    viewState: {
+      latitude: 37.75,
+      longitude: -122.44,
+      zoom: 11.5,
+      pitch: 30,
+      bearing: 0
+    },
+    layers: [
+      new HeatmapLayer({
+        id: 'heatmap-lnglat-offset',
+        data: points,
+        opacity: 0.8,
+        coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS,
+        coordinateOrigin: [-122.42, 37.76],
+        getPosition: d => [d.COORDINATES[0] + 122.42, d.COORDINATES[1] - 37.76],
+        getWeight: d => d.SPACES,
+        radiusPixels: 35,
+        threshold: 0.1
+      })
+    ],
+    goldenImage: './test/render/golden-images/heatmap-lnglat.png'
   }
 ];