Merge pull request #7328 from ahocevar/declutter

Declutter text and images

test/rendering/ol/layer/vector.test.js

@@ -6,12 +6,15 @@ goog.require('ol.View');
 goog.require('ol.format.GeoJSON');
 goog.require('ol.geom.Circle');
 goog.require('ol.geom.LineString');
+goog.require('ol.geom.Point');
 goog.require('ol.geom.Polygon');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
+goog.require('ol.style.Text');
 
 
 describe('ol.rendering.layer.Vector', function() {
@@ -461,4 +464,304 @@ describe('ol.rendering.layer.Vector', function() {
 
   });
 
+  describe('decluttering', function() {
+
+    beforeEach(function() {
+      source = new ol.source.Vector();
+    });
+
+    it('declutters text', function(done) {
+      createMap('canvas');
+      var layer = new ol.layer.Vector({
+        source: source
+      });
+      map.addLayer(layer);
+
+      var centerFeature = new ol.Feature({
+        geometry: new ol.geom.Point(center),
+        text: 'center'
+      });
+      source.addFeature(centerFeature);
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] - 550, center[1]]),
+        text: 'west'
+      }));
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] + 550, center[1]]),
+        text: 'east'
+      }));
+
+      layer.setDeclutter(true);
+      layer.setStyle(function(feature) {
+        return new ol.style.Style({
+          text: new ol.style.Text({
+            text: feature.get('text'),
+            font: '12px sans-serif'
+          })
+        });
+      });
+
+      map.once('postrender', function() {
+        var hitDetected = map.getFeaturesAtPixel([42, 42]);
+        expect(hitDetected).to.have.length(1);
+        expect(hitDetected[0]).to.equal(centerFeature);
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter.png',
+            2.2, done);
+      });
+    });
+
+    it('declutters text and respects z-index', function(done) {
+      createMap('canvas');
+      var layer = new ol.layer.Vector({
+        source: source
+      });
+      map.addLayer(layer);
+
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point(center),
+        text: 'center',
+        zIndex: 2
+      }));
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] - 550, center[1]]),
+        text: 'west',
+        zIndex: 3
+      }));
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] + 550, center[1]]),
+        text: 'east',
+        zIndex: 1
+      }));
+
+      layer.setDeclutter(true);
+      layer.setStyle(function(feature) {
+        return new ol.style.Style({
+          zIndex: feature.get('zIndex'),
+          text: new ol.style.Text({
+            text: feature.get('text'),
+            font: '12px sans-serif'
+          })
+        });
+      });
+
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-zindex.png',
+            3.9, done);
+      });
+    });
+
+    it('declutters images', function(done) {
+      createMap('canvas');
+      var layer = new ol.layer.Vector({
+        source: source
+      });
+      map.addLayer(layer);
+
+      var centerFeature = new ol.Feature({
+        geometry: new ol.geom.Point(center)
+      });
+      source.addFeature(centerFeature);
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] - 550, center[1]])
+      }));
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] + 550, center[1]])
+      }));
+
+      layer.setDeclutter(true);
+      layer.setStyle(function(feature) {
+        return new ol.style.Style({
+          image: new ol.style.Circle({
+            radius: 15,
+            stroke: new ol.style.Stroke({
+              color: 'blue'
+            })
+          })
+        });
+      });
+
+      map.once('postrender', function() {
+        var hitDetected = map.getFeaturesAtPixel([40, 40]);
+        expect(hitDetected).to.have.length(1);
+        expect(hitDetected[0]).to.equal(centerFeature);
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-image.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('declutters images and respects z-index', function(done) {
+      createMap('canvas');
+      var layer = new ol.layer.Vector({
+        source: source
+      });
+      map.addLayer(layer);
+
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point(center),
+        zIndex: 2
+      }));
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] - 550, center[1]]),
+        zIndex: 3
+      }));
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] + 550, center[1]]),
+        zIndex: 1
+      }));
+
+      layer.setDeclutter(true);
+      layer.setStyle(function(feature) {
+        return new ol.style.Style({
+          zIndex: feature.get('zIndex'),
+          image: new ol.style.Circle({
+            radius: 15,
+            stroke: new ol.style.Stroke({
+              color: 'blue'
+            })
+          })
+        });
+      });
+
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-image-zindex.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('declutters image & text groups', function(done) {
+      createMap('canvas');
+      var layer = new ol.layer.Vector({
+        source: source
+      });
+      map.addLayer(layer);
+
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point(center),
+        text: 'center'
+      }));
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] - 550, center[1]]),
+        text: 'west'
+      }));
+      source.addFeature(new ol.Feature({
+        geometry: new ol.geom.Point([center[0] + 550, center[1]]),
+        text: 'east'
+      }));
+
+      layer.setDeclutter(true);
+      layer.setStyle(function(feature) {
+        return new ol.style.Style({
+          image: new ol.style.Circle({
+            radius: 5,
+            stroke: new ol.style.Stroke({
+              color: 'blue'
+            })
+          }),
+          text: new ol.style.Text({
+            text: feature.get('text'),
+            font: '12px sans-serif',
+            textBaseline: 'bottom',
+            offsetY: -5
+          })
+        });
+      });
+
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-group.png',
+            2.2, done);
+      });
+    });
+
+    it('declutters text along lines and images', function(done) {
+      createMap('canvas');
+      var layer = new ol.layer.Vector({
+        source: source
+      });
+      map.addLayer(layer);
+
+      var point = new ol.Feature(new ol.geom.Point(center));
+      point.setStyle(new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 8,
+          stroke: new ol.style.Stroke({
+            color: 'blue'
+          })
+        })
+      }));
+      var line = new ol.Feature(new ol.geom.LineString([
+        [center[0] - 650, center[1] - 200],
+        [center[0] + 650, center[1] - 200]
+      ]));
+      line.setStyle(new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: '#CCC',
+          width: 12
+        }),
+        text: new ol.style.Text({
+          placement: 'line',
+          text: 'east-west',
+          font: '12px sans-serif'
+        })
+      }));
+
+      source.addFeature(point);
+      source.addFeature(line);
+
+      layer.setDeclutter(true);
+
+      map.once('postrender', function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-line.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('declutters text along lines and images with z-index', function(done) {
+      createMap('canvas');
+      var layer = new ol.layer.Vector({
+        source: source
+      });
+      map.addLayer(layer);
+
+      var point = new ol.Feature(new ol.geom.Point(center));
+      point.setStyle(new ol.style.Style({
+        zIndex: 2,
+        image: new ol.style.Circle({
+          radius: 8,
+          stroke: new ol.style.Stroke({
+            color: 'blue'
+          })
+        })
+      }));
+      var line = new ol.Feature(new ol.geom.LineString([
+        [center[0] - 650, center[1] - 200],
+        [center[0] + 650, center[1] - 200]
+      ]));
+      line.setStyle(new ol.style.Style({
+        zIndex: 1,
+        stroke: new ol.style.Stroke({
+          color: '#CCC',
+          width: 12
+        }),
+        text: new ol.style.Text({
+          placement: 'line',
+          text: 'east-west',
+          font: '12px sans-serif'
+        })
+      }));
+
+      source.addFeature(point);
+      source.addFeature(line);
+
+      layer.setDeclutter(true);
+
+      map.once('postrender', function() {
+        var hitDetected = map.getFeaturesAtPixel([35, 46]);
+        expect(hitDetected).to.have.length(1);
+        expect(hitDetected[0]).to.equal(line);
+        expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-line-zindex.png',
+            4.1, done);
+      });
+    });
+  });
+
 });

