Replaces text.tests.js with new tests
Transforms the old rendering tests for the TextStyle to the new rendering test approach.
This commit is contained in:
135
rendering/cases/text-style-linestring-ugly/main.js
Normal file
135
rendering/cases/text-style-linestring-ugly/main.js
Normal 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});
|
||||
Reference in New Issue
Block a user