ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replaces vectorimage.tests.js (partially)

Browse Source 
Transforms the old rendering tests for the VectorImageLayer
to the new rendering test approach.
The declutter tests are kept in the old format for know.
This commit is contained in:
Kai Volland
2019-03-18 16:59:33 +01:00
parent ac3a2d960a
commit 7510a19c73
4 changed files with 110 additions and 9254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9169
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

BIN
rendering/cases/layer-vectorimage/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

110
rendering/cases/layer-vectorimage/main.js Normal file
View File

@@ -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 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';
import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
const center = [1825927.7316762917, 6143091.089223046];
const source1 = new VectorSource();
const source2 = new VectorSource();
const vectorLayer1 = new VectorImageLayer({
source: source1,
style: new Style({
stroke: new Stroke({
color: '#3399CC',
width: 1.25
})
})
});
const vectorLayer2 = new VectorImageLayer({
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(1000, 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({tolerance: 0.005});

85
test/rendering/ol/layer/vectorimage.test.js
View File

@@ -53,91 +53,6 @@ describe('ol.rendering.layer.VectorImage', function() {
])));
}
it('renders opacity correctly', function(done) {
createMap();
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'})
}));
source.addFeature(smallLine);
addPolygon(100);
addCircle(200);
addPolygon(250);
addCircle(500);
addPolygon(600);
addPolygon(720);
map.addLayer(new VectorImageLayer({
source: source
}));
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas.png',
17, done);
});
});
it('renders transparent layers correctly', function(done) {
createMap();
const smallLine = new Feature(new LineString([
[center[0], center[1] - 1],
[center[0], center[1] + 1]
]));
smallLine.setStyle([
new Style({
stroke: new Stroke({width: 75, color: 'red'})
}),
new Style({
stroke: new Stroke({width: 45, color: 'white'})
})
]);
source.addFeature(smallLine);
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'})
})
]);
source.addFeature(smallLine2);
map.addLayer(new VectorImageLayer({
source: source,
opacity: 0.5
}));
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-transparent.png',
7, done);
});
});
it('renders rotation correctly', function(done) {
createMap();
map.getView().setRotation(Math.PI + Math.PI / 4);
addPolygon(300);
addCircle(500);
map.addLayer(new VectorImageLayer({
source: source,
style: new Style({
stroke: new Stroke({
width: 2,
color: 'black'
})
})
}));
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-rotated.png',
2.9, done);
});
});
it('unskips features correctly', function(done) {
createMap();
addCircle(500);