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

Merge pull request #9333 from KaiVolland/unify-rendering-tests

Browse Source 
Unify rendering tests
This commit is contained in:
Tim Schaub
2019-03-20 08:34:54 -07:00
committed by GitHub
parent ad5c9ac589 7510a19c73
commit c4279ff665
107 changed files with 1588 additions and 2413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

28
rendering/cases/layer-image/main.js Normal file
View File

@@ -0,0 +1,28 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import Static from '../../../src/ol/source/ImageStatic.js';
import {
get as getProjection,
transform,
transformExtent
} from '../../../src/ol/proj';
import ImageLayer from '../../../src/ol/layer/Image.js';
const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
new Map({
pixelRatio: 1,
target: 'map',
layers: [new ImageLayer({
source: new Static({
url: '/data/tiles/osm/5/5/12.png',
imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
projection: getProjection('EPSG:3857')
})
})],
view: new View({
center,
zoom: 8
})
});
render();

BIN
rendering/cases/layer-tile-none-square/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

30
rendering/cases/layer-tile-none-square/main.js Normal file
View File

@@ -0,0 +1,30 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import TileLayer from '../../../src/ol/layer/Tile.js';
import XYZ from '../../../src/ol/source/XYZ';
import {createXYZ} from '../../../src/ol/tilegrid.js';
const center = [-10997148, 4569099];
const layer = new TileLayer({
source: new XYZ({
url: '/data/tiles/512x256/{z}/{x}/{y}.png',
tileGrid: createXYZ({
tileSize: [512, 256]
}),
transition: 0
})
});
const map = new Map({
target: 'map',
pixelRatio: 1,
view: new View({
center: center,
zoom: 5
})
});
map.addLayer(layer);
render();

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

26
rendering/cases/layer-tile-opacity/main.js Normal file
View File

@@ -0,0 +1,26 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import TileLayer from '../../../src/ol/layer/Tile.js';
import {fromLonLat} from '../../../src/ol/proj';
import XYZ from '../../../src/ol/source/XYZ';
const center = fromLonLat([8.6, 50.1]);
new Map({
layers: [
new TileLayer({
source: new XYZ({
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
transition: 0
}),
opacity: 0.2
})
],
target: 'map',
view: new View({
center: center,
zoom: 3
})
});
render();

BIN
rendering/cases/layer-tile-two-layers/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

35
rendering/cases/layer-tile-two-layers/main.js Normal file
View File

@@ -0,0 +1,35 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import TileLayer from '../../../src/ol/layer/Tile.js';
import {fromLonLat} from '../../../src/ol/proj';
import XYZ from '../../../src/ol/source/XYZ';
const center = fromLonLat([8.6, 50.1]);
const layer1 = new TileLayer({
source: new XYZ({
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
transition: 0
}),
opacity: 0.2
});
const layer2 = new TileLayer({
source: new XYZ({
url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
transition: 0
})
});
const map = new Map({
pixelRatio: 1,
layers: [layer1, layer2],
target: 'map',
view: new View({
center: center,
zoom: 3
})
});
map.getView().setRotation(Math.PI / 2);
render();

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

161
rendering/cases/layer-vector-decluttering/main.js Normal file
View File

