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

Replaces text.tests.js with new tests

Browse Source 
Transforms the old rendering tests for the TextStyle
to the new rendering test approach.
This commit is contained in:
Kai Volland
2019-03-15 10:31:41 +01:00
parent f79b358c92
commit d89b909187
31 changed files with 369 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rendering/cases/text-style-linestring-nice/expected.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

rendering/cases/text-style-linestring-nice/main.js
+130
View File
@@ -0,0 +1,130 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import Feature from '../../../src/ol/Feature.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import Text from '../../../src/ol/style/Text.js';
import Style from '../../../src/ol/style/Style.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 vectorSource = new VectorSource();
const nicePath = [
20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
];
const lineString1 = new LineString(nicePath, 'XY');
const feature1 = new Feature({geometry: lineString1});
feature1.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Hello world',
placement: 'line'
})
}));
vectorSource.addFeature(feature1);
const lineString2 = lineString1.clone();
lineString2.translate(0, 30);
const feature2 = new Feature({geometry: lineString2});
feature2.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Scale 2',
scale: 2,
textBaseline: 'bottom',
textAlign: 'right',
placement: 'line',
font: 'bold italic 0.8em serif'
})
}));
vectorSource.addFeature(feature2);
const lineString3 = lineString2.clone();
lineString3.translate(0, 30);
const feature3 = new Feature({geometry: lineString3});
feature3.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Set properties'
})
}));
feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
feature3.getStyle().getText().setTextAlign('left');
feature3.getStyle().getText().setOffsetX(10);
feature3.getStyle().getText().setOffsetY(-10);
feature3.getStyle().getText().setPlacement('line');
feature3.getStyle().getText().setScale(1.1);
feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'}));
feature3.getStyle().getText().setFill(new Fill({color: '#006772'}));
vectorSource.addFeature(feature3);
const lineString4 = lineString3.clone();
lineString4.translate(0, 30);
const feature4 = new Feature({geometry: lineString4});
feature4.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'negative offsetX',
offsetX: -10,
textAlign: 'start',
textBaseline: 'top',
placement: 'line'
})
}));
vectorSource.addFeature(feature4);
const lineString5 = lineString4.clone();
lineString5.translate(0, 30);
const feature5 = new Feature({geometry: lineString5});
feature5.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Small text',
offsetY: 5,
scale: 0.7,
textAlign: 'end',
placement: 'line'
})
}));
vectorSource.addFeature(feature5);
const lineString6 = lineString5.clone();
lineString6.translate(0, 30);
const feature6 = new Feature({geometry: lineString6});
feature6.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'FILL AND STROKE',
placement: 'line',
fill: new Fill({color: '#FFC0CB'}),
stroke: new Stroke({
color: '#00FF00',
width: 1
})
})
}));
vectorSource.addFeature(feature6);
const map = new Map({
pixelRatio: 1,
layers: [
new VectorLayer({
source: vectorSource
})
],
target: 'map',
view: new View({
center: [0, 0],
resolution: 1,
rotation: Math.PI / 4
})
});
map.getView().fit(vectorSource.getExtent());
render({tolerance: 0.02});
rendering/cases/text-style-linestring-ugly/expected.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

