Add renderMode option to ol.layer.Vector
This also deprecates ol.source.ImageVector.
This commit is contained in:
Andreas Hocevar
@@ -101,6 +101,33 @@ describe('ol.rendering.layer.Vector', function() {
|
||||
});
|
||||
});
|
||||
|
||||
it('renders opacity correctly with renderMode: \'image\'', function(done) {
|
||||
createMap('canvas');
|
||||
var smallLine = new ol.Feature(new ol.geom.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 ol.layer.Vector({
|
||||
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 ol.Feature(new ol.geom.LineString([
|
||||
@@ -140,6 +167,46 @@ describe('ol.rendering.layer.Vector', function() {
|
||||
});
|
||||
});
|
||||
|
||||
it('renders transparent layers correctly with renderMode: \'image\'', function(done) {
|
||||
createMap('canvas');
|
||||
var smallLine = new ol.Feature(new ol.geom.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 ol.Feature(new ol.geom.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 ol.layer.Vector({
|
||||
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);
|
||||
@@ -160,6 +227,27 @@ describe('ol.rendering.layer.Vector', function() {
|
||||
});
|
||||
});
|
||||
|
||||
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 ol.layer.Vector({
|
||||
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('renders fill/stroke batches correctly with the canvas renderer', function(done) {
|
||||
createMap('canvas');
|
||||
source = new ol.source.Vector({
|
||||
@@ -510,6 +598,47 @@ describe('ol.rendering.layer.Vector', function() {
|
||||
});
|
||||
});
|
||||
|
||||
it('declutters text with renderMode: \'image\'', function(done) {
|
||||
createMap('canvas');
|
||||
var layer = new ol.layer.Vector({
|
||||
renderMode: 'image',
|
||||
source: source
|
||||
});
|
||||
map.addLayer(layer);
|
||||
|
||||
var centerFeature = new ol.Feature({
|
||||
geometry: new ol.geom.Point(center),
|
||||
text: 'center'
|
||||
});
|
||||
source.addFeature(centerFeature);
|
||||
source.addFeature(new ol.Feature({
|
||||
geometry: new ol.geom.Point([center[0] - 550, center[1]]),
|
||||
text: 'west'
|
||||
}));
|
||||
source.addFeature(new ol.Feature({
|
||||
geometry: new ol.geom.Point([center[0] + 550, 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 ol.layer.Vector({
|
||||
@@ -589,6 +718,46 @@ describe('ol.rendering.layer.Vector', function() {
|
||||
});
|
||||
});
|
||||
|
||||
it('declutters images with renderMode: \'image\'', function(done) {
|
||||
createMap('canvas');
|
||||
var layer = new ol.layer.Vector({
|
||||
renderMode: 'image',
|
||||
source: source
|
||||
});
|
||||
map.addLayer(layer);
|
||||
|
||||
var centerFeature = new ol.Feature({
|
||||
geometry: new ol.geom.Point(center)
|
||||
});
|
||||
source.addFeature(centerFeature);
|
||||
source.addFeature(new ol.Feature({
|
||||
geometry: new ol.geom.Point([center[0] - 550, center[1]])
|
||||
}));
|
||||
source.addFeature(new ol.Feature({
|
||||
geometry: new ol.geom.Point([center[0] + 550, 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 ol.layer.Vector({
|
||||
@@ -715,6 +884,49 @@ describe('ol.rendering.layer.Vector', function() {
|
||||
});
|
||||
});
|
||||
|
||||
it('declutters text along lines and images with renderMode: \'image\'', function(done) {
|
||||
createMap('canvas');
|
||||
var layer = new ol.layer.Vector({
|
||||
source: source
|
||||
});
|
||||
map.addLayer(layer);
|
||||
|
||||
var point = new ol.Feature(new ol.geom.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 ol.Feature(new ol.geom.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 ol.layer.Vector({
|
||||
|
||||
Reference in New Issue
Block a user