@@ -0,0 +1,161 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import Feature from '../../../src/ol/Feature.js';
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 Stroke from '../../../src/ol/style/Stroke.js';
import LineString from '../../../src/ol/geom/LineString.js';
let center = [1825927.7316762917, 6143091.089223046];
const map = new Map({
pixelRatio: 1,
target: 'map',
view: new View({
center: center,
zoom: 13
})
});
const source1 = new VectorSource();
const layer1 = new VectorLayer({
declutter: true,
source: source1
});
const source2 = new VectorSource();
const layer2 = new VectorLayer({
declutter: true,
source: source2
});
const source3 = new VectorSource();
const layer3 = new VectorLayer({
declutter: true,
source: source3
});
const source4 = new VectorSource();
const layer4 = new VectorLayer({
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({
image: new CircleStyle({
radius: 15,
stroke: new Stroke({
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({
text: new Text({
text: feature.get('text'),
font: '12px sans-serif'
})
});
});
map.addLayer(layer2);
center = [center[0] + 500, center[1] + 500];
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: 5,
stroke: new Stroke({
color: 'red'
})
}),
text: new Text({
text: feature.get('text'),
font: '12px sans-serif',
textBaseline: 'bottom',
offsetY: -5
})
});
});
map.addLayer(layer3);
center = [center[0] - 2000, center[1] - 2000];
const point = new Feature(new Point(center));
point.setStyle(new Style({
zIndex: 2,
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({
zIndex: 1,
stroke: new Stroke({
color: '#CCC',
width: 12
}),
text: new Text({
placement: 'line',
text: 'east-west',
font: '12px sans-serif'
})
}));
source4.addFeature(point);
source4.addFeature(line);
map.addLayer(layer4);
render({tolerance: 0.02});

BIN
rendering/cases/layer-vector-polygon-partial/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 935 B

54
rendering/cases/layer-vector-polygon-partial/main.js Normal file
View File

@@ -0,0 +1,54 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import Feature from '../../../src/ol/Feature.js';
import Polygon from '../../../src/ol/geom/Polygon.js';
import Style from '../../../src/ol/style/Style.js';
import Stroke from '../../../src/ol/style/Stroke.js';
import Fill from '../../../src/ol/style/Fill.js';
const src = new VectorSource({
features: [
new Feature(new Polygon([[
[-22, 18],
[-22, 78],
[-9, 78],
[-9, 18],
[-22, 18]
]])),
new Feature(new Polygon([[
[-9, 18],
[-9, 78],
[4, 78],
[4, 18],
[-9, 18]
]]))
]
});
const layer = new VectorLayer({
renderBuffer: 0,
source: src,
style: new Style({
stroke: new Stroke({
color: [0, 0, 0, 1],
width: 2
}),
fill: new Fill({
color: [255, 0, 0, 1]
})
})
});
const view = new View({
center: [-9.5, 78],
zoom: 2,
projection: 'EPSG:4326'
});
new Map({
pixelRatio: 1,
layers: [layer],
target: 'map',
view: view
});
render();

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

43
rendering/cases/layer-vector-polygon/main.js Normal file
View File

@@ -0,0 +1,43 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import Feature from '../../../src/ol/Feature.js';
import Polygon from '../../../src/ol/geom/Polygon.js';
import Style from '../../../src/ol/style/Style.js';
import Fill from '../../../src/ol/style/Fill.js';
const feature = new Feature({
geometry: new Polygon([
[[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]],
[[0, 60], [-17.6336, 24.2705], [-57.0634, 18.5410], [-28.5317, -9.2705], [-35.2671, -48.5410], [0, -30], [35.2671, -48.5410], [28.5317, -9.2705], [57.0634, 18.5410], [17.6336, 24.2705], [0, 60]]
])
});
const src = new VectorSource({
features: [
feature
]
});
const layer = new VectorLayer({
renderBuffer: 0,
source: src,
style: new Style({
fill: new Fill({
color: 'blue'
})
})
});
const view = new View({
center: [0, 0],
zoom: 1,
projection: 'EPSG:4326'
});
new Map({
pixelRatio: 1,
layers: [layer],
target: 'map',
view: view
});
render();

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

110
rendering/cases/layer-vector/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 VectorLayer from '../../../src/ol/layer/Vector.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';
const center = [1825927.7316762917, 6143091.089223046];
const source1 = new VectorSource();
const source2 = new VectorSource();
const vectorLayer1 = new VectorLayer({
source: source1,
style: new Style({
stroke: new Stroke({
color: '#3399CC',
width: 1.25
})
})
});
const vectorLayer2 = new VectorLayer({
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(400, 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();

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});

BIN
rendering/cases/layer-vectortile-rotate-hidpi/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

31
rendering/cases/layer-vectortile-rotate-hidpi/main.js Normal file
View File

@@ -0,0 +1,31 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorTileSource from '../../../src/ol/source/VectorTile';
import MVT from '../../../src/ol/format/MVT';
import {createXYZ} from '../../../src/ol/tilegrid';
import VectorTileLayer from '../../../src/ol/layer/VectorTile';
const map = new Map({
pixelRatio: 2,
layers: [
new VectorTileLayer({
source: new VectorTileSource({
format: new MVT(),
tileGrid: createXYZ(),
url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
transition: 0
})
})
],
target: 'map',
view: new View({
center: [1825927.7316762917, 6143091.089223046],
zoom: 14
})
});
map.getView().setRotation(Math.PI / 4);
render({
message: 'Vector tile layer rotates (hidip)',
tolerance: 0.01
});

BIN
rendering/cases/map-pan/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

28
rendering/cases/map-pan/main.js Normal file
View File

@@ -0,0 +1,28 @@
import Feature from '../../../src/ol/Feature.js';
import Point from '../../../src/ol/geom/Point.js';
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
const map = new Map({
pixelRatio: 1,
target: 'map',
layers: [
new VectorLayer({
source: new VectorSource({
features: [new Feature({
geometry: new Point([0, 0])
})]
})
})
],
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
resolution: 1
})
});
map.getView().setCenter([10, 10]);
render();

BIN
rendering/cases/map/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

27
rendering/cases/map/main.js Normal file
View File

@@ -0,0 +1,27 @@
import Feature from '../../../src/ol/Feature.js';
import Point from '../../../src/ol/geom/Point.js';
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
new Map({
pixelRatio: 1,
target: 'map',
layers: [
new VectorLayer({
source: new VectorSource({
features: [new Feature({
geometry: new Point([0, 0])
})]
})
})
],
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
resolution: 1
})
});
render();

BIN
rendering/cases/multipoint-style/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

169
rendering/cases/multipoint-style/main.js Normal file
View File