rendering/cases/text-style-linestring-ugly/main.js
+135
View File
@@ -0,0 +1,135 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import Feature from '../../../src/ol/Feature.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import Text from '../../../src/ol/style/Text.js';
import Style from '../../../src/ol/style/Style.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 vectorSource = new VectorSource();
const uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
const lineString1 = new LineString(uglyPath, 'XY');
const feature1 = new Feature({geometry: lineString1});
feature1.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Hello world',
placement: 'line',
overflow: true
})
}));
vectorSource.addFeature(feature1);
const lineString2 = lineString1.clone();
lineString2.translate(0, 30);
const feature2 = new Feature({geometry: lineString2});
feature2.setStyle(new Style({
stroke: new Stroke({color: 'red'}),
text: new Text({
text: 'Scale 2',
scale: 2,
textBaseline: 'bottom',
textAlign: 'right',
placement: 'line',
font: 'bold italic 0.8em serif',
overflow: true
})
}));
vectorSource.addFeature(feature2);
const lineString3 = lineString2.clone();
lineString3.translate(0, 30);
const feature3 = new Feature({geometry: lineString3});
feature3.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Set properties'
})
}));
feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
feature3.getStyle().getText().setTextAlign('left');
feature3.getStyle().getText().setOffsetX(10);
feature3.getStyle().getText().setOffsetY(-10);
feature3.getStyle().getText().setOverflow(true);
feature3.getStyle().getText().setPlacement('line');
feature3.getStyle().getText().setScale(1.2);
feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'}));
feature3.getStyle().getText().setFill(new Fill({color: '#006772'}));
feature3.getStyle().getText().setMaxAngle(Math.PI);
vectorSource.addFeature(feature3);
const lineString4 = lineString3.clone();
lineString4.translate(0, 30);
const feature4 = new Feature({geometry: lineString4});
feature4.setStyle(new Style({
stroke: new Stroke({color: 'red'}),
text: new Text({
text: 'PLEASE OMIT ME IM UGLY',
offsetX: -10,
textAlign: 'start',
textBaseline: 'top',
placement: 'line',
overflow: true
})
}));
vectorSource.addFeature(feature4);
const lineString5 = lineString4.clone();
lineString5.translate(0, 30);
const feature5 = new Feature({geometry: lineString5});
feature5.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Small text',
offsetY: 5,
scale: 0.7,
rotation: 4,
textAlign: 'end',
placement: 'line',
maxAngle: Math.PI,
overflow: true
})
}));
vectorSource.addFeature(feature5);
const lineString6 = lineString5.clone();
lineString6.translate(0, 30);
const feature6 = new Feature({geometry: lineString6});
feature6.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'FILL AND STROKE',
placement: 'line',
overflow: true,
fill: new Fill({color: '#FFC0CB'}),
stroke: new Stroke({
color: '#00FF00'
})
})
}));
vectorSource.addFeature(feature6);
const map = new Map({
pixelRatio: 1,
layers: [
new VectorLayer({
source: vectorSource
})
],
target: 'map',
view: new View({
center: [0, 0],
resolution: 1,
rotation: -(Math.PI / 4)
})
});
map.getView().fit(vectorSource.getExtent());
render({tolerance: 0.02});
rendering/cases/text-style-overlap/expected.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

rendering/cases/text-style-overlap/main.js
+104
View File
@@ -0,0 +1,104 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import Feature from '../../../src/ol/Feature.js';
import Point from '../../../src/ol/geom/Point.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import Text from '../../../src/ol/style/Text.js';
import Style from '../../../src/ol/style/Style.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 nicePath = [
20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
];
const vectorSource = new VectorSource();
const pointStyle = new Style({
text: new Text({
text: 'Point Label',
fill: new Fill({
color: 'red'
}),
stroke: new Stroke({
color: 'black'
})
})
});
const lineStyle = new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Line Label',
fill: new Fill({
color: 'red'
}),
stroke: new Stroke({
color: 'black'
}),
placement: 'line'
})
});
const pointFeature1 = new Feature({
geometry: new Point([160, 100])
});
pointFeature1.setStyle(pointStyle.clone());
pointFeature1.getStyle().getText().setText('POINT ONE');
vectorSource.addFeature(pointFeature1);
const pointFeature2 = new Feature({
geometry: new Point([170, 105])
});
pointFeature2.setStyle(pointStyle.clone());
pointFeature2.getStyle().getText().setText('POINT TWO');
pointFeature2.getStyle().getText().setFill(new Fill({color: 'green'}));
vectorSource.addFeature(pointFeature2);
const pointFeature3 = new Feature({
geometry: new Point([150, 95])
});
pointFeature3.setStyle(pointStyle.clone());
pointFeature3.getStyle().getText().setText('POINT THREE');
pointFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'}));
vectorSource.addFeature(pointFeature3);
const lineString1 = new LineString(nicePath, 'XY');
const lineFeature1 = new Feature({geometry: lineString1});
lineFeature1.setStyle(lineStyle);
lineFeature1.getStyle().getText().setText('LINE ONE');
vectorSource.addFeature(lineFeature1);
const lineString2 = lineString1.clone();
lineString2.translate(10, 10);
const lineFeature2 = new Feature({geometry: lineString2});
lineFeature2.setStyle(lineStyle.clone());
lineFeature2.getStyle().getText().setText('LINE TWO');
lineFeature2.getStyle().getText().setFill(new Fill({color: 'green'}));
vectorSource.addFeature(lineFeature2);
const lineString3 = lineString1.clone();
lineString3.translate(-10, 10);
const lineFeature3 = new Feature({geometry: lineString3});
lineFeature3.setStyle(lineStyle.clone());
lineFeature3.getStyle().getText().setText('LINE THREE');
lineFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'}));
vectorSource.addFeature(lineFeature3);
const map = new Map({
pixelRatio: 1,
layers: [
new VectorLayer({
source: vectorSource
})
],
target: 'map',
view: new View({
center: [0, 0],
resolution: 1
})
});
map.getView().fit(vectorSource.getExtent());
render({tolerance: 0.02});