Repository: visgl/deck.gl (language: python)

Issue:
[Bug] PickMultipleObjects Returning the Same Objects Repeated With MVT Layer
### Description

Using `pickMultipleObjects` is returning the same objects duplicated up to the limit specified by `depth` in the MVT Layer.

[See this pen](https://codepen.io/acdanger/pen/YzmebXr) and observe the console output when clicking on objects in the map. 

In addition - and I haven't been able to repeat this in the provided codepen yet - in our production app, `pickMultipleObjects` is returning objects that are far from the coordinates specified by x and y. You can see this occurring [here](https://cerulean.skytruth.org/?zoom=2.49679&lat=-20.891155&lng=-56.344711&mpa=0&eez=1&iho=0&aoi=19) by clicking around  the Brazilian cost - notice sometimes results will be returned in the popup far from the clicked area.

### Flavors

- [X] Script tag
- [X] React
- [ ] Python/Jupyter notebook
- [ ] MapboxOverlay
- [ ] GoogleMapsOverlay
- [ ] CartoLayer
- [ ] ArcGIS

### Expected Behavior

Only one copy of each object should be returned when using `pickMultipleObjects`.

### Steps to Reproduce

See https://codepen.io/acdanger/pen/YzmebXr

### Environment

- Framework version: ~9.0.0
- Browser: Chrome
- OS: macOS


### Logs

_No response_


Discussion / hints:

Fix patch:
diff --git a/modules/layers/src/geojson-layer/geojson-binary.ts b/modules/layers/src/geojson-layer/geojson-binary.ts
index 2f7e39beb0d..39fcef8ba32 100644
--- a/modules/layers/src/geojson-layer/geojson-binary.ts
+++ b/modules/layers/src/geojson-layer/geojson-binary.ts
@@ -74,13 +74,14 @@ export function calculatePickingColors(
   };
   for (const key in pickingColors) {
     const featureIds = geojsonBinary[key].globalFeatureIds.value;
-    pickingColors[key] = new Uint8ClampedArray(featureIds.length * 3);
+    pickingColors[key] = new Uint8ClampedArray(featureIds.length * 4);
     const pickingColor = [];
     for (let i = 0; i < featureIds.length; i++) {
       encodePickingColor(featureIds[i], pickingColor);
-      pickingColors[key][i * 3 + 0] = pickingColor[0];
-      pickingColors[key][i * 3 + 1] = pickingColor[1];
-      pickingColors[key][i * 3 + 2] = pickingColor[2];
+      pickingColors[key][i * 4 + 0] = pickingColor[0];
+      pickingColors[key][i * 4 + 1] = pickingColor[1];
+      pickingColors[key][i * 4 + 2] = pickingColor[2];
+      pickingColors[key][i * 4 + 3] = 255;
     }
   }
 
diff --git a/modules/layers/src/geojson-layer/geojson-layer-props.ts b/modules/layers/src/geojson-layer/geojson-layer-props.ts
index 47e6ec0f535..ee8e00f0b7f 100644
--- a/modules/layers/src/geojson-layer/geojson-layer-props.ts
+++ b/modules/layers/src/geojson-layer/geojson-layer-props.ts
@@ -78,7 +78,7 @@ export function createLayerPropsFromBinary(
       ...points.attributes,
       getPosition: points.positions,
       instancePickingColors: {
-        size: 3,
+        size: 4,
         value: customPickingColors.points!
       }
     },
@@ -94,7 +94,7 @@ export function createLayerPropsFromBinary(
       ...lines.attributes,
       getPath: lines.positions,
       instancePickingColors: {
-        size: 3,
+        size: 4,
         value: customPickingColors.lines!
       }
     },
@@ -111,7 +111,7 @@ export function createLayerPropsFromBinary(
       ...polygons.attributes,
       getPolygon: polygons.positions,
       pickingColors: {
-        size: 3,
+        size: 4,
         value: customPickingColors.polygons!
       }
     },
@@ -131,7 +131,7 @@ export function createLayerPropsFromBinary(
       ...polygons.attributes,
       getPath: polygons.positions,
       instancePickingColors: {
-        size: 3,
+        size: 4,
         value: customPickingColors.polygons!
       }
     },


Test patch:
diff --git a/test/bench/layer.bench.js b/test/bench/layer.bench.js
index b9c3fdce141..28697a5d8a9 100644
--- a/test/bench/layer.bench.js
+++ b/test/bench/layer.bench.js
@@ -111,8 +111,8 @@ export default function layerBench(suite) {
     })
     .add('calculate instance picking colors', () => {
       const numInstances = 1e6;
-      const target = new Uint8ClampedArray(numInstances * 3);
+      const target = new Uint8ClampedArray(numInstances * 4);
       testLayer.internalState = {};
-      testLayer.calculateInstancePickingColors({value: target, size: 3}, {numInstances});
+      testLayer.calculateInstancePickingColors({value: target, size: 4}, {numInstances});
     });
 }
diff --git a/test/modules/layers/data/fixtures.ts b/test/modules/layers/data/fixtures.ts
index 8bd61681fc7..d27b730ec71 100644
--- a/test/modules/layers/data/fixtures.ts
+++ b/test/modules/layers/data/fixtures.ts
@@ -44,6 +44,13 @@ export const geoJSONData = [
 ];
 
 // prettier-ignore
-export const pickingColorsSample = Uint8ClampedArray.from([ 
-  1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 2, 0, 0, 2, 0, 0, 2, 0, 0, 2, 0, 0
+export const pickingColorsSample = Uint8ClampedArray.from([
+  1, 0, 0, 255,
+  1, 0, 0, 255,
+  1, 0, 0, 255,
+  1, 0, 0, 255,
+  2, 0, 0, 255,
+  2, 0, 0, 255,
+  2, 0, 0, 255,
+  2, 0, 0, 255,
 ]);