From 1142caf5e847e657d81b2a52056e074379a386d8 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Sun, 5 May 2019 14:31:01 +0200 Subject: [PATCH] Modify render tests to catch regressions --- .../layer-vector-decluttering/expected.png | Bin 5898 -> 6393 bytes .../cases/layer-vector-decluttering/main.js | 29 ++- .../expected.png | Bin 6107 -> 6192 bytes .../layer-vectorimage-decluttering/main.js | 212 +++++++++++++----- 4 files changed, 167 insertions(+), 74 deletions(-) diff --git a/rendering/cases/layer-vector-decluttering/expected.png b/rendering/cases/layer-vector-decluttering/expected.png index 7c067a94893b0cf31a426fff1a626860e5cfcf28..f81cac79e07124739b423c5d84fbb7b7a5ea0409 100644 GIT binary patch literal 6393 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 literal 5898 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 C8ze^n diff --git a/rendering/cases/layer-vector-decluttering/main.js b/rendering/cases/layer-vector-decluttering/main.js index 65e809b1e8..1af3a6f395 100644 --- a/rendering/cases/layer-vector-decluttering/main.js +++ b/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}); diff --git a/rendering/cases/layer-vectorimage-decluttering/expected.png b/rendering/cases/layer-vectorimage-decluttering/expected.png index 5c3a16c967d3ca5c623178d24cb83a7aec17fc6d..7b907f8ba89832a669c27a16d7830126036e7af1 100644 GIT binary patch literal 6192 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 diff --git a/rendering/cases/layer-vectorimage-decluttering/main.js b/rendering/cases/layer-vectorimage-decluttering/main.js index 05cb3406c0..43d45ff972 100644 --- a/rendering/cases/layer-vectorimage-decluttering/main.js +++ b/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]; - -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); - +let center = [1825927.7316762917, 6143091.089223046]; 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});