From 6c8c8a64770ba1e7b1789116465055ead83f594f Mon Sep 17 00:00:00 2001
From: ahocevar <andreas.hocevar@gmail.com>
Date: Sun, 5 May 2019 14:34:17 +0200
Subject: [PATCH] Fix decluttering on VectorImage layers

---
 changelog/upgrade-notes.md                    |   2 +-
 .../expected.png                              | Bin 6192 -> 6841 bytes
 .../layer-vectorimage-decluttering/main.js    |   6 +++---
 src/ol/layer/BaseVector.js                    |   7 ++++---
 src/ol/layer/VectorImage.js                   |   6 +++---
 src/ol/layer/VectorTile.js                    |   7 ++++---
 src/ol/render.js                              |  15 +++++++++++++++
 src/ol/renderer/Map.js                        |  13 ++-----------
 src/ol/renderer/canvas/VectorImageLayer.js    |   3 +++
 9 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md
index 7740f1e13d..25ed045ef9 100644
--- a/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -100,7 +100,7 @@ If you were previously using `Vector` layers with `renderMode: 'image'`, you hav
 
 ##### New declutter behavior
 
-If a map has more than one layer with `declutter` set to true, decluttering now considers all layers instead of decluttering each layer separately. The higher the z-index of the layer, the higher the priority of decluttered items.
+If a map has more than one layer with `declutter` set to true, decluttering now considers all `Vector` and `VectorTile` instead of decluttering each layer separately. Only `VectorImage` layers continue to be decluttered separately. The higher the z-index of the layer, the higher the priority of decluttered items.
 
 Within a layer, the declutter order has changed. Previously, styles with a lower `zIndex` were prioritized over those with a higher `zIndex`. Now the opposite order is used.
 
diff --git a/rendering/cases/layer-vectorimage-decluttering/expected.png b/rendering/cases/layer-vectorimage-decluttering/expected.png
index 7b907f8ba89832a669c27a16d7830126036e7af1..5ccebf610e8df3494230a7860df838968de8ea54 100644
GIT binary patch
literal 6841
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
B9+dz9

literal 6192
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
bW0+Bca`RJ)9B%Lv0Hk$SSG`#E@$3HsGT)&|

diff --git a/rendering/cases/layer-vectorimage-decluttering/main.js b/rendering/cases/layer-vectorimage-decluttering/main.js
index 43d45ff972..1a6d6c16ca 100644
--- a/rendering/cases/layer-vectorimage-decluttering/main.js
+++ b/rendering/cases/layer-vectorimage-decluttering/main.js
@@ -93,7 +93,7 @@ layer2.setStyle(function(feature) {
     zIndex: feature.get('zIndex'),
     text: new Text({
       text: feature.get('text'),
-      font: 'italic bold 16px Ubuntu'
+      font: 'italic bold 18px Ubuntu'
     })
   });
 });
@@ -123,7 +123,7 @@ layer3.setStyle(function(feature) {
     }),
     text: new Text({
       text: feature.get('text'),
-      font: 'italic bold 16px Ubuntu',
+      font: 'italic bold 18px Ubuntu',
       textBaseline: 'bottom',
       offsetY: -12
     })
@@ -156,7 +156,7 @@ line.setStyle(new Style({
   text: new Text({
     placement: 'line',
     text: 'east-west',
-    font: 'italic bold 16px Ubuntu',
+    font: 'italic bold 18px Ubuntu',
     overflow: true
   })
 }));