@@ -0,0 +1,169 @@
import Feature from '../../../src/ol/Feature.js';
import MultiPoint from '../../../src/ol/geom/MultiPoint.js';
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import CircleStyle from '../../../src/ol/style/Circle.js';
import Fill from '../../../src/ol/style/Fill.js';
import Style from '../../../src/ol/style/Style.js';
import Stroke from '../../../src/ol/style/Stroke.js';
const vectorSource = new VectorSource();
let feature;
feature = new Feature({
geometry: new MultiPoint([[-20, 18]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
fill: new Fill({
color: '#91E339'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new MultiPoint([[-10, 18]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: '#5447E6'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new MultiPoint([[4, 18]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: '#92A8A6'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new MultiPoint([[-20, 3]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
fill: new Fill({
color: '#91E339'
}),
stroke: new Stroke({
color: '#000000',
width: 1
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new MultiPoint([[-10, 3]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: '#5447E6'
}),
stroke: new Stroke({
color: '#000000',
width: 2
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new MultiPoint([[4, 3]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: '#92A8A6'
}),
stroke: new Stroke({
color: '#000000',
width: 3
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new MultiPoint([[-20, -15]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
stroke: new Stroke({
color: '#256308',
width: 1
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new MultiPoint([[-10, -15]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: 'rgba(0, 0, 255, 0.3)'
}),
stroke: new Stroke({
color: '#256308',
width: 2
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new MultiPoint([[4, -15]])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: 'rgba(235, 45, 70, 0.6)'
}),
stroke: new Stroke({
color: '#256308',
width: 3
})
})
}));
vectorSource.addFeature(feature);
const vectorLayer = new VectorLayer({
source: vectorSource
});
new Map({
layers: [
vectorLayer
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 1
})
});
render();

BIN
rendering/cases/point-style/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

169
rendering/cases/point-style/main.js Normal file
View File

@@ -0,0 +1,169 @@
import Feature from '../../../src/ol/Feature.js';
import Point from '../../../src/ol/geom/Point.js';
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import CircleStyle from '../../../src/ol/style/Circle.js';
import Fill from '../../../src/ol/style/Fill.js';
import Style from '../../../src/ol/style/Style.js';
import Stroke from '../../../src/ol/style/Stroke.js';
const vectorSource = new VectorSource();
let feature;
feature = new Feature({
geometry: new Point([-20, 18])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
fill: new Fill({
color: '#91E339'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([-10, 18])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: '#5447E6'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([4, 18])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: '#92A8A6'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([-20, 3])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
fill: new Fill({
color: '#91E339'
}),
stroke: new Stroke({
color: '#000000',
width: 1
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([-10, 3])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: '#5447E6'
}),
stroke: new Stroke({
color: '#000000',
width: 2
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([4, 3])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: '#92A8A6'
}),
stroke: new Stroke({
color: '#000000',
width: 3
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([-20, -15])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
stroke: new Stroke({
color: '#256308',
width: 1
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([-10, -15])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: 'rgba(0, 0, 255, 0.3)'
}),
stroke: new Stroke({
color: '#256308',
width: 2
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([4, -15])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: 'rgba(235, 45, 70, 0.6)'
}),
stroke: new Stroke({
color: '#256308',
width: 3
})
})
}));
vectorSource.addFeature(feature);
const vectorLayer = new VectorLayer({
source: vectorSource
});
new Map({
layers: [
vectorLayer
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 1
})
});
render();

BIN
rendering/cases/regularshape-style/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

114
rendering/cases/regularshape-style/main.js Normal file
View File

@@ -0,0 +1,114 @@
import Feature from '../../../src/ol/Feature.js';
import Point from '../../../src/ol/geom/Point.js';
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
import Fill from '../../../src/ol/style/Fill.js';
import RegularShape from '../../../src/ol/style/RegularShape.js';
import Style from '../../../src/ol/style/Style.js';
import Stroke from '../../../src/ol/style/Stroke.js';
const vectorSource = new VectorSource();
function createFeatures(stroke, fill, offSet = [0, 0]) {
let feature;
feature = new Feature({
geometry: new Point([-15 + offSet[0], 15 + offSet[1]])
});
// square
feature.setStyle(new Style({
image: new RegularShape({
fill: fill,
stroke: stroke,
points: 4,
radius: 10,
angle: Math.PI / 4
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([8 + offSet[0], 15 + offSet[1]])
});
// triangle
feature.setStyle(new Style({
image: new RegularShape({
fill: fill,
stroke: stroke,
points: 3,
radius: 10,
rotation: Math.PI / 4,
angle: 0
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([-10 + offSet[0], -8 + offSet[1]])
});
// star
feature.setStyle(new Style({
image: new RegularShape({
fill: fill,
stroke: stroke,
points: 5,
radius: 10,
radius2: 4,
angle: 0
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: new Point([12 + offSet[0], -8 + offSet[1]])
});
// cross
feature.setStyle(new Style({
image: new RegularShape({
fill: fill,
stroke: stroke,
points: 4,
radius: 10,
radius2: 0,
angle: 0
})
}));
vectorSource.addFeature(feature);
}
createFeatures(
new Stroke({width: 2}),
new Fill({color: 'red'})
);
createFeatures(
new Stroke({
lineDash: [10, 5]
}),
null,
[50, 50]
);
createFeatures(
new Stroke({
lineDash: [10, 5],
lineDashOffset: 5
}),
null,
[-50, -50]
);
createFeatures(new Stroke(), new Fill(), [50, -50]);
const vectorLayer = new VectorLayer({
source: vectorSource
});
new Map({
target: 'map',
layers: [vectorLayer],
view: new View({
center: [0, 0],
resolution: 1
})
});
render();

BIN
rendering/cases/source-raster/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

32
rendering/cases/source-raster/main.js Normal file
View File

@@ -0,0 +1,32 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import ImageLayer from '../../../src/ol/layer/Image.js';
import RasterSource from '../../../src/ol/source/Raster.js';
import XYZ from '../../../src/ol/source/XYZ.js';
const raster = new RasterSource({
sources: [new XYZ({
url: '/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
})],
threads: 0, // Avoid using workers to work with puppeteer
operation: function(pixels) {
const pixel = pixels[0];
const red = pixel[0];
pixel[0] = pixel[2];
pixel[2] = red;
return pixel;
}
});
new Map({
layers: [new ImageLayer({source: raster})],
target: 'map',
view: new View({
center: [0, 0],
zoom: 0
})
});
render();

BIN
rendering/cases/source-tilewms-gutter0/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

26
rendering/cases/source-tilewms-gutter0/main.js Normal file
View File

@@ -0,0 +1,26 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import TileLayer from '../../../src/ol/layer/Tile.js';
import TileWMS from '../../../src/ol/source/TileWMS.js';
const tileWms = new TileWMS({
params: {
'LAYERS': 'layer'
},
gutter: 0,
url: '/data/tiles/wms/wms0.png',
transition: 0
});
new Map({
pixelRatio: 1,
layers: [new TileLayer({source: tileWms})],
target: 'map',
view: new View({
center: [0, 0],
zoom: 5
})
});
render();

BIN
rendering/cases/source-tilewms-gutter20/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

26
rendering/cases/source-tilewms-gutter20/main.js Normal file
View File

@@ -0,0 +1,26 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import TileLayer from '../../../src/ol/layer/Tile.js';
import TileWMS from '../../../src/ol/source/TileWMS.js';
const tileWms = new TileWMS({
params: {
'LAYERS': 'layer'
},
gutter: 20,
url: '/data/tiles/wms/wms20.png',
transition: 0
});
new Map({
pixelRatio: 1,
layers: [new TileLayer({source: tileWms})],
target: 'map',
view: new View({
center: [0, 0],
zoom: 5
})
});
render();

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

130
rendering/cases/text-style-linestring-nice/main.js Normal file
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});

BIN
rendering/cases/text-style-linestring-ugly/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

135
rendering/cases/text-style-linestring-ugly/main.js Normal file
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});

BIN
rendering/cases/text-style-overlap/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

104
rendering/cases/text-style-overlap/main.js Normal file
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});

BIN
rendering/data/tiles/512x256/5/3/12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
rendering/data/tiles/osm/0/0/0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
rendering/data/tiles/osm/5/4/12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
rendering/data/tiles/osm/5/5/12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
rendering/data/tiles/osm/5/5/13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
rendering/data/tiles/osm/5/6/12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
rendering/data/tiles/osm/5/6/13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
rendering/data/tiles/wms/wms0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
rendering/data/tiles/wms/wms20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
test/rendering/ol/expected/pan-canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 635 B

BIN
test/rendering/ol/expected/render-canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 637 B

106
test/rendering/ol/layer/image.test.js
View File

@@ -1,106 +0,0 @@
import Map from '../../../../src/ol/Map.js';
import View from '../../../../src/ol/View.js';
import ImageLayer from '../../../../src/ol/layer/Image.js';
import {assign} from '../../../../src/ol/obj.js';
import {get as getProjection, transform, transformExtent} from '../../../../src/ol/proj.js';
import Static from '../../../../src/ol/source/ImageStatic.js';
import {createXYZ} from '../../../../src/ol/tilegrid.js';
describe('ol.rendering.layer.Image', function() {
let map;
function createMap(renderer) {
const MapConstructor = Map;
map = new MapConstructor({
pixelRatio: 1,
target: createMapDiv(50, 50),
view: new View({
center: transform(
[-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
zoom: 5
})
});
}
afterEach(function() {
if (map) {
disposeMap(map);
}
map = null;
});
function waitForImages(renderer, sources, layerOptions, onImagesLoaded) {
const LayerConstructor = ImageLayer;
let imagesLoading = 0;
let imagesLoaded = 0;
const update = function() {
if (imagesLoading === imagesLoaded) {
onImagesLoaded();
}
};
sources.forEach(function(source) {
source.on('imageloadstart', function(event) {
imagesLoading++;
});
source.on('imageloadend', function(event) {
imagesLoaded++;
update();
});
source.on('imageloaderror', function(event) {
expect().fail('Image failed to load');
});
const options = {
source: source
};
assign(options, layerOptions);
map.addLayer(new LayerConstructor(options));
});
}
describe('single image layer', function() {
let source;
beforeEach(function() {
source = new Static({
url: 'rendering/ol/data/tiles/osm/5/5/12.png',
imageExtent: createXYZ().getTileCoordExtent(
[5, 5, -12 - 1]),
projection: getProjection('EPSG:3857')
});
});
it('tests the canvas renderer', function(done) {
createMap('canvas');
waitForImages('canvas', [source], {}, function() {
expectResemble(map, 'rendering/ol/layer/expected/image-canvas.png',
IMAGE_TOLERANCE, done);
});
});
});
describe('single image layer - scaled', function() {
let source;
beforeEach(function() {
source = new Static({
url: 'rendering/ol/data/tiles/osm/5/5/12.png',
imageExtent: transformExtent(
[-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857')
});
});
it('renders correctly', function(done) {
createMap('canvas');
waitForImages('canvas', [source], {}, function() {
expectResemble(map, 'rendering/ol/layer/expected/image-scaled.png',
IMAGE_TOLERANCE, done);
});
});
});
});

138
test/rendering/ol/layer/tile.test.js
View File

@@ -1,17 +1,13 @@
import Map from '../../../../src/ol/Map.js';
import View from '../../../../src/ol/View.js';
import {getSize} from '../../../../src/ol/extent.js';
import Point from '../../../../src/ol/geom/Point.js';
import TileLayer from '../../../../src/ol/layer/Tile.js';
import {assign} from '../../../../src/ol/obj.js';
import {transform} from '../../../../src/ol/proj.js';
import TileImage from '../../../../src/ol/source/TileImage.js';
import XYZ from '../../../../src/ol/source/XYZ.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 {createXYZ} from '../../../../src/ol/tilegrid.js';
describe('ol.rendering.layer.Tile', function() {
@@ -71,140 +67,6 @@ describe('ol.rendering.layer.Tile', function() {
});
}
describe('with tile transition', function() {
it('renders correctly after the transition', function(done) {
createMap('canvas');
const source = new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
});
waitForTiles('canvas', [source], {}, function() {
setTimeout(function() {
expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
IMAGE_TOLERANCE, done);
}, 500);
});
});
});
describe('single tile layer', function() {
let source;
beforeEach(function() {
source = new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
});
it('tests the canvas renderer', function(done) {
createMap('canvas');
waitForTiles('canvas', [source], {}, function() {
expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
IMAGE_TOLERANCE, done);
});
});
});
describe('two tile layers', function() {
let source1, source2;
beforeEach(function() {
source1 = new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
source2 = new XYZ({
url: 'rendering/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png',
transition: 0
});
});
function centerExtent(map) {
const c = map.getView().calculateExtent(map.getSize());
const qw = getSize(c)[0] / 4;
const qh = getSize(c)[1] / 4;
return [c[0] + qw, c[1] + qh, c[2] - qw, c[3] - qh];
}
it('tests canvas layer extent clipping with rotation', function(done) {
createMap('canvas');
map.getView().setRotation(Math.PI / 2);
waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() {
expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-rotate.png',
IMAGE_TOLERANCE, done);
});
});
it('tests canvas layer extent clipping (HiDPI)', function(done) {
createMap('canvas', undefined, undefined, 2);
waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() {
expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-hidpi.png',
IMAGE_TOLERANCE, done);
});
});
it('tests canvas layer extent clipping with rotation (HiDPI)', function(done) {
createMap('canvas', undefined, undefined, 2);
map.getView().setRotation(Math.PI / 2);
waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() {
expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-rotate-hidpi.png',
IMAGE_TOLERANCE, done);
});
});
});
describe('tile layer with opacity', function() {
let source;
beforeEach(function() {
source = new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
});
it('tests the canvas renderer', function(done) {
createMap('canvas');
waitForTiles('canvas', [source], {opacity: 0.2}, function() {
expectResemble(map, 'rendering/ol/layer/expected/opacity-canvas.png',
IMAGE_TOLERANCE, done);
});
});
});
describe('tile layer with non-square tiles', function() {
function createSource(tileSize) {
return new TileImage({
url: 'rendering/ol/data/tiles/' + tileSize + '/{z}/{x}/{y}.png',
tileGrid: createXYZ({
tileSize: tileSize.split('x')
}),
transition: 0
});
}
it('512x256 renders correcly using the canvas renderer', function(done) {
const source = createSource('512x256');
createMap('canvas', [-10997148, 4569099]);
waitForTiles('canvas', [source], {}, function() {
expectResemble(map, 'rendering/ol/layer/expected/512x256-canvas.png',
IMAGE_TOLERANCE, done);
});
});
it('192x256 renders correcly using the canvas renderer', function(done) {
const source = createSource('192x256');
createMap('canvas', [-11271098, 3747248], [100, 100], undefined,
source.getTileGrid().getResolutions());
waitForTiles('canvas', [source], {}, function() {
expectResemble(map, 'rendering/ol/layer/expected/192x256-canvas.png',
IMAGE_TOLERANCE, done);
});
});
});
describe('tile layer with render listener', function() {
let source, onAddLayer;

762
test/rendering/ol/layer/vector.test.js
View File

@@ -1,762 +0,0 @@
import Feature from '../../../../src/ol/Feature.js';
import Map from '../../../../src/ol/Map.js';
import View from '../../../../src/ol/View.js';
import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
import Circle from '../../../../src/ol/geom/Circle.js';
import LineString from '../../../../src/ol/geom/LineString.js';
import Point from '../../../../src/ol/geom/Point.js';
import Polygon from '../../../../src/ol/geom/Polygon.js';
import VectorLayer from '../../../../src/ol/layer/Vector.js';
import VectorSource from '../../../../src/ol/source/Vector.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 Style from '../../../../src/ol/style/Style.js';
import Text from '../../../../src/ol/style/Text.js';
describe('ol.rendering.layer.Vector', function() {
const center = [1825927.7316762917, 6143091.089223046];
let map;
function createMap() {
map = new Map({
pixelRatio: 1,
target: createMapDiv(80, 80),
view: new View({
center: center,
zoom: 13
})
});
}
afterEach(function() {
if (map) {
disposeMap(map);
}
map = null;
});
let source;
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]
]
])));
}
function addLineString(r) {
source.addFeature(new Feature(new LineString([
[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]
])));
}
describe('vector layer', function() {
beforeEach(function() {
source = new VectorSource();
});
it('renders opacity correctly with the canvas renderer', 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 VectorLayer({
source: source
}));
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas.png',
17, done);
});
});
it('renders transparent layers correctly with the canvas renderer', 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 VectorLayer({
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 with the canvas renderer', function(done) {
createMap();
map.getView().setRotation(Math.PI + Math.PI / 4);
addPolygon(300);
addCircle(500);
map.addLayer(new VectorLayer({
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',
1.7, done);
});
});
it('renders fill/stroke batches correctly with the canvas renderer', function(done) {
createMap();
source = new VectorSource({
overlaps: false
});
addPolygon(100);
addCircle(200);
addPolygon(250);
addCircle(500);
addPolygon(600);
addPolygon(720);
map.addLayer(new VectorLayer({
source: source,
style: new Style({
stroke: new Stroke({
color: '#3399CC',
width: 1.25
})
})
}));
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-opaque.png',
24.34, done);
});
});
it('renders stroke batches correctly with the canvas renderer', function(done) {
createMap();
source = new VectorSource({
overlaps: false
});
addLineString(100);
addLineString(250);
addLineString(600);
addLineString(720);
map.addLayer(new VectorLayer({
source: source,
style: new Style({
stroke: new Stroke({
color: '#3399CC',
width: 1.25
})
})
}));
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-stroke.png',
7, done);
});
});
it('interrupts fill/stroke batches correctly with the canvas renderer', function(done) {
createMap();
let color;
function createSource(overlaps) {
color = '#3399CC';
source = new VectorSource({
overlaps: overlaps
});
addPolygon(720);
addPolygon(600);
addCircle(500);
addPolygon(250);
addCircle(200);
addPolygon(100);
return source;
}
function alternateColor() {
if (color == '#3399CC') {
color = '#CC9933';
} else {
color = '#3399CC';
}
return color;
}
const layer = new VectorLayer({
source: createSource(true),
style: function(feature) {
alternateColor();
return new Style({
stroke: new Stroke({
color: alternateColor(),
width: 1.25
}),
fill: new Fill({
color: alternateColor()
})
});
}
});
map.addLayer(layer);
map.once('postrender', function() {
const canvas = map.getRenderer().canvas_;
// take a snapshot of this `overlaps: true` image
const referenceImage = canvas.toDataURL('image/png');
// now render the same with `overlaps: false`
layer.setSource(createSource(false));
// result should be the same as with `overlaps: true`
map.once('postrender', function(e) {
expectResemble(map, referenceImage, 1e-9, done);
});
});
});
it('interrupts stroke batches correctly with the canvas renderer', function(done) {
createMap();
let color;
function createSource(overlaps) {
color = '#3399CC';
source = new VectorSource({
overlaps: overlaps
});
addLineString(720);
addLineString(600);
addLineString(250);
addLineString(100);
return source;
}
function alternateColor() {
if (color == '#3399CC') {
color = '#CC9933';
} else {
color = '#3399CC';
}
return color;
}
const layer = new VectorLayer({
source: createSource(true),
style: function(feature) {
alternateColor();
return new Style({
stroke: new Stroke({
color: alternateColor(),
width: 1.25
}),
fill: new Fill({
color: alternateColor()
})
});
}
});
map.addLayer(layer);
map.once('postrender', function() {
const canvas = map.getRenderer().canvas_;
// take a snapshot of this `overlaps: true` image
const referenceImage = canvas.toDataURL('image/png');
// now render the same with `overlaps: false`
layer.setSource(createSource(false));
// result should be exactly the same as with `overlaps: true`
map.once('postrender', function() {
expectResemble(map, referenceImage, 1e-9, done);
});
});
});
});
describe('polygon rendering', function() {
let map2;
beforeEach(function() {
map2 = new Map({
pixelRatio: 1,
target: createMapDiv(128, 128),
view: new View({
center: [0, 0],
zoom: 0
})
});
});
afterEach(function() {
disposeMap(map2);
map2 = null;
});
it('renders a feature that spans the world', function(done) {
const json = {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]
],
[
[0, 60], [-17.6336, 24.2705], [-57.0634, 18.5410], [-28.5317, -9.2705], [-35.2671, -48.5410], [0, -30], [35.2671, -48.5410], [28.5317, -9.2705], [57.0634, 18.5410], [17.6336, 24.2705], [0, 60]
]
]
},
properties: {}
};
const format = new GeoJSON({featureProjection: 'EPSG:3857'});
const feature = format.readFeature(json);
const layer = new VectorLayer({
source: new VectorSource({
features: [feature]
}),
style: new Style({
fill: new Fill({
color: 'blue'
})
})
});
map2.addLayer(layer);
map2.once('postrender', function() {
expectResemble(map2, 'rendering/ol/layer/expected/inverted-star.png', 1, done);
});
});
});
describe('Polygon simplification', function() {
let layer, map3;
beforeEach(function() {
const src = new VectorSource({
features: [
new Feature(new Polygon([[
[-22, 58],
[-22, 78],
[-9, 78],
[-9, 58],
[-22, 58]
]])),
new Feature(new Polygon([[
[-9, 58],
[-9, 78],
[4, 78],
[4, 58],
[-9, 58]
]]))
]
});
layer = new VectorLayer({
renderBuffer: 0,
source: src
});
const view = new View({
center: [-9.5, 78],
zoom: 2,
projection: 'EPSG:4326'
});
map3 = new Map({
pixelRatio: 1,
layers: [layer],
target: createMapDiv(100, 100),
view: view
});
});
afterEach(function() {
disposeMap(map3);
map3 = null;
});
it('renders partially out-of-view polygons with a fill and stroke', function(done) {
layer.setStyle(new Style({
stroke: new Stroke({
color: [0, 0, 0, 1],
width: 2
}),
fill: new Fill({
color: [255, 0, 0, 1]
})
}));
map3.once('postrender', function() {
expectResemble(map3, 'rendering/ol/layer/expected/vector-canvas-simplified.png',
IMAGE_TOLERANCE, done);
});
});
it('renders partially out-of-view polygons with a fill', function(done) {
layer.setStyle(new Style({
fill: new Fill({
color: [0, 0, 0, 1]
})
}));
map3.once('postrender', function() {
expectResemble(map3, 'rendering/ol/layer/expected/vector-canvas-simplified-fill.png',
IMAGE_TOLERANCE, done);
});
});
it('renders partially out-of-view polygons with a stroke', function(done) {
layer.setStyle(new Style({
stroke: new Stroke({
color: [0, 0, 0, 1],
width: 2
})
}));
map3.once('postrender', function() {
expectResemble(map3, 'rendering/ol/layer/expected/vector-canvas-simplified-stroke.png',
IMAGE_TOLERANCE, done);
});
});
});
describe('decluttering', function() {
beforeEach(function() {
source = new VectorSource();
});
it('declutters text', function(done) {
createMap();
const layer = new VectorLayer({
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 text and respects z-index', function(done) {
createMap();
const layer = new VectorLayer({
declutter: true,
source: source
});
map.addLayer(layer);
source.addFeature(new Feature({
geometry: new Point(center),
text: 'center',
zIndex: 2
}));
source.addFeature(new Feature({
geometry: new Point([center[0] - 540, center[1]]),
text: 'west',
zIndex: 3
}));
source.addFeature(new Feature({
geometry: new Point([center[0] + 540, center[1]]),
text: 'east',
zIndex: 1
}));
layer.setStyle(function(feature) {
return new Style({
zIndex: feature.get('zIndex'),
text: new Text({
text: feature.get('text'),
font: '12px sans-serif'
})
});
});
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-zindex.png',
3.9, done);
});
});
it('declutters images', function(done) {
createMap();
const layer = new VectorLayer({
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 images and respects z-index', function(done) {
createMap();
const layer = new VectorLayer({
declutter: true,
source: source
});
map.addLayer(layer);
source.addFeature(new Feature({
geometry: new Point(center),
zIndex: 2
}));
source.addFeature(new Feature({
geometry: new Point([center[0] - 540, center[1]]),
zIndex: 3
}));
source.addFeature(new Feature({
geometry: new Point([center[0] + 540, center[1]]),
zIndex: 1
}));
layer.setStyle(function(feature) {
return new Style({
zIndex: feature.get('zIndex'),
image: new CircleStyle({
radius: 15,
stroke: new Stroke({
color: 'blue'
})
})
});
});
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-image-zindex.png',
IMAGE_TOLERANCE, done);
});
});
it('declutters image & text groups', function(done) {
createMap();
const layer = new VectorLayer({
declutter: true,
source: source
});
map.addLayer(layer);
source.addFeature(new Feature({
geometry: new Point(center),
text: 'center'
}));
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({
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: 'blue'
})
}),
text: new Text({
text: feature.get('text'),
font: '12px sans-serif',
textBaseline: 'bottom',
offsetY: -5
})
});
});
map.once('postrender', function() {
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-group.png',
2.2, done);
});
});
it('declutters text along lines and images', function(done) {
createMap();
const layer = new VectorLayer({
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);
});
});
it('declutters text along lines and images with z-index', function(done) {
createMap();
const layer = new VectorLayer({
declutter: true,
source: source
});
map.addLayer(layer);
const point = new Feature(new Point(center));
point.setStyle(new Style({
zIndex: 2,
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({
zIndex: 1,
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() {
const hitDetected = map.getFeaturesAtPixel([35, 46]);
expect(hitDetected).to.have.length(1);
expect(hitDetected[0]).to.equal(line);
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-line-zindex.png',
4.1, done);
});
});
});
});

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);

