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

Replaces remaining vectorimage.tests.js

Browse Source 
Transforms the old rendering tests for the VectorImageLayer
decluttering to the new rendering test approach.
This commit is contained in:
Kai Volland
2019-03-21 15:18:10 +01:00
parent 5665da6518
commit 681a8f1d9c
14 changed files with 104 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
rendering/cases/layer-vector-decluttering/expected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

7
rendering/cases/layer-vector-decluttering/main.js
View File

@@ -90,7 +90,7 @@ layer2.setStyle(function(feature) {
return new Style({
text: new Text({
text: feature.get('text'),
font: '12px "Ubuntu Regular", sans-serif'
font: '16px "Ubuntu Regular"'
})
});
});
@@ -119,7 +119,7 @@ layer3.setStyle(function(feature) {
}),
text: new Text({
text: feature.get('text'),
font: '12px "Ubuntu Regular", sans-serif',
font: '16px "Ubuntu Regular"',
textBaseline: 'bottom',
offsetY: -5
})
@@ -151,7 +151,8 @@ line.setStyle(new Style({
text: new Text({
placement: 'line',
text: 'east-west',
font: '12px "Ubuntu Regular", sans-serif'
font: '16px "Ubuntu Regular"',
overflow: true
})
}));
source4.addFeature(point);

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

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

@@ -0,0 +1,81 @@
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';
import CircleStyle from '../../../src/ol/style/Circle.js';
import Point from '../../../src/ol/geom/Point.js';
import LineString from '../../../src/ol/geom/LineString.js';
import Text from '../../../src/ol/style/Text.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 Regular"'
})
});
}
});
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 Regular"'
})
}));
source.addFeature(line);
const map = new Map({
layers: [
vectorLayer1
],
target: 'map',
view: new View({
center: center,
zoom: 13
})
});
map.getView().fit(source.getExtent());
render({tolerance: 0.005});

BIN
rendering/cases/text-style-linestring-nice/expected.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 22 KiB

14
rendering/cases/text-style-linestring-nice/main.js
View File

