fix(layers): Fix MVTLayer + pickMultipleObjects (#9246)

Author: donmccurdy

modules/layers/src/geojson-layer/geojson-binary.ts

@@ -70,13 +70,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;
     }
   }
 

modules/layers/src/geojson-layer/geojson-layer-props.ts

@@ -74,7 +74,7 @@ export function createLayerPropsFromBinary(
       ...points.attributes,
       getPosition: points.positions,
       instancePickingColors: {
-        size: 3,
+        size: 4,
         value: customPickingColors.points!
       }
     },
@@ -90,7 +90,7 @@ export function createLayerPropsFromBinary(
       ...lines.attributes,
       getPath: lines.positions,
       instancePickingColors: {
-        size: 3,
+        size: 4,
         value: customPickingColors.lines!
       }
     },
@@ -107,7 +107,7 @@ export function createLayerPropsFromBinary(
       ...polygons.attributes,
       getPolygon: polygons.positions,
       pickingColors: {
-        size: 3,
+        size: 4,
         value: customPickingColors.polygons!
       }
     },
@@ -127,7 +127,7 @@ export function createLayerPropsFromBinary(
       ...polygons.attributes,
       getPath: polygons.positions,
       instancePickingColors: {
-        size: 3,
+        size: 4,
         value: customPickingColors.polygons!
       }
     },

test/bench/layer.bench.js

@@ -127,8 +127,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});
     });
 }

test/modules/layers/data/fixtures.ts

@@ -40,6 +40,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,
 ]);