1004 lines
28 KiB
JavaScript
1004 lines
28 KiB
JavaScript
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 _ol_style_Circle_ from '../../../../src/ol/style/Circle.js';
|
|
import _ol_style_Fill_ from '../../../../src/ol/style/Fill.js';
|
|
import _ol_style_Stroke_ from '../../../../src/ol/style/Stroke.js';
|
|
import _ol_style_Style_ from '../../../../src/ol/style/Style.js';
|
|
import _ol_style_Text_ from '../../../../src/ol/style/Text.js';
|
|
|
|
|
|
describe('ol.rendering.layer.Vector', function() {
|
|
|
|
var center = [1825927.7316762917, 6143091.089223046];
|
|
|
|
var map;
|
|
function createMap(renderer) {
|
|
map = new Map({
|
|
pixelRatio: 1,
|
|
target: createMapDiv(80, 80),
|
|
renderer: renderer,
|
|
view: new View({
|
|
center: center,
|
|
zoom: 13
|
|
})
|
|
});
|
|
}
|
|
|
|
afterEach(function() {
|
|
if (map) {
|
|
disposeMap(map);
|
|
}
|
|
map = null;
|
|
});
|
|
|
|
var 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('canvas');
|
|
var smallLine = new Feature(new LineString([
|
|
[center[0], center[1] - 1],
|
|
[center[0], center[1] + 1]
|
|
]));
|
|
smallLine.setStyle(new _ol_style_Style_({
|
|
zIndex: -99,
|
|
stroke: new _ol_style_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 opacity correctly with renderMode: \'image\'', function(done) {
|
|
createMap('canvas');
|
|
var smallLine = new Feature(new LineString([
|
|
[center[0], center[1] - 1],
|
|
[center[0], center[1] + 1]
|
|
]));
|
|
smallLine.setStyle(new _ol_style_Style_({
|
|
zIndex: -99,
|
|
stroke: new _ol_style_Stroke_({width: 75, color: 'red'})
|
|
}));
|
|
source.addFeature(smallLine);
|
|
addPolygon(100);
|
|
addCircle(200);
|
|
addPolygon(250);
|
|
addCircle(500);
|
|
addPolygon(600);
|
|
addPolygon(720);
|
|
map.addLayer(new VectorLayer({
|
|
renerMode: 'image',
|
|
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('canvas');
|
|
var smallLine = new Feature(new LineString([
|
|
[center[0], center[1] - 1],
|
|
[center[0], center[1] + 1]
|
|
]));
|
|
smallLine.setStyle([
|
|
new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({width: 75, color: 'red'})
|
|
}),
|
|
new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({width: 45, color: 'white'})
|
|
})
|
|
]);
|
|
source.addFeature(smallLine);
|
|
var smallLine2 = new Feature(new LineString([
|
|
[center[0], center[1] - 1000],
|
|
[center[0], center[1] + 1000]
|
|
]));
|
|
smallLine2.setStyle([
|
|
new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({width: 35, color: 'blue'})
|
|
}),
|
|
new _ol_style_Style_({
|
|
stroke: new _ol_style_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 transparent layers correctly with renderMode: \'image\'', function(done) {
|
|
createMap('canvas');
|
|
var smallLine = new Feature(new LineString([
|
|
[center[0], center[1] - 1],
|
|
[center[0], center[1] + 1]
|
|
]));
|
|
smallLine.setStyle([
|
|
new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({width: 75, color: 'red'})
|
|
}),
|
|
new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({width: 45, color: 'white'})
|
|
})
|
|
]);
|
|
source.addFeature(smallLine);
|
|
var smallLine2 = new Feature(new LineString([
|
|
[center[0], center[1] - 1000],
|
|
[center[0], center[1] + 1000]
|
|
]));
|
|
smallLine2.setStyle([
|
|
new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({width: 35, color: 'blue'})
|
|
}),
|
|
new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({width: 15, color: 'green'})
|
|
})
|
|
]);
|
|
source.addFeature(smallLine2);
|
|
|
|
map.addLayer(new VectorLayer({
|
|
renderMode: 'image',
|
|
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('canvas');
|
|
map.getView().setRotation(Math.PI + Math.PI / 4);
|
|
addPolygon(300);
|
|
addCircle(500);
|
|
map.addLayer(new VectorLayer({
|
|
source: source,
|
|
style: new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({
|
|
width: 2,
|
|
color: 'black'
|
|
})
|
|
})
|
|
}));
|
|
map.once('postrender', function() {
|
|
expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-rotated.png',
|
|
1.7, done);
|
|
});
|
|
});
|
|
|
|
it('renders rotation correctly with renderMode: \'image\'', function(done) {
|
|
createMap('canvas');
|
|
map.getView().setRotation(Math.PI + Math.PI / 4);
|
|
addPolygon(300);
|
|
addCircle(500);
|
|
map.addLayer(new VectorLayer({
|
|
renderMode: 'image',
|
|
source: source,
|
|
style: new _ol_style_Style_({
|
|
stroke: new _ol_style_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 with renderMode: \'image\'', function(done) {
|
|
createMap('canvas');
|
|
addCircle(500);
|
|
addPolygon(300);
|
|
map.skipFeature(source.getFeatures()[1]);
|
|
map.addLayer(new VectorLayer({
|
|
renderMode: 'image',
|
|
source: source,
|
|
style: new _ol_style_Style_({
|
|
fill: new _ol_style_Fill_({
|
|
color: 'rgba(255,0,0,0.5)'
|
|
}),
|
|
stroke: new _ol_style_Stroke_({
|
|
width: 2,
|
|
color: 'black'
|
|
})
|
|
})
|
|
}));
|
|
map.renderSync();
|
|
map.unskipFeature(source.getFeatures()[1]);
|
|
map.once('postrender', function() {
|
|
expectResemble(map, 'rendering/ol/layer/expected/vector.png',
|
|
IMAGE_TOLERANCE, done);
|
|
});
|
|
});
|
|
|
|
it('renders fill/stroke batches correctly with the canvas renderer', function(done) {
|
|
createMap('canvas');
|
|
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 _ol_style_Style_({
|
|
stroke: new _ol_style_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('canvas');
|
|
source = new VectorSource({
|
|
overlaps: false
|
|
});
|
|
addLineString(100);
|
|
addLineString(250);
|
|
addLineString(600);
|
|
addLineString(720);
|
|
map.addLayer(new VectorLayer({
|
|
source: source,
|
|
style: new _ol_style_Style_({
|
|
stroke: new _ol_style_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('canvas');
|
|
var 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;
|
|
}
|
|
var layer = new VectorLayer({
|
|
source: createSource(true),
|
|
style: function(feature) {
|
|
alternateColor();
|
|
return new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({
|
|
color: alternateColor(),
|
|
width: 1.25
|
|
}),
|
|
fill: new _ol_style_Fill_({
|
|
color: alternateColor()
|
|
})
|
|
});
|
|
}
|
|
});
|
|
map.addLayer(layer);
|
|
map.once('postrender', function() {
|
|
var canvas = map.getRenderer().canvas_;
|
|
// take a snapshot of this `overlaps: true` image
|
|
var 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('canvas');
|
|
var 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;
|
|
}
|
|
var layer = new VectorLayer({
|
|
source: createSource(true),
|
|
style: function(feature) {
|
|
alternateColor();
|
|
return new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({
|
|
color: alternateColor(),
|
|
width: 1.25
|
|
}),
|
|
fill: new _ol_style_Fill_({
|
|
color: alternateColor()
|
|
})
|
|
});
|
|
}
|
|
});
|
|
map.addLayer(layer);
|
|
map.once('postrender', function() {
|
|
var canvas = map.getRenderer().canvas_;
|
|
// take a snapshot of this `overlaps: true` image
|
|
var 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() {
|
|
|
|
var 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) {
|
|
var 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: {}
|
|
};
|
|
|
|
var format = new GeoJSON({featureProjection: 'EPSG:3857'});
|
|
var feature = format.readFeature(json);
|
|
|
|
var layer = new VectorLayer({
|
|
source: new VectorSource({
|
|
features: [feature]
|
|
}),
|
|
style: new _ol_style_Style_({
|
|
fill: new _ol_style_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() {
|
|
|
|
var layer, map3;
|
|
|
|
beforeEach(function() {
|
|
var 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
|
|
});
|
|
var 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 _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({
|
|
color: [0, 0, 0, 1],
|
|
width: 2
|
|
}),
|
|
fill: new _ol_style_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 _ol_style_Style_({
|
|
fill: new _ol_style_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 _ol_style_Style_({
|
|
stroke: new _ol_style_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('canvas');
|
|
var layer = new VectorLayer({
|
|
source: source
|
|
});
|
|
map.addLayer(layer);
|
|
|
|
var 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.setDeclutter(true);
|
|
layer.setStyle(function(feature) {
|
|
return new _ol_style_Style_({
|
|
text: new _ol_style_Text_({
|
|
text: feature.get('text'),
|
|
font: '12px sans-serif'
|
|
})
|
|
});
|
|
});
|
|
|
|
map.once('postrender', function() {
|
|
var 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 with renderMode: \'image\'', function(done) {
|
|
createMap('canvas');
|
|
var layer = new VectorLayer({
|
|
renderMode: 'image',
|
|
source: source
|
|
});
|
|
map.addLayer(layer);
|
|
|
|
var 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.setDeclutter(true);
|
|
layer.setStyle(function(feature) {
|
|
return new _ol_style_Style_({
|
|
text: new _ol_style_Text_({
|
|
text: feature.get('text'),
|
|
font: '12px sans-serif'
|
|
})
|
|
});
|
|
});
|
|
|
|
map.once('postrender', function() {
|
|
var 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('canvas');
|
|
var layer = new VectorLayer({
|
|
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.setDeclutter(true);
|
|
layer.setStyle(function(feature) {
|
|
return new _ol_style_Style_({
|
|
zIndex: feature.get('zIndex'),
|
|
text: new _ol_style_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('canvas');
|
|
var layer = new VectorLayer({
|
|
source: source
|
|
});
|
|
map.addLayer(layer);
|
|
|
|
var 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.setDeclutter(true);
|
|
layer.setStyle(function(feature) {
|
|
return new _ol_style_Style_({
|
|
image: new _ol_style_Circle_({
|
|
radius: 15,
|
|
stroke: new _ol_style_Stroke_({
|
|
color: 'blue'
|
|
})
|
|
})
|
|
});
|
|
});
|
|
|
|
map.once('postrender', function() {
|
|
var 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 with renderMode: \'image\'', function(done) {
|
|
createMap('canvas');
|
|
var layer = new VectorLayer({
|
|
renderMode: 'image',
|
|
source: source
|
|
});
|
|
map.addLayer(layer);
|
|
|
|
var 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.setDeclutter(true);
|
|
layer.setStyle(function(feature) {
|
|
return new _ol_style_Style_({
|
|
image: new _ol_style_Circle_({
|
|
radius: 15,
|
|
stroke: new _ol_style_Stroke_({
|
|
color: 'blue'
|
|
})
|
|
})
|
|
});
|
|
});
|
|
|
|
map.once('postrender', function() {
|
|
var 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('canvas');
|
|
var layer = new VectorLayer({
|
|
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.setDeclutter(true);
|
|
layer.setStyle(function(feature) {
|
|
return new _ol_style_Style_({
|
|
zIndex: feature.get('zIndex'),
|
|
image: new _ol_style_Circle_({
|
|
radius: 15,
|
|
stroke: new _ol_style_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('canvas');
|
|
var layer = new VectorLayer({
|
|
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.setDeclutter(true);
|
|
layer.setStyle(function(feature) {
|
|
return new _ol_style_Style_({
|
|
image: new _ol_style_Circle_({
|
|
radius: 5,
|
|
stroke: new _ol_style_Stroke_({
|
|
color: 'blue'
|
|
})
|
|
}),
|
|
text: new _ol_style_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('canvas');
|
|
var layer = new VectorLayer({
|
|
source: source
|
|
});
|
|
map.addLayer(layer);
|
|
|
|
var point = new Feature(new Point(center));
|
|
point.setStyle(new _ol_style_Style_({
|
|
image: new _ol_style_Circle_({
|
|
radius: 8,
|
|
stroke: new _ol_style_Stroke_({
|
|
color: 'blue'
|
|
})
|
|
})
|
|
}));
|
|
var line = new Feature(new LineString([
|
|
[center[0] - 650, center[1] - 200],
|
|
[center[0] + 650, center[1] - 200]
|
|
]));
|
|
line.setStyle(new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({
|
|
color: '#CCC',
|
|
width: 12
|
|
}),
|
|
text: new _ol_style_Text_({
|
|
placement: 'line',
|
|
text: 'east-west',
|
|
font: '12px sans-serif'
|
|
})
|
|
}));
|
|
|
|
source.addFeature(point);
|
|
source.addFeature(line);
|
|
|
|
layer.setDeclutter(true);
|
|
|
|
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 renderMode: \'image\'', function(done) {
|
|
createMap('canvas');
|
|
var layer = new VectorLayer({
|
|
source: source
|
|
});
|
|
map.addLayer(layer);
|
|
|
|
var point = new Feature(new Point(center));
|
|
point.setStyle(new _ol_style_Style_({
|
|
image: new _ol_style_Circle_({
|
|
radius: 8,
|
|
stroke: new _ol_style_Stroke_({
|
|
color: 'blue'
|
|
})
|
|
})
|
|
}));
|
|
var line = new Feature(new LineString([
|
|
[center[0] - 650, center[1] - 200],
|
|
[center[0] + 650, center[1] - 200]
|
|
]));
|
|
line.setStyle(new _ol_style_Style_({
|
|
stroke: new _ol_style_Stroke_({
|
|
color: '#CCC',
|
|
width: 12
|
|
}),
|
|
text: new _ol_style_Text_({
|
|
placement: 'line',
|
|
text: 'east-west',
|
|
font: '12px sans-serif'
|
|
})
|
|
}));
|
|
|
|
source.addFeature(point);
|
|
source.addFeature(line);
|
|
|
|
layer.setDeclutter(true);
|
|
|
|
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('canvas');
|
|
var layer = new VectorLayer({
|
|
source: source
|
|
});
|
|
map.addLayer(layer);
|
|
|
|
var point = new Feature(new Point(center));
|
|
point.setStyle(new _ol_style_Style_({
|
|
zIndex: 2,
|
|
image: new _ol_style_Circle_({
|
|
radius: 8,
|
|
stroke: new _ol_style_Stroke_({
|
|
color: 'blue'
|
|
})
|
|
})
|
|
}));
|
|
var line = new Feature(new LineString([
|
|
[center[0] - 650, center[1] - 200],
|
|
[center[0] + 650, center[1] - 200]
|
|
]));
|
|
line.setStyle(new _ol_style_Style_({
|
|
zIndex: 1,
|
|
stroke: new _ol_style_Stroke_({
|
|
color: '#CCC',
|
|
width: 12
|
|
}),
|
|
text: new _ol_style_Text_({
|
|
placement: 'line',
|
|
text: 'east-west',
|
|
font: '12px sans-serif'
|
|
})
|
|
}));
|
|
|
|
source.addFeature(point);
|
|
source.addFeature(line);
|
|
|
|
layer.setDeclutter(true);
|
|
|
|
map.once('postrender', function() {
|
|
var 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);
|
|
});
|
|
});
|
|
});
|
|
|
|
});
|