diff --git a/src/ol/layer/BaseVector.js b/src/ol/layer/BaseVector.js
index 6974eeddf1..b612b5f762 100644
--- a/src/ol/layer/BaseVector.js
+++ b/src/ol/layer/BaseVector.js
@@ -32,9 +32,10 @@ import {createDefaultStyle, toFunction as toStyleFunction} from '../style/Style.
  * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
  * use {@link module:ol/Map#addLayer}.
  * @property {boolean} [declutter=false] Declutter images and text. Decluttering is applied to all
- * image and text styles of all layers that have set this to `true`. The priority is defined by the z-index
- * of the layer, the `zIndex` of the style and the render order of features. Higher z-index means higher
- * priority. Within the same z-index, a feature rendered before another has higher priority.
+ * image and text styles of all Vector and VectorTile layers that have set this to `true`. The priority
+ * is defined by the z-index of the layer, the `zIndex` of the style and the render order of features.
+ * Higher z-index means higher priority. Within the same z-index, a feature rendered before another has
+ * higher priority.
  * @property {import("../style/Style.js").StyleLike} [style] Layer style. See
  * {@link module:ol/style} for default style which will be used if this is not defined.
  * @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will
diff --git a/src/ol/layer/VectorImage.js b/src/ol/layer/VectorImage.js
index 9775ae251e..1b948ce832 100644
--- a/src/ol/layer/VectorImage.js
+++ b/src/ol/layer/VectorImage.js
@@ -30,9 +30,9 @@ import CanvasVectorImageLayerRenderer from '../renderer/canvas/VectorImageLayer.
  * this layer in its layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
  * use {@link module:ol/Map#addLayer}.
- * @property {boolean} [declutter=false] Declutter images and text. Decluttering is applied to all
- * image and text styles, and the priority is defined by the z-index of the style. Lower z-index
- * means higher priority.
+ * @property {boolean} [declutter=false] Declutter images and text on this layer. The priority is defined
+ * by the `zIndex` of the style and the render order of features. Higher z-index means higher priority.
+ * Within the same z-index, a feature rendered before another has higher priority.
  * @property {import("../style/Style.js").StyleLike} [style] Layer style. See
  * {@link module:ol/style} for default style which will be used if this is not defined.
  * @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will
diff --git a/src/ol/layer/VectorTile.js b/src/ol/layer/VectorTile.js
index e53dd9741a..067ba0d8e1 100644
--- a/src/ol/layer/VectorTile.js
+++ b/src/ol/layer/VectorTile.js
@@ -46,9 +46,10 @@ import {assign} from '../obj.js';
  * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
  * use {@link module:ol/Map#addLayer}.
  * @property {boolean} [declutter=false] Declutter images and text. Decluttering is applied to all
- * image and text styles of all layers that have set this to `true`. The priority is defined by the z-index
- * of the layer, the `zIndex` of the style and the render order of features. Higher z-index means higher
- * priority. Within the same z-index, a feature rendered before another has higher priority.
+ * image and text styles of all Vector and VectorTile layers that have set this to `true`. The priority
+ * is defined by the z-index of the layer, the `zIndex` of the style and the render order of features.
+ * Higher z-index means higher priority. Within the same z-index, a feature rendered before another has
+ * higher priority.
  * @property {import("../style/Style.js").StyleLike} [style] Layer style. See
  * {@link module:ol/style} for default style which will be used if this is not defined.
  * @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will be
diff --git a/src/ol/render.js b/src/ol/render.js
index 330e5aafa6..0b0beb371a 100644
--- a/src/ol/render.js
+++ b/src/ol/render.js
@@ -110,3 +110,18 @@ export function getRenderPixel(event, pixel) {
   applyTransform(event.inversePixelTransform.slice(), result);
   return result;
 }
+
+export function renderDeclutterItems(frameState, declutterTree) {
+  if (declutterTree) {
+    declutterTree.clear();
+  }
+  const items = frameState.declutterItems;
+  for (let z = items.length - 1; z >= 0; --z) {
+    const zIndexItems = items[z];
+    for (let i = 0, ii = zIndexItems.length; i < ii; i += 3) {
+      declutterTree = zIndexItems[i].renderDeclutter(zIndexItems[i + 1], zIndexItems[i + 2], declutterTree);
+    }
+  }
+  items.length = 0;
+  return declutterTree;
+}
diff --git a/src/ol/renderer/Map.js b/src/ol/renderer/Map.js
index 488698d081..9955be7a51 100644
--- a/src/ol/renderer/Map.js
+++ b/src/ol/renderer/Map.js
@@ -10,6 +10,7 @@ import {TRUE} from '../functions.js';
 import {visibleAtResolution} from '../layer/Layer.js';
 import {shared as iconImageCache} from '../style/IconImageCache.js';
 import {compose as composeTransform, makeInverse} from '../transform.js';
+import {renderDeclutterItems} from '../render.js';
 
 /**
  * @abstract
@@ -266,17 +267,7 @@ class MapRenderer extends Disposable {
    * @param {?import("../PluggableMap.js").FrameState} frameState Frame state.
    */
   renderFrame(frameState) {
-    if (this.declutterTree_) {
-      this.declutterTree_.clear();
-    }
-    const items = frameState.declutterItems;
-    for (let z = items.length - 1; z >= 0; --z) {
-      const zIndexItems = items[z];
-      for (let i = 0, ii = zIndexItems.length; i < ii; i += 3) {
-        this.declutterTree_ = zIndexItems[i].renderDeclutter(zIndexItems[i + 1], zIndexItems[i + 2], this.declutterTree_);
-      }
-    }
-    items.length = 0;
+    this.declutterTree_ = renderDeclutterItems(frameState, this.declutterTree_);
   }
 
   /**
diff --git a/src/ol/renderer/canvas/VectorImageLayer.js b/src/ol/renderer/canvas/VectorImageLayer.js
index c92c36885e..8d7e7b20b3 100644
--- a/src/ol/renderer/canvas/VectorImageLayer.js
+++ b/src/ol/renderer/canvas/VectorImageLayer.js
@@ -11,6 +11,7 @@ import CanvasVectorLayerRenderer from './VectorLayer.js';
 import {listen} from '../../events.js';
 import EventType from '../../events/EventType.js';
 import ImageState from '../../ImageState.js';
+import {renderDeclutterItems} from '../../render.js';
 
 /**
  * @classdesc
@@ -72,6 +73,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
       let skippedFeatures = this.skippedFeatures_;
       const context = vectorRenderer.context;
       const imageFrameState = /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
+        declutterItems: [],
         size: [
           getWidth(renderedExtent) / viewResolution,
           getHeight(renderedExtent) / viewResolution
@@ -86,6 +88,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
               (vectorRenderer.replayGroupChanged ||
               !equals(skippedFeatures, newSkippedFeatures))) {
           vectorRenderer.renderFrame(imageFrameState, layerState);
+          renderDeclutterItems(imageFrameState, null);
           skippedFeatures = newSkippedFeatures;
           callback();
         }