122
test/rendering/ol/layer/vectortile.test.js
View File

@@ -1,122 +0,0 @@
import Map from '../../../../src/ol/Map.js';
import View from '../../../../src/ol/View.js';
import MVT from '../../../../src/ol/format/MVT.js';
import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
import {assign} from '../../../../src/ol/obj.js';
import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
import CircleStyle from '../../../../src/ol/style/Circle.js';
import Fill from '../../../../src/ol/style/Fill.js';
import Style from '../../../../src/ol/style/Style.js';
import Text from '../../../../src/ol/style/Text.js';
import {createXYZ} from '../../../../src/ol/tilegrid.js';
describe('ol.rendering.layer.VectorTile', function() {
let map;
function createMap(opt_pixelRatio, opt_size) {
const size = opt_size || 50;
map = new Map({
pixelRatio: opt_pixelRatio || 1,
target: createMapDiv(size, size),
view: new View({
center: [1825927.7316762917, 6143091.089223046],
zoom: 14
})
});
}
afterEach(function() {
disposeMap(map);
map = null;
});
function waitForTiles(source, layerOptions, onTileLoaded) {
let tilesLoading = 0;
let tileLoaded = 0;
const update = function() {
if (tilesLoading === tileLoaded) {
onTileLoaded();
}
};
source.on('tileloadstart', function(event) {
tilesLoading++;
});
source.on('tileloadend', function(event) {
tileLoaded++;
update();
});
source.on('tileloaderror', function(event) {
expect().fail('Tile failed to load');
});
const options = {
source: source
};
assign(options, layerOptions);
map.addLayer(new VectorTileLayer(options));
}
describe('vector tile layer', function() {
let source;
beforeEach(function() {
source = new VectorTileSource({
format: new MVT(),
tileGrid: createXYZ(),
url: 'rendering/ol/data/tiles/mvt/{z}-{x}-{y}.vector.pbf',
transition: 0
});
});
it('renders correctly with the canvas renderer (HiDPI)', function(done) {
createMap(2);
waitForTiles(source, {}, function() {
expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-hidpi.png',
11.3, done);
});
});
it('renders rotated view correctly with the canvas renderer (HiDPI)', function(done) {
createMap(2);
map.getView().setRotation(Math.PI / 4);
waitForTiles(source, {}, function() {
expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-rotated-hidpi.png',
14.8, done);
});
});
it('declutters text and images', function(done) {
createMap(1, 100);
map.getView().setZoom(13.8);
const style = function(feature, resolution) {
const geom = feature.getGeometry();
if (geom.getType() == 'Point') {
return new Style({
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: 'red'
})
}),
text: new Text({
text: feature.get('name_en'),
font: '12px sans-serif',
textBaseline: 'bottom',
offsetY: -7
})
});
}
};
waitForTiles(source, {declutter: true, style: style}, function() {
expectResemble(map, 'rendering/ol/layer/expected/vectortile-canvas-declutter.png',
8.5, done);
});
});
});
});

