Merge pull request #9333 from KaiVolland/unify-rendering-tests
Unify rendering tests
This commit is contained in:
Tim Schaub
GitHub
Binary file not shown.
|
Before Width: | Height: | Size: 635 B |
Binary file not shown.
|
Before Width: | Height: | Size: 637 B |
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -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
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1013 B |
Binary file not shown.
|
Before Width: | Height: | Size: 590 B |
Binary file not shown.
|
Before Width: | Height: | Size: 274 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 819 B |
Binary file not shown.
|
Before Width: | Height: | Size: 831 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
@@ -1,130 +0,0 @@
|
||||
import Feature from '../../../../src/ol/Feature.js';
|
||||
import LineString from '../../../../src/ol/geom/LineString.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';
|
||||
|
||||
|
||||
describe('ol.rendering.style.LineString', function() {
|
||||
|
||||
let map, vectorSource;
|
||||
|
||||
function createMap(renderer, opt_pixelRatio) {
|
||||
const MapConstructor = Map;
|
||||
const LayerConstructor = VectorLayer;
|
||||
|
||||
vectorSource = new VectorSource();
|
||||
const vectorLayer = new LayerConstructor({
|
||||
source: vectorSource
|
||||
});
|
||||
|
||||
map = new MapConstructor({
|
||||
pixelRatio: opt_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('different strokes', function() {
|
||||
|
||||
function createFeatures() {
|
||||
let feature;
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString(
|
||||
[[-20, 20], [15, 20]]
|
||||
)
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({color: '#DE213A', width: 3})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString(
|
||||
[[-20, 15], [15, 15]]
|
||||
)
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({color: '#9696EB', width: 1})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString(
|
||||
[[-20, 10], [15, 10]]
|
||||
)
|
||||
});
|
||||
feature.setStyle([new Style({
|
||||
stroke: new Stroke({color: '#F2F211', width: 5})
|
||||
}), new Style({
|
||||
stroke: new Stroke({color: '#292921', width: 1})
|
||||
})]);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString(
|
||||
[[-20, -20], [-2, 0], [15, -20]]
|
||||
)
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 2,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round'
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString(
|
||||
[[-20, -15], [-2, 5], [15, -15]]
|
||||
)
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 2,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineDashOffset: 6,
|
||||
lineJoin: 'round'
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
}
|
||||
|
||||
it('tests the canvas renderer', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures();
|
||||
expectResemble(
|
||||
map, 'rendering/ol/style/expected/linestring-strokes-canvas.png',
|
||||
3.0, done);
|
||||
});
|
||||
|
||||
it('tests the canvas renderer (HiDPI)', function(done) {
|
||||
createMap('canvas', 2);
|
||||
createFeatures();
|
||||
expectResemble(
|
||||
map, 'rendering/ol/style/expected/linestring-strokes-canvas-hidpi.png',
|
||||
3.0, done);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,150 +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';
|
||||
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';
|
||||
|
||||
|
||||
describe('ol.rendering.style.RegularShape', 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;
|
||||
}
|
||||
});
|
||||
|
||||
function createFeatures(stroke, fill) {
|
||||
let feature;
|
||||
feature = new Feature({
|
||||
geometry: new Point([-15, 15])
|
||||
});
|
||||
// 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, 15])
|
||||
});
|
||||
// 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, -8])
|
||||
});
|
||||
// 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, -8])
|
||||
});
|
||||
// cross
|
||||
feature.setStyle(new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 4,
|
||||
radius: 10,
|
||||
radius2: 0,
|
||||
angle: 0
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
}
|
||||
|
||||
|
||||
describe('#render', function() {
|
||||
const stroke = new Stroke({width: 2});
|
||||
const fill = new Fill({color: 'red'});
|
||||
|
||||
it('tests the canvas renderer', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures(stroke, fill);
|
||||
expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas.png', 9.4, done);
|
||||
});
|
||||
|
||||
it('supports lineDash', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures(new Stroke({
|
||||
lineDash: [10, 5]
|
||||
}));
|
||||
expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas-linedash.png', 5, done);
|
||||
});
|
||||
|
||||
it('supports lineDashOffset', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures(new Stroke({
|
||||
lineDash: [10, 5],
|
||||
lineDashOffset: 5
|
||||
}));
|
||||
expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas-linedashoffset.png', 5, done);
|
||||
});
|
||||
});
|
||||
|
||||
describe('uses the default fill and stroke color', function() {
|
||||
const stroke = new Stroke();
|
||||
const fill = new Fill();
|
||||
|
||||
it('tests the canvas renderer', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures(stroke, fill);
|
||||
expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas-default-style.png', 3.0, done);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,448 +0,0 @@
|
||||
import Feature from '../../../../src/ol/Feature.js';
|
||||
import LineString from '../../../../src/ol/geom/LineString.js';
|
||||
import MultiLineString from '../../../../src/ol/geom/MultiLineString.js';
|
||||
import MultiPolygon from '../../../../src/ol/geom/MultiPolygon.js';
|
||||
import Point from '../../../../src/ol/geom/Point.js';
|
||||
import Polygon from '../../../../src/ol/geom/Polygon.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 Text from '../../../../src/ol/style/Text.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.Text', function() {
|
||||
|
||||
let map, vectorSource;
|
||||
|
||||
function createMap(renderer, opt_pixelRatio) {
|
||||
const MapConstructor = Map;
|
||||
const LayerConstructor = VectorLayer;
|
||||
|
||||
const pixelRatio = opt_pixelRatio || 1;
|
||||
vectorSource = new VectorSource();
|
||||
const vectorLayer = new LayerConstructor({
|
||||
source: vectorSource
|
||||
});
|
||||
|
||||
map = new MapConstructor({
|
||||
pixelRatio: pixelRatio,
|
||||
target: createMapDiv(200 / pixelRatio, 200 / pixelRatio),
|
||||
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(opt_scale) {
|
||||
const scale = opt_scale || 1;
|
||||
let feature;
|
||||
feature = new Feature({
|
||||
geometry: new Point([-20, 18])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
scale: scale,
|
||||
text: 'hello',
|
||||
font: '10px sans-serif'
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-10, 0])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
scale: scale,
|
||||
text: 'hello',
|
||||
fill: new Fill({
|
||||
color: 'red',
|
||||
font: '12px sans-serif'
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([20, 10])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
scale: scale,
|
||||
rotateWithView: true,
|
||||
text: 'hello',
|
||||
font: '10px sans-serif',
|
||||
stroke: new Stroke({
|
||||
color: [10, 10, 10, 0.5]
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
}
|
||||
|
||||
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 uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
|
||||
const polygon = [151, 17, 163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
|
||||
|
||||
function createLineString(coords, textAlign, maxAngle, strokeColor, strokeWidth, scale) {
|
||||
let geom = new LineString(coords, 'XY');
|
||||
let style = new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'red'
|
||||
}),
|
||||
text: new Text({
|
||||
text: 'Hello world',
|
||||
font: 'bold 14px sans-serif',
|
||||
scale: scale || 1,
|
||||
textAlign: textAlign,
|
||||
maxAngle: maxAngle,
|
||||
placement: 'line',
|
||||
stroke: new Stroke({
|
||||
color: strokeColor || 'white',
|
||||
width: strokeWidth
|
||||
})
|
||||
})
|
||||
});
|
||||
let feature = new Feature(geom);
|
||||
feature.setStyle(style);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
geom = geom.clone();
|
||||
geom.translate(0, 5);
|
||||
feature = new Feature(geom);
|
||||
style = style.clone();
|
||||
style.getText().setTextBaseline('top');
|
||||
feature.setStyle(style);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
geom = geom.clone();
|
||||
geom.translate(0, -10);
|
||||
feature = new Feature(geom);
|
||||
style = style.clone();
|
||||
style.getText().setTextBaseline('bottom');
|
||||
feature.setStyle(style);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
map.getView().fit(vectorSource.getExtent());
|
||||
}
|
||||
|
||||
it('tests the canvas renderer without rotation', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures();
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-canvas.png', IMAGE_TOLERANCE, done);
|
||||
});
|
||||
|
||||
it('tests the canvas renderer with rotation', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures();
|
||||
map.getView().setRotation(Math.PI / 7);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-rotated-canvas.png', IMAGE_TOLERANCE, done);
|
||||
});
|
||||
|
||||
it('renders correct stroke with pixelRatio != 1', function(done) {
|
||||
createMap('canvas', 2);
|
||||
createFeatures();
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-canvas-hidpi.png', 2.9, done);
|
||||
});
|
||||
|
||||
it('renders text correctly with scale != 1', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures(3);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-canvas-scale.png', 6, done);
|
||||
});
|
||||
|
||||
it('renders multiline text with alignment options', function(done) {
|
||||
createMap('canvas');
|
||||
let feature;
|
||||
feature = new Feature(new Point([25, 0]));
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world\nleft',
|
||||
font: 'bold 14px sans-serif',
|
||||
textAlign: 'left'
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
feature = new Feature(new Point([-25, 0]));
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world\nright',
|
||||
font: 'bold 14px sans-serif',
|
||||
textAlign: 'right'
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
feature = new Feature(new Point([0, 25]));
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world\nbottom',
|
||||
font: 'bold 14px sans-serif',
|
||||
textBaseline: 'bottom'
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
feature = new Feature(new Point([0, -25]));
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'top\nHello world',
|
||||
font: 'bold 14px sans-serif',
|
||||
textBaseline: 'top'
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-align-offset-canvas.png', 6, done);
|
||||
});
|
||||
|
||||
it('renders multiline text with positioning options', function(done) {
|
||||
createMap('canvas');
|
||||
let feature;
|
||||
feature = new Feature(new Point([0, 0]));
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world\nleft',
|
||||
font: 'bold 14px sans-serif',
|
||||
textAlign: 'left',
|
||||
offsetX: 25
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
feature = new Feature(new Point([0, 0]));
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world\nright',
|
||||
font: 'bold 14px sans-serif',
|
||||
textAlign: 'right',
|
||||
offsetX: -25
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
feature = new Feature(new Point([0, 0]));
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world\nbottom',
|
||||
font: 'bold 14px sans-serif',
|
||||
textBaseline: 'bottom',
|
||||
offsetY: -25
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
feature = new Feature(new Point([0, 0]));
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'top\nHello world',
|
||||
font: 'bold 14px sans-serif',
|
||||
textBaseline: 'top',
|
||||
offsetY: 25
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-align-offset-canvas.png', 6, done);
|
||||
});
|
||||
|
||||
it('renders text along a MultiLineString', function(done) {
|
||||
createMap('canvas');
|
||||
let line = new LineString(nicePath, 'XY');
|
||||
const geom = new MultiLineString([line]);
|
||||
line = line.clone();
|
||||
line.translate(0, 50);
|
||||
geom.appendLineString(line);
|
||||
line = line.clone();
|
||||
line.translate(0, -100);
|
||||
geom.appendLineString(line);
|
||||
const feature = new Feature(geom);
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world',
|
||||
placement: 'line',
|
||||
font: 'bold 30px sans-serif'
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
map.getView().fit(vectorSource.getExtent());
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-multilinestring.png', 7, done);
|
||||
});
|
||||
|
||||
it('renders text along a Polygon', function(done) {
|
||||
createMap('canvas');
|
||||
const geom = new Polygon(polygon, 'XY', [polygon.length]);
|
||||
const feature = new Feature(geom);
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world',
|
||||
font: 'bold 24px sans-serif',
|
||||
placement: 'line',
|
||||
overflow: true
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
map.getView().fit(vectorSource.getExtent());
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-polygon.png', IMAGE_TOLERANCE, done);
|
||||
});
|
||||
|
||||
it('renders text along a MultiPolygon', function(done) {
|
||||
createMap('canvas');
|
||||
let geom = new Polygon(polygon, 'XY', [polygon.length]);
|
||||
const multiPolygon = new MultiPolygon([geom]);
|
||||
geom = geom.clone();
|
||||
geom.translate(0, 30);
|
||||
multiPolygon.appendPolygon(geom);
|
||||
geom = geom.clone();
|
||||
geom.translate(0, -60);
|
||||
multiPolygon.appendPolygon(geom);
|
||||
const feature = new Feature(multiPolygon);
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'Hello world',
|
||||
font: 'bold 24px sans-serif',
|
||||
placement: 'line',
|
||||
overflow: true
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
map.getView().fit(vectorSource.getExtent());
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-multipolygon.png', 4.4, done);
|
||||
});
|
||||
|
||||
it('renders text background', function(done) {
|
||||
createMap('canvas');
|
||||
createFeatures();
|
||||
const features = vectorSource.getFeatures();
|
||||
features[0].getStyle().getText().setBackgroundFill(new Fill({
|
||||
color: 'red'
|
||||
}));
|
||||
features[1].getStyle().getText().setBackgroundFill(new Fill({
|
||||
color: 'red'
|
||||
}));
|
||||
features[1].getStyle().getText().setBackgroundStroke(new Stroke({
|
||||
color: 'blue',
|
||||
width: 3
|
||||
}));
|
||||
features[2].getStyle().getText().setBackgroundFill(new Fill({
|
||||
color: 'red'
|
||||
}));
|
||||
features[2].getStyle().getText().setBackgroundStroke(new Stroke({
|
||||
color: 'blue',
|
||||
width: 3
|
||||
}));
|
||||
features[2].getStyle().getText().setPadding([5, 10, 15, 0]);
|
||||
map.getView().fit(vectorSource.getExtent());
|
||||
map.once('postrender', function() {
|
||||
expect(map.getFeaturesAtPixel([178, 120])).to.have.length(1);
|
||||
});
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-background.png', IMAGE_TOLERANCE, done);
|
||||
});
|
||||
|
||||
describe('Text along an ugly upside down path, keep text upright', function() {
|
||||
|
||||
it('renders text along a linestring with auto-align', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(uglyPath);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-auto.png', 3.6, done);
|
||||
});
|
||||
|
||||
it('renders text along a linestring with `textAlign: \'center\'`', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(uglyPath, 'center');
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-center.png', 3.63, done);
|
||||
});
|
||||
|
||||
it('omits text along a linestring with `textAlign: \'left\'` when > maxAngle', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(uglyPath, 'left');
|
||||
vectorSource.getFeatures()[0].getStyle().getText().setTextAlign('left');
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-omit.png', IMAGE_TOLERANCE, done);
|
||||
});
|
||||
|
||||
it('omits text along a linestring with `textAlign: \'right\'` when > maxAngle', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(uglyPath, 'right');
|
||||
vectorSource.getFeatures()[0].getStyle().getText().setTextAlign('left');
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-omit.png', IMAGE_TOLERANCE, done);
|
||||
});
|
||||
|
||||
it('renders text along a linestring with `textAlign: \'left\'` and no angle limit', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(uglyPath, 'left', Infinity);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-left.png', 3.5, done);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('Text along a nice path', function() {
|
||||
|
||||
it('renders text along a linestring', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(nicePath);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice.png', 2.8, done);
|
||||
});
|
||||
|
||||
it('uses correct font with different styles', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(nicePath);
|
||||
map.getView().setResolution(0.25);
|
||||
vectorSource.getFeatures()[0].getStyle().getText().setFont('18px monospace');
|
||||
vectorSource.getFeatures()[1].getStyle().getText().setFont('italic 38px serif');
|
||||
vectorSource.getFeatures()[1].getStyle().getText().setTextBaseline('middle');
|
||||
vectorSource.getFeatures()[2].getStyle().getText().setTextBaseline('middle');
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-multi-font.png', 7.54, done);
|
||||
});
|
||||
|
||||
it('renders text along a linestring with scale != 1', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(nicePath, undefined, undefined, undefined, undefined, 2);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-scale.png', 8, done);
|
||||
});
|
||||
|
||||
it('aligns text along a linestring correctly with `textBaseline` option', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(nicePath, undefined, undefined, 'cyan', 3);
|
||||
map.getView().setResolution(0.25);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-baseline.png', 6.2, done);
|
||||
});
|
||||
|
||||
it('renders text along a linestring with `textAlign: \'left\'`', function(done) {
|
||||
createMap('canvas');
|
||||
createLineString(nicePath, 'left');
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice.png', 2.8, done);
|
||||
});
|
||||
|
||||
it('renders text along a rotated linestring', function(done) {
|
||||
createMap('canvas');
|
||||
map.getView().setRotation(Math.PI);
|
||||
createLineString(nicePath);
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-rotated.png', 4.5, done);
|
||||
});
|
||||
|
||||
it('renders text along a rotated linestring with `textAlign: \'left\'`', function(done) {
|
||||
createMap('canvas');
|
||||
map.getView().setRotation(Math.PI);
|
||||
createLineString(nicePath, 'left');
|
||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice-rotated.png', 4.5, done);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user