test/rendering/ol/layer/vectortile.test.js

@@ -6,6 +6,10 @@ goog.require('ol.format.MVT');
 goog.require('ol.layer.VectorTile');
 goog.require('ol.obj');
 goog.require('ol.source.VectorTile');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
 goog.require('ol.tilegrid');
 
 
@@ -13,10 +17,11 @@ describe('ol.rendering.layer.VectorTile', function() {
 
   var map;
 
-  function createMap(renderer, opt_pixelRatio) {
+  function createMap(renderer, opt_pixelRatio, opt_size) {
+    var size = opt_size || 50;
     map = new ol.Map({
       pixelRatio: opt_pixelRatio || 1,
-      target: createMapDiv(50, 50),
+      target: createMapDiv(size, size),
       renderer: renderer,
       view: new ol.View({
         center: [1825927.7316762917, 6143091.089223046],
@@ -104,6 +109,34 @@ describe('ol.rendering.layer.VectorTile', function() {
       });
     });
 
+    it('declutters text and images', function(done) {
+      createMap('canvas', 1, 100);
+      map.getView().setZoom(13.8);
+      var style = function(feature, resolution) {
+        var geom = feature.getGeometry();
+        if (geom.getType() == 'Point') {
+          return new ol.style.Style({
+            image: new ol.style.Circle({
+              radius: 7,
+              fill: new ol.style.Fill({
+                color: 'red'
+              })
+            }),
+            text: new ol.style.Text({
+              text: feature.get('name_en'),
+              font: '12px sans-serif',
+              textBaseline: 'bottom',
+              offsetY: -7
+            })
+          });
+        }
+      };
+      waitForTiles(source, {declutter: true, style: style}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-declutter.png',
+            8.5, done);
+      });
+    });
+
   });
 
 });