74
test/rendering/ol/map.test.js
View File

@@ -1,74 +0,0 @@
import Feature from '../../../src/ol/Feature.js';
import Point from '../../../src/ol/geom/Point.js';
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorLayer from '../../../src/ol/layer/Vector.js';
import VectorSource from '../../../src/ol/source/Vector.js';
describe('ol.rendering.Map', function() {
let map;
function createMap(renderer) {
const MapConstructor = Map;
const LayerConstructor = VectorLayer;
const vectorLayer = new LayerConstructor({
source: new VectorSource({
features: [new Feature({
geometry: new Point([0, 0])
})]
})
});
map = new MapConstructor({
pixelRatio: 1,
target: createMapDiv(50, 50),
layers: [vectorLayer],
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
resolution: 1
})
});
}
afterEach(function() {
if (map) {
disposeMap(map);
}
map = null;
});
describe('#updateSize()', function() {
it('tests the canvas renderer', function(done) {
createMap('canvas');
map.once('postrender', function() {
const initialSize = map.getSize();
map.updateSize();
expect(map.getSize()).to.eql(initialSize);
done();
});
});
});
describe('#render()', function() {
it('tests the canvas renderer', function(done) {
createMap('canvas');
expectResemble(
map, 'rendering/ol/expected/render-canvas.png', IMAGE_TOLERANCE, done);
});
});
describe('#pan()', function() {
it('tests the canvas renderer', function(done) {
createMap('canvas');
map.getView().setCenter([10, 10]);
expectResemble(
map, 'rendering/ol/expected/pan-canvas.png', IMAGE_TOLERANCE, done);
});
});
});

