Modify render tests to catch regressions

rendering/cases/layer-vector-decluttering/main.js

@@ -7,6 +7,7 @@ import Point from '../../../src/ol/geom/Point.js';
 import Style from '../../../src/ol/style/Style.js';
 import Text from '../../../src/ol/style/Text.js';
 import CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
 import Stroke from '../../../src/ol/style/Stroke.js';
 import LineString from '../../../src/ol/geom/LineString.js';
 
@@ -59,9 +60,10 @@ source1.addFeature(new Feature({
 }));
 layer1.setStyle(function(feature) {
   return new Style({
+    zIndex: feature.get('zIndex'),
     image: new CircleStyle({
       radius: 15,
-      stroke: new Stroke({
+      fill: new Fill({
         color: 'blue'
       })
     })
@@ -88,15 +90,16 @@ source2.addFeature(new Feature({
 }));
 layer2.setStyle(function(feature) {
   return new Style({
+    zIndex: feature.get('zIndex'),
     text: new Text({
       text: feature.get('text'),
-      font: '16px Ubuntu'
+      font: 'italic bold 18px Ubuntu'
     })
   });
 });
 map.addLayer(layer2);
 
-center = [center[0] + 500, center[1] + 500];
+center = [center[0] + 500, center[1] + 300];
 source3.addFeature(new Feature({
   geometry: new Point(center),
   text: 'center'
@@ -112,16 +115,17 @@ source3.addFeature(new Feature({
 layer3.setStyle(function(feature) {
   return new Style({
     image: new CircleStyle({
-      radius: 5,
+      radius: 10,
       stroke: new Stroke({
-        color: 'red'
+        color: 'red',
+        width: 8
       })
     }),
     text: new Text({
       text: feature.get('text'),
-      font: '16px Ubuntu',
+      font: 'italic bold 18px Ubuntu',
       textBaseline: 'bottom',
-      offsetY: -5
+      offsetY: -12
     })
   });
 });
@@ -130,11 +134,12 @@ map.addLayer(layer3);
 center = [center[0] - 2000, center[1] - 2000];
 const point = new Feature(new Point(center));
 point.setStyle(new Style({
-  zIndex: 2,
+  zIndex: 1,
   image: new CircleStyle({
     radius: 8,
     stroke: new Stroke({
-      color: 'blue'
+      color: 'blue',
+      width: 4
     })
   })
 }));
@@ -143,7 +148,7 @@ const line = new Feature(new LineString([
   [center[0] + 650, center[1] - 200]
 ]));
 line.setStyle(new Style({
-  zIndex: 1,
+  zIndex: 2,
   stroke: new Stroke({
     color: '#CCC',
     width: 12
@@ -151,7 +156,7 @@ line.setStyle(new Style({
   text: new Text({
     placement: 'line',
     text: 'east-west',
-    font: '16px Ubuntu',
+    font: 'italic bold 18px Ubuntu',
     overflow: true
   })
 }));
@@ -159,4 +164,4 @@ source4.addFeature(point);
 source4.addFeature(line);
 map.addLayer(layer4);
 
-render({tolerance: 0.02});
+render({tolerance: 0.007});

rendering/cases/layer-vectorimage-decluttering/main.js

@@ -1,72 +1,19 @@
-import Feature from '../../../src/ol/Feature.js';
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import VectorSource from '../../../src/ol/source/Vector.js';
-import Style from '../../../src/ol/style/Style.js';
-import Stroke from '../../../src/ol/style/Stroke.js';
 import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
-import CircleStyle from '../../../src/ol/style/Circle.js';
+import Feature from '../../../src/ol/Feature.js';
 import Point from '../../../src/ol/geom/Point.js';
-import LineString from '../../../src/ol/geom/LineString.js';
+import Style from '../../../src/ol/style/Style.js';
 import Text from '../../../src/ol/style/Text.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import LineString from '../../../src/ol/geom/LineString.js';
 
-const center = [1825927.7316762917, 6143091.089223046];
+let center = [1825927.7316762917, 6143091.089223046];
-
-const source = new VectorSource();
-const vectorLayer1 = new VectorImageLayer({
-  source: source,
-  style: function(feature) {
-    return new Style({
-      image: new CircleStyle({
-        radius: 15,
-        stroke: new Stroke({
-          color: 'blue'
-        })
-      }),
-      text: new Text({
-        text: feature.get('text'),
-        font: '16px Ubuntu'
-      })
-    });
-  }
-});
-
-const centerFeature = new Feature({
-  geometry: new Point(center),
-  text: 'center'
-});
-source.addFeature(centerFeature);
-source.addFeature(new Feature({
-  geometry: new Point([center[0] - 540, center[1]]),
-  text: 'west'
-}));
-source.addFeature(new Feature({
-  geometry: new Point([center[0] + 540, center[1]]),
-  text: 'east'
-}));
-
-const line = new Feature(new LineString([
-  [center[0] - 650, center[1] - 200],
-  [center[0] + 650, center[1] - 200]
-]));
-line.setStyle(new Style({
-  stroke: new Stroke({
-    color: '#CCC',
-    width: 12
-  }),
-  text: new Text({
-    placement: 'line',
-    text: 'east-west',
-    font: '16px Ubuntu'
-  })
-}));
-source.addFeature(line);
-
 const map = new Map({
   pixelRatio: 1,
-  layers: [
-    vectorLayer1
-  ],
   target: 'map',
   view: new View({
     center: center,
@@ -74,6 +21,147 @@ const map = new Map({
   })
 });
 
-map.getView().fit(source.getExtent());
+const source1 = new VectorSource();
+const layer1 = new VectorImageLayer({
+  declutter: true,
+  source: source1
+});
 
-render({tolerance: 0.02});
+const source2 = new VectorSource();
+const layer2 = new VectorImageLayer({
+  declutter: true,
+  source: source2
+});
+
+const source3 = new VectorSource();
+const layer3 = new VectorImageLayer({
+  declutter: true,
+  source: source3
+});
+
+const source4 = new VectorSource();
+const layer4 = new VectorImageLayer({
+  declutter: true,
+  source: source4
+});
+
+const feature1 = new Feature({
+  geometry: new Point(center),
+  zIndex: 2
+});
+source1.addFeature(feature1);
+source1.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  zIndex: 3
+}));
+source1.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  zIndex: 1
+}));
+layer1.setStyle(function(feature) {
+  return new Style({
+    zIndex: feature.get('zIndex'),
+    image: new CircleStyle({
+      radius: 15,
+      fill: new Fill({
+        color: 'blue'
+      })
+    })
+  });
+});
+map.addLayer(layer1);
+
+center = [center[0] + 500, center[1] + 500];
+const feature2 = new Feature({
+  geometry: new Point(center),
+  text: 'center',
+  zIndex: 2
+});
+source2.addFeature(feature2);
+source2.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west',
+  zIndex: 3
+}));
+source2.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  text: 'east',
+  zIndex: 1
+}));
+layer2.setStyle(function(feature) {
+  return new Style({
+    zIndex: feature.get('zIndex'),
+    text: new Text({
+      text: feature.get('text'),
+      font: 'italic bold 16px Ubuntu'
+    })
+  });
+});
+map.addLayer(layer2);
+
+center = [center[0] + 500, center[1] + 300];
+source3.addFeature(new Feature({
+  geometry: new Point(center),
+  text: 'center'
+}));
+source3.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west'
+}));
+source3.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  text: 'east'
+}));
+layer3.setStyle(function(feature) {
+  return new Style({
+    image: new CircleStyle({
+      radius: 10,
+      stroke: new Stroke({
+        color: 'red',
+        width: 8
+      })
+    }),
+    text: new Text({
+      text: feature.get('text'),
+      font: 'italic bold 16px Ubuntu',
+      textBaseline: 'bottom',
+      offsetY: -12
+    })
+  });
+});
+map.addLayer(layer3);
+
+center = [center[0] - 2000, center[1] - 2000];
+const point = new Feature(new Point(center));
+point.setStyle(new Style({
+  zIndex: 1,
+  image: new CircleStyle({
+    radius: 8,
+    stroke: new Stroke({
+      color: 'blue',
+      width: 4
+    })
+  })
+}));
+const line = new Feature(new LineString([
+  [center[0] - 650, center[1] - 200],
+  [center[0] + 650, center[1] - 200]
+]));
+line.setStyle(new Style({
+  zIndex: 2,
+  stroke: new Stroke({
+    color: '#CCC',
+    width: 12
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: 'italic bold 16px Ubuntu',
+    overflow: true
+  })
+}));
+source4.addFeature(point);
+source4.addFeature(line);
+map.addLayer(layer4);
+
+render({tolerance: 0.007});