test/spec/ol/render/feature.test.js

@@ -1,5 +1,7 @@
-
-
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.MultiLineString');
+goog.require('ol.geom.MultiPolygon');
+goog.require('ol.geom.Polygon');
 goog.require('ol.render.Feature');
 
 
@@ -51,6 +53,51 @@ describe('ol.render.Feature', function() {
     });
   });
 
+  describe('#getFlatInteriorPoint()', function() {
+    it('returns correct point and caches it', function() {
+      var polygon = new ol.geom.Polygon([[[0, 0], [0, 10], [10, 10], [10, 0], [0, 0]]]);
+      var feature = new ol.render.Feature('Polygon', polygon.getOrientedFlatCoordinates(),
+          polygon.getEnds());
+      expect(feature.getFlatInteriorPoint()).to.eql([5, 5, 10]);
+      expect(feature.getFlatInteriorPoint()).to.be(feature.flatInteriorPoints_);
+    });
+  });
+
+  describe('#getFlatInteriorPoints()', function() {
+    it('returns correct points and caches them', function() {
+      var polygon = new ol.geom.MultiPolygon([
+        [[[0, 0], [0, 10], [10, 10], [10, 0], [0, 0]]],
+        [[[10, 0], [10, 10], [20, 10], [20, 0], [10, 0]]]
+      ]);
+      var feature = new ol.render.Feature('MultiPolygon', polygon.getOrientedFlatCoordinates(),
+          polygon.getEndss());
+      expect(feature.getFlatInteriorPoints()).to.eql([5, 5, 10, 15, 5, 10]);
+      expect(feature.getFlatInteriorPoints()).to.be(feature.flatInteriorPoints_);
+    });
+  });
+
+  describe('#getFlatMidpoint()', function() {
+    it('returns correct point', function() {
+      var line = new ol.geom.LineString([[0, 0], [0, 10], [10, 10], [10, 0], [0, 0]]);
+      var feature = new ol.render.Feature('LineString', line.getFlatCoordinates());
+      expect(feature.getFlatMidpoint()).to.eql([10, 10]);
+      expect(feature.getFlatMidpoint()).to.eql(feature.flatMidpoints_);
+    });
+  });
+
+  describe('#getFlatMidpoints()', function() {
+    it('returns correct points and caches them', function() {
+      var line = new ol.geom.MultiLineString([
+        [[0, 0], [0, 10], [10, 10], [10, 0], [0, 0]],
+        [[10, 0], [10, 10], [20, 10], [20, 0], [10, 0]]
+      ]);
+      var feature = new ol.render.Feature('MultiLineString', line.getFlatCoordinates(),
+          line.getEnds());
+      expect(feature.getFlatMidpoints()).to.eql([10, 10, 20, 10]);
+      expect(feature.getFlatMidpoints()).to.be(feature.flatMidpoints_);
+    });
+  });
+
   describe('#getGeometry()', function() {
     it('returns itself as geometry', function() {
       expect(renderFeature.getGeometry()).to.equal(renderFeature);