@@ -23,7 +23,7 @@ feature1.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Hello world',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
placement: 'line'
})
}));
@@ -40,7 +40,7 @@ feature2.setStyle(new Style({
textBaseline: 'bottom',
textAlign: 'right',
placement: 'line',
font: 'bold italic 0.8em "Ubuntu Regular", sans-serif'
font: 'bold italic 0.8em "Ubuntu Regular"'
})
}));
vectorSource.addFeature(feature2);
@@ -51,11 +51,11 @@ const feature3 = new Feature({geometry: lineString3});
feature3.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
text: 'Set properties'
})
}));
feature3.getStyle().getText().setFont('bold italic 1.2em "Ubuntu Regular", sans-serif');
feature3.getStyle().getText().setFont('bold italic 1.2em "Ubuntu Regular"');
feature3.getStyle().getText().setTextAlign('left');
feature3.getStyle().getText().setOffsetX(10);
feature3.getStyle().getText().setOffsetY(-10);
@@ -73,7 +73,7 @@ feature4.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'negative offsetX',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
offsetX: -10,
textAlign: 'start',
textBaseline: 'top',
@@ -89,7 +89,7 @@ feature5.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Small text',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
offsetY: 5,
scale: 0.7,
textAlign: 'end',
@@ -105,7 +105,7 @@ feature6.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'FILL AND STROKE',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
placement: 'line',
fill: new Fill({color: '#FFC0CB'}),
stroke: new Stroke({

10
rendering/cases/text-style-linestring-ugly/main.js
View File

@@ -20,7 +20,7 @@ feature1.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Hello world',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
placement: 'line',
overflow: true
})
@@ -38,7 +38,7 @@ feature2.setStyle(new Style({
textBaseline: 'bottom',
textAlign: 'right',
placement: 'line',
font: 'bold italic 0.8em "Ubuntu Regular", sans-serif',
font: 'bold italic 0.8em "Ubuntu Regular"',
overflow: true
})
}));
@@ -73,7 +73,7 @@ feature4.setStyle(new Style({
stroke: new Stroke({color: 'red'}),
text: new Text({
text: 'PLEASE OMIT ME IM UGLY',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
offsetX: -10,
textAlign: 'start',
textBaseline: 'top',
@@ -90,7 +90,7 @@ feature5.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Small text',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
offsetY: 5,
scale: 0.7,
rotation: 4,
@@ -109,7 +109,7 @@ feature6.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'FILL AND STROKE',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
placement: 'line',
overflow: true,
fill: new Fill({color: '#FFC0CB'}),

4
rendering/cases/text-style-overlap/main.js
View File

@@ -19,7 +19,7 @@ const vectorSource = new VectorSource();
const pointStyle = new Style({
text: new Text({
text: 'Point Label',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
fill: new Fill({
color: 'red'
}),
@@ -32,7 +32,7 @@ const lineStyle = new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Line Label',
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
fill: new Fill({
color: 'red'
}),

10
rendering/cases/text-style/main.js
View File

@@ -20,7 +20,7 @@ feature = new Feature({
feature.setStyle(new Style({
text: new Text({
text: 'hello',
font: '14px "Ubuntu Regular", sans-serif',
font: '14px "Ubuntu Regular"',
scale: 2,
fill: new Fill({
color: 'red'
@@ -39,7 +39,7 @@ feature = new Feature({
feature.setStyle(new Style({
text: new Text({
text: 'upside down',
font: '14px "Ubuntu Regular", sans-serif',
font: '14px "Ubuntu Regular"',
rotation: Math.PI,
stroke: new Stroke({
color: 'red',
@@ -55,7 +55,7 @@ feature = new Feature({
});
feature.setStyle(new Style({
text: new Text({
font: '"Ubuntu Regular", sans-serif',
font: '"Ubuntu Regular"',
text: 'rotateWithView',
rotateWithView: true,
stroke: new Stroke({
@@ -72,7 +72,7 @@ feature = new Feature({
feature.setStyle(new Style({
text: new Text({
text: 'hello',
font: '14px "Ubuntu Regular", sans-serif',
font: '14px "Ubuntu Regular"',
padding: [1, 2, 3, 5],
backgroundFill: new Fill({
color: 'rgba(55, 55, 55, 0.25)'
@@ -92,7 +92,7 @@ feature = new Feature({
feature.setStyle(new Style({
text: new Text({
text: 'hello',
font: '14px "Ubuntu Regular", sans-serif',
font: '14px "Ubuntu Regular"',
padding: [1, 2, 3, 5],
backgroundFill: new Fill({
color: 'rgba(55, 55, 55, 0.25)'

2
rendering/default/index.html
View File

@@ -20,7 +20,6 @@
font-family: "Ubuntu Regular";
src: url("/data/fonts/ubuntu-regular-webfont.eot");
src: url("/data/fonts/ubuntu-regular-webfont.woff") format("woff"),
url("/data/fonts/ubuntu-regular-webfont.otf") format("opentype"),
url("/data/fonts/ubuntu-regular-webfont.svg#filename") format("svg");
}
@font-face {
@@ -29,7 +28,6 @@
font-style: italic;
src: url("/data/fonts/ubuntu-bold-italic-webfont.eot");
src: url("/data/fonts/ubuntu-bold-italic-webfont.woff") format("woff"),
url("/data/fonts/ubuntu-bold-italic-webfont.otf") format("opentype"),
url("/data/fonts/ubuntu-bold-italic-webfont.svg#filename") format("svg");
}
</style>

BIN
test/rendering/ol/layer/expected/vector-canvas-declutter-image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
test/rendering/ol/layer/expected/vector-canvas-declutter-line.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 968 B

BIN
test/rendering/ol/layer/expected/vector-canvas-declutter.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

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

@@ -1,202 +0,0 @@
import Circle from '../../../../src/ol/geom/Circle.js';
import CircleStyle from '../../../../src/ol/style/Circle.js';
import Feature from '../../../../src/ol/Feature.js';
import Fill from '../../../../src/ol/style/Fill.js';
import LineString from '../../../../src/ol/geom/LineString.js';
import Map from '../../../../src/ol/Map.js';
import Point from '../../../../src/ol/geom/Point.js';
import Polygon from '../../../../src/ol/geom/Polygon.js';
import Stroke from '../../../../src/ol/style/Stroke.js';
import Style from '../../../../src/ol/style/Style.js';
import Text from '../../../../src/ol/style/Text.js';
import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js';
import VectorSource from '../../../../src/ol/source/Vector.js';
import View from '../../../../src/ol/View.js';
describe('ol.rendering.layer.VectorImage', function() {
const center = [1825927.7316762917, 6143091.089223046];
let map, source;
function createMap() {
source = new VectorSource();
map = new Map({
pixelRatio: 1,
target: createMapDiv(80, 80),
view: new View({
center: center,
zoom: 13
})
});
}
afterEach(function() {
if (map) {
disposeMap(map);
}
map = null;
});
function addCircle(r) {
source.addFeature(new Feature(new Circle(center, r)));
}
function addPolygon(r) {
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]
]
])));
}
it('unskips features correctly', function(done) {
createMap();
addCircle(500);
addPolygon(300);
map.skipFeature(source.getFeatures()[1]);
map.addLayer(new VectorImageLayer({
source: source,
style: new Style({
fill: new Fill({
color: 'rgba(255,0,0,0.5)'
}),
stroke: new Stroke({
width: 2,
color: 'black'
})
})
}));
map.renderSync();
map.unskipFeature(source.getFeatures()[1]);
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector.png',
IMAGE_TOLERANCE, done);
});
});
it('declutters text', function(done) {
createMap();
const layer = new VectorImageLayer({
declutter: true,
source: source
});
map.addLayer(layer);
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'
}));
layer.setStyle(function(feature) {
return new Style({
text: new Text({
text: feature.get('text'),
font: '12px sans-serif'
})
});
});
map.once('postrender', function() {
const 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 images', function(done) {
createMap();
const layer = new VectorImageLayer({
declutter: true,
source: source
});
map.addLayer(layer);
const centerFeature = new Feature({
geometry: new Point(center)
});
source.addFeature(centerFeature);
source.addFeature(new Feature({
geometry: new Point([center[0] - 540, center[1]])
}));
source.addFeature(new Feature({
geometry: new Point([center[0] + 540, center[1]])
}));
layer.setStyle(function(feature) {
return new Style({
image: new CircleStyle({
radius: 15,
stroke: new Stroke({
color: 'blue'
})
})
});
});
map.once('postrender', function() {
const 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 text along lines and images', function(done) {
createMap();
const layer = new VectorImageLayer({
declutter: true,
source: source
});
map.addLayer(layer);
const point = new Feature(new Point(center));
point.setStyle(new Style({
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({
stroke: new Stroke({
color: '#CCC',
width: 12
}),
text: new Text({
placement: 'line',
text: 'east-west',
font: '12px sans-serif'
})
}));
source.addFeature(point);
source.addFeature(line);
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-line.png',
IMAGE_TOLERANCE, done);
});
});
});