Merge pull request #11914 from ahocevar/vectortile-declutter-image-with-text

Fix image with text decluttering

rendering/cases/layer-vectortile-icon-label/main.js

@@ -0,0 +1,22 @@
+import Map from '../../../src/ol/Map.js';
+import MapboxVector from '../../../src/ol/layer/MapboxVector.js';
+import View from '../../../src/ol/View.js';
+
+const mapboxVectorLayer = new MapboxVector({
+  styleUrl: '/data/styles/bright-v9/style.json',
+  accessToken: 'test-token',
+});
+
+new Map({
+  layers: [mapboxVectorLayer],
+  target: 'map',
+  view: new View({
+    center: [1822585.77586262, 6141438.140891937],
+    zoom: 16,
+  }),
+});
+
+render({
+  message: 'Vector tile layer declutters image with text correctly',
+  tolerance: 0.01,
+});

src/ol/render/canvas/Executor.js

@@ -850,14 +850,15 @@ class Executor {
             let imageArgs;
             let imageDeclutterBox;
             if (opt_declutterTree && declutterImageWithText) {
-              if (!declutterImageWithText[d]) {
+              const index = dd - d;
+              if (!declutterImageWithText[index]) {
                 // We now have the image for an image+text combination.
-                declutterImageWithText[d] = args;
+                declutterImageWithText[index] = args;
                 // Don't render anything for now, wait for the text.
                 continue;
               }
-              imageArgs = declutterImageWithText[d];
+              imageArgs = declutterImageWithText[index];
-              delete declutterImageWithText[d];
+              delete declutterImageWithText[index];
               imageDeclutterBox = getDeclutterBox(imageArgs);
               if (opt_declutterTree.collides(imageDeclutterBox)) {
                 continue;