Replaces vector.tests.js with new tests

Transforms the old rendering tests for the LayerVector
to the new rendering test approach.

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

@@ -0,0 +1,161 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+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 Stroke from '../../../src/ol/style/Stroke.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+
+let center = [1825927.7316762917, 6143091.089223046];
+const map = new Map({
+  pixelRatio: 1,
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+const source1 = new VectorSource();
+const layer1 = new VectorLayer({
+  declutter: true,
+  source: source1
+});
+
+const source2 = new VectorSource();
+const layer2 = new VectorLayer({
+  declutter: true,
+  source: source2
+});
+
+const source3 = new VectorSource();
+const layer3 = new VectorLayer({
+  declutter: true,
+  source: source3
+});
+
+const source4 = new VectorSource();
+const layer4 = new VectorLayer({
+  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({
+    image: new CircleStyle({
+      radius: 15,
+      stroke: new Stroke({
+        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({
+    text: new Text({
+      text: feature.get('text'),
+      font: '12px sans-serif'
+    })
+  });
+});
+map.addLayer(layer2);
+
+center = [center[0] + 500, center[1] + 500];
+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: 5,
+      stroke: new Stroke({
+        color: 'red'
+      })
+    }),
+    text: new Text({
+      text: feature.get('text'),
+      font: '12px sans-serif',
+      textBaseline: 'bottom',
+      offsetY: -5
+    })
+  });
+});
+map.addLayer(layer3);
+
+center = [center[0] - 2000, center[1] - 2000];
+const point = new Feature(new Point(center));
+point.setStyle(new Style({
+  zIndex: 2,
+  image: new CircleStyle({
+    radius: 8,
+    stroke: new Stroke({
+      color: 'blue'
+    })
+  })
+}));
+const line = new Feature(new LineString([
+  [center[0] - 650, center[1] - 200],
+  [center[0] + 650, center[1] - 200]
+]));
+line.setStyle(new Style({
+  zIndex: 1,
+  stroke: new Stroke({
+    color: '#CCC',
+    width: 12
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: '12px sans-serif'
+  })
+}));
+source4.addFeature(point);
+source4.addFeature(line);
+map.addLayer(layer4);
+
+render({tolerance: 0.02});

rendering/cases/layer-vector-polygon-partial/main.js

@@ -0,0 +1,54 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Fill from '../../../src/ol/style/Fill.js';
+
+const src = new VectorSource({
+  features: [
+    new Feature(new Polygon([[
+      [-22, 18],
+      [-22, 78],
+      [-9, 78],
+      [-9, 18],
+      [-22, 18]
+    ]])),
+    new Feature(new Polygon([[
+      [-9, 18],
+      [-9, 78],
+      [4, 78],
+      [4, 18],
+      [-9, 18]
+    ]]))
+  ]
+});
+const layer = new VectorLayer({
+  renderBuffer: 0,
+  source: src,
+  style: new Style({
+    stroke: new Stroke({
+      color: [0, 0, 0, 1],
+      width: 2
+    }),
+    fill: new Fill({
+      color: [255, 0, 0, 1]
+    })
+  })
+});
+const view = new View({
+  center: [-9.5, 78],
+  zoom: 2,
+  projection: 'EPSG:4326'
+});
+new Map({
+  pixelRatio: 1,
+  layers: [layer],
+  target: 'map',
+  view: view
+});
+
+render();

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

@@ -0,0 +1,43 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+
+const feature = new Feature({
+  geometry: new Polygon([
+    [[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]],
+    [[0, 60], [-17.6336, 24.2705], [-57.0634, 18.5410], [-28.5317, -9.2705], [-35.2671, -48.5410], [0, -30], [35.2671, -48.5410], [28.5317, -9.2705], [57.0634, 18.5410], [17.6336, 24.2705], [0, 60]]
+  ])
+});
+
+const src = new VectorSource({
+  features: [
+    feature
+  ]
+});
+const layer = new VectorLayer({
+  renderBuffer: 0,
+  source: src,
+  style: new Style({
+    fill: new Fill({
+      color: 'blue'
+    })
+  })
+});
+const view = new View({
+  center: [0, 0],
+  zoom: 1,
+  projection: 'EPSG:4326'
+});
+new Map({
+  pixelRatio: 1,
+  layers: [layer],
+  target: 'map',
+  view: view
+});
+
+render();

rendering/cases/layer-vector/main.js

@@ -0,0 +1,110 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.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 Polygon from '../../../src/ol/geom/Polygon.js';
+import Circle from '../../../src/ol/geom/Circle.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source1 = new VectorSource();
+const source2 = new VectorSource();
+const vectorLayer1 = new VectorLayer({
+  source: source1,
+  style: new Style({
+    stroke: new Stroke({
+      color: '#3399CC',
+      width: 1.25
+    })
+  })
+});
+const vectorLayer2 = new VectorLayer({
+  source: source2,
+  opacity: 0.6
+});
+
+function addCircle(r, source) {
+  source.addFeature(new Feature(new Circle(center, r)));
+}
+
+function addPolygon(r, source) {
+  source.addFeature(new Feature(new Polygon([
+    [
+      [center[0] - r, center[1] - r],
+      [center[0] + r, center[1] - r],
+      [center[0] + r, center[1] + r],
+      [center[0] - r, center[1] + r],
+      [center[0] - r, center[1] - r]
+    ]
+  ])));
+}
+
+const smallLine = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine.setStyle(new Style({
+  zIndex: -99,
+  stroke: new Stroke({width: 75, color: 'red'})
+}));
+smallLine.getGeometry().translate(-1000, 1000);
+source1.addFeature(smallLine);
+addPolygon(100, source1);
+addCircle(200, source1);
+addPolygon(250, source1);
+addCircle(500, source1);
+addPolygon(600, source1);
+addPolygon(720, source1);
+
+const smallLine2 = new Feature(new LineString([
+  [center[0], center[1] - 1000],
+  [center[0], center[1] + 1000]
+]));
+smallLine2.setStyle([
+  new Style({
+    stroke: new Stroke({width: 35, color: 'blue'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 15, color: 'green'})
+  })
+]);
+smallLine2.getGeometry().translate(1000, 1000);
+source1.addFeature(smallLine2);
+
+const smallLine3 = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine3.setStyle([
+  new Style({
+    stroke: new Stroke({width: 75, color: 'red'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 45, color: 'white'})
+  })
+]);
+smallLine3.getGeometry().translate(-1000, -1000);
+
+addPolygon(400, source2);
+addCircle(400, source2);
+source2.addFeature(smallLine3);
+
+const map = new Map({
+  layers: [
+    vectorLayer1,
+    vectorLayer2
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().setRotation(Math.PI + Math.PI / 4);
+
+render();