BIN
test/rendering/ol/source/expected/0_1.canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
test/rendering/ol/source/expected/0_1.webgl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
test/rendering/ol/source/expected/0_2.canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
test/rendering/ol/source/expected/0_2.webgl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
test/rendering/ol/source/expected/20_1.canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

BIN
test/rendering/ol/source/expected/20_1.webgl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

BIN
test/rendering/ol/source/expected/20_2.canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
test/rendering/ol/source/expected/20_2.webgl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
test/rendering/ol/source/expected/raster-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

83
test/rendering/ol/source/raster.test.js
View File

@@ -1,83 +0,0 @@
import Map from '../../../../src/ol/Map.js';
import View from '../../../../src/ol/View.js';
import ImageLayer from '../../../../src/ol/layer/Image.js';
import RasterSource from '../../../../src/ol/source/Raster.js';
import XYZ from '../../../../src/ol/source/XYZ.js';
where('Uint8ClampedArray').describe('ol.rendering.source.Raster', function() {
function afterRender(source, raster, callback) {
let loading = 0;
source.on('tileloadstart', function(event) {
loading++;
});
source.on('tileloadend', function(event) {
loading--;
if (loading == 0) {
raster.once('afteroperations', function() {
callback();
});
}
});
source.on('tileloaderror', function(event) {
callback(new Error('Tile failed to load'));
});
}
let map;
function createMap(pixelRatio) {
map = new Map({
target: createMapDiv(200, 200),
pixelRatio: pixelRatio,
view: new View({
center: [0, 0],
zoom: 0
})
});
}
afterEach(function() {
if (map) {
disposeMap(map);
}
map = null;
});
describe('raster source rendering', function() {
it('renders the result of an operation', function(done) {
createMap(1);
const source = new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
const raster = new RasterSource({
sources: [source],
operation: function(pixels) {
const pixel = pixels[0];
// swap blue and red
const red = pixel[0];
pixel[0] = pixel[2];
pixel[2] = red;
return pixel;
}
});
afterRender(source, raster, function(err) {
if (err) {
done(err);
return;
}
expectResemble(map, 'rendering/ol/source/expected/raster-1.png', IMAGE_TOLERANCE, done);
});
const layer = new ImageLayer({source: raster});
map.addLayer(layer);
});
});
});

112
test/rendering/ol/source/tilewms.test.js
View File

@@ -1,112 +0,0 @@
import Map from '../../../../src/ol/Map.js';
import View from '../../../../src/ol/View.js';
import TileLayer from '../../../../src/ol/layer/Tile.js';
import TileWMS from '../../../../src/ol/source/TileWMS.js';
describe('ol.rendering.source.TileWMS', function() {
function tilesLoaded(source, callback) {
let loading = 0;
source.on('tileloadstart', function(event) {
loading++;
});
source.on('tileloadend', function(event) {
loading--;
if (loading == 0) {
callback();
}
});
source.on('tileloaderror', function(event) {
expect().fail('Tile failed to load');
});
}
let map;
function createMap(renderer, pixelRatio) {
const MapConstructor = Map;
map = new MapConstructor({
target: createMapDiv(200, 200),
pixelRatio: pixelRatio,
view: new View({
center: [0, 0],
zoom: 5
})
});
}
afterEach(function() {
if (map) {
disposeMap(map);
}
map = null;
});
function createSource(gutter) {
return new TileWMS({
params: {
'LAYERS': 'layer'
},
gutter: gutter,
url: 'rendering/ol/data/tiles/wms/wms' + gutter + '.png',
transition: 0
});
}
describe('0px gutter, 1 pixel ratio', function() {
it('tests the canvas renderer', function(done) {
createMap('canvas', 1);
const source = createSource(0);
tilesLoaded(source, function() {
expectResemble(map, 'rendering/ol/source/expected/0_1.canvas.png', IMAGE_TOLERANCE, done);
});
map.addLayer(new TileLayer({
source: source
}));
});
});
describe('0px gutter, 2 pixel ratio', function() {
it('tests the canvas renderer', function(done) {
createMap('canvas', 2);
const source = createSource(0);
tilesLoaded(source, function() {
expectResemble(map, 'rendering/ol/source/expected/0_2.canvas.png', IMAGE_TOLERANCE, done);
});
map.addLayer(new TileLayer({
source: source
}));
});
});
describe('20px gutter, 1 pixel ratio', function() {
it('tests the canvas renderer', function(done) {
createMap('canvas', 1);
const source = createSource(20);
tilesLoaded(source, function() {
expectResemble(map, 'rendering/ol/source/expected/20_1.canvas.png', IMAGE_TOLERANCE, done);
});
map.addLayer(new TileLayer({
source: source
}));
});
});
describe('20px gutter, 2 pixel ratio', function() {
it('tests the canvas renderer', function(done) {
createMap('canvas', 2);
const source = createSource(20);
tilesLoaded(source, function() {
expectResemble(map, 'rendering/ol/source/expected/20_2.canvas.png', IMAGE_TOLERANCE, done);
});
map.addLayer(new TileLayer({
source: source
}));
});
});
});

203
test/rendering/ol/style/circle.test.js
View File

@@ -1,203 +0,0 @@
import Feature from '../../../../src/ol/Feature.js';
import Point from '../../../../src/ol/geom/Point.js';
import MultiPoint from '../../../../src/ol/geom/MultiPoint.js';
import Map from '../../../../src/ol/Map.js';
import View from '../../../../src/ol/View.js';
import VectorLayer from '../../../../src/ol/layer/Vector.js';
import VectorSource from '../../../../src/ol/source/Vector.js';
import CircleStyle from '../../../../src/ol/style/Circle.js';
import Fill from '../../../../src/ol/style/Fill.js';
import Style from '../../../../src/ol/style/Style.js';
import Stroke from '../../../../src/ol/style/Stroke.js';
describe('ol.rendering.style.Circle', function() {
let map, vectorSource;
function createMap(renderer) {
const MapConstructor = Map;
const LayerConstructor = VectorLayer;
vectorSource = new VectorSource();
const vectorLayer = new LayerConstructor({
source: vectorSource
});
map = new MapConstructor({
pixelRatio: 1,
target: createMapDiv(50, 50),
layers: [vectorLayer],
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
resolution: 1
})
});
}
afterEach(function() {
if (map) {
disposeMap(map);
map = null;
}
});
describe('#render', function() {
function createFeatures(multi) {
let feature;
feature = new Feature({
geometry: multi ? new MultiPoint([[-20, 18]]) : new Point([-20, 18])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
fill: new Fill({
color: '#91E339'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: multi ? new MultiPoint([[-10, 18]]) : new Point([-10, 18])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: '#5447E6'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: multi ? new MultiPoint([[4, 18]]) : new Point([4, 18])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: '#92A8A6'
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: multi ? new MultiPoint([[-20, 3]]) : new Point([-20, 3])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
fill: new Fill({
color: '#91E339'
}),
stroke: new Stroke({
color: '#000000',
width: 1
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: multi ? new MultiPoint([[-10, 3]]) : new Point([-10, 3])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: '#5447E6'
}),
stroke: new Stroke({
color: '#000000',
width: 2
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: multi ? new MultiPoint([[4, 3]]) : new Point([4, 3])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: '#92A8A6'
}),
stroke: new Stroke({
color: '#000000',
width: 3
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: multi ? new MultiPoint([[-20, -15]]) : new Point([-20, -15])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 2,
stroke: new Stroke({
color: '#256308',
width: 1
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: multi ? new MultiPoint([[-10, -15]]) : new Point([-10, -15])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 4,
fill: new Fill({
color: 'rgba(0, 0, 255, 0.3)'
}),
stroke: new Stroke({
color: '#256308',
width: 2
})
})
}));
vectorSource.addFeature(feature);
feature = new Feature({
geometry: multi ? new MultiPoint([[4, -15]]) : new Point([4, -15])
});
feature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: 'rgba(235, 45, 70, 0.6)'
}),
stroke: new Stroke({
color: '#256308',
width: 3
})
})
}));
vectorSource.addFeature(feature);
}
it('renders point geometries', function(done) {
createMap('canvas');
createFeatures();
expectResemble(map, 'rendering/ol/style/expected/circle-canvas.png',
8.0, done);
});
it('renders multipoint geometries', function(done) {
createMap('canvas');
createFeatures(true);
expectResemble(map, 'rendering/ol/style/expected/circle-canvas.png',
8.0, done);
});
});
});

BIN
test/rendering/ol/style/expected/circle-canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
test/rendering/ol/style/expected/circle-webgl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
test/rendering/ol/style/expected/linestring-strokes-canvas-hidpi.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1013 B

BIN
test/rendering/ol/style/expected/linestring-strokes-canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 590 B

BIN
test/rendering/ol/style/expected/linestring-strokes-webgl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 274 B

BIN
test/rendering/ol/style/expected/regularshape-canvas-default-style.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
test/rendering/ol/style/expected/regularshape-canvas-linedash.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 819 B

BIN
test/rendering/ol/style/expected/regularshape-canvas-linedashoffset.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 831 B

BIN
test/rendering/ol/style/expected/regularshape-canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
test/rendering/ol/style/expected/regularshape-webgl-default-style.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
test/rendering/ol/style/expected/regularshape-webgl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
test/rendering/ol/style/expected/text-align-offset-canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.1 KiB

BIN
test/rendering/ol/style/expected/text-background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
test/rendering/ol/style/expected/text-canvas-hidpi.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.3 KiB

BIN
test/rendering/ol/style/expected/text-canvas-scale.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
test/rendering/ol/style/expected/text-canvas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
test/rendering/ol/style/expected/text-linestring-auto.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
test/rendering/ol/style/expected/text-linestring-center.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
test/rendering/ol/style/expected/text-linestring-left-nice-rotated.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
test/rendering/ol/style/expected/text-linestring-left-nice.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.6 KiB

BIN
test/rendering/ol/style/expected/text-linestring-left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
test/rendering/ol/style/expected/text-linestring-nice-baseline.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
test/rendering/ol/style/expected/text-linestring-nice-multi-font.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
test/rendering/ol/style/expected/text-linestring-nice-rotated.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
test/rendering/ol/style/expected/text-linestring-nice-scale.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.7 KiB

BIN
test/rendering/ol/style/expected/text-linestring-omit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
test/rendering/ol/style/expected/text-multilinestring.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
test/rendering/ol/style/expected/text-multipolygon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

Some files were not shown because too many files have changed in this diff Show More