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

Merge pull request #39 from tsauerwein/webgl-point-hit-detection-atlas

Browse Source 
[webgl-point] Add hit-detection images of symbols to separate atlas
This commit is contained in:
Tobias Sauerwein
2014-11-21 11:37:48 +01:00
parent 44782c59a5 fb8af71f25
commit ac24b615c3
8 changed files with 464 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
test/spec/ol/style/atlasmanager.test.js
View File

@@ -189,46 +189,73 @@ describe('ol.style.AtlasManager', function() {
var manager = new ol.style.AtlasManager({size: 128});
var info = manager.add('1', 32, 32, defaultRender);
expect(info).to.eql(
{offsetX: 1, offsetY: 1, image: manager.atlases_[0].canvas_});
expect(info).to.eql({
offsetX: 1, offsetY: 1, image: manager.atlases_[0].canvas_,
hitOffsetX: undefined, hitOffsetY: undefined, hitImage: undefined});
expect(manager.getInfo('1')).to.eql(info);
});
it('adds one entry (also to the hit detection atlas)', function() {
var manager = new ol.style.AtlasManager({size: 128});
var info = manager.add('1', 32, 32, defaultRender, defaultRender);
expect(info).to.eql({
offsetX: 1, offsetY: 1, image: manager.atlases_[0].canvas_,
hitOffsetX: 1, hitOffsetY: 1,
hitImage: manager.hitAtlases_[0].canvas_});
expect(manager.getInfo('1')).to.eql(info);
});
it('creates a new atlas if needed', function() {
var manager = new ol.style.AtlasManager({size: 128});
expect(manager.add('1', 100, 100, defaultRender)).to.be.ok();
var info = manager.add('2', 100, 100, defaultRender);
expect(manager.add('1', 100, 100, defaultRender, defaultRender))
.to.be.ok();
var info = manager.add('2', 100, 100, defaultRender, defaultRender);
expect(info).to.be.ok();
expect(info.image.width).to.eql(256);
expect(manager.atlases_).to.have.length(2);
expect(info.hitImage.width).to.eql(256);
expect(manager.hitAtlases_).to.have.length(2);
});
it('creates new atlases until one is large enough', function() {
var manager = new ol.style.AtlasManager({size: 128});
expect(manager.add('1', 100, 100, defaultRender)).to.be.ok();
expect(manager.add('1', 100, 100, defaultRender, defaultRender))
.to.be.ok();
expect(manager.atlases_).to.have.length(1);
var info = manager.add('2', 500, 500, defaultRender);
expect(manager.hitAtlases_).to.have.length(1);
var info = manager.add('2', 500, 500, defaultRender, defaultRender);
expect(info).to.be.ok();
expect(info.image.width).to.eql(512);
expect(manager.atlases_).to.have.length(3);
expect(info.hitImage.width).to.eql(512);
expect(manager.hitAtlases_).to.have.length(3);
});
it('checks all existing atlases and create a new if needed', function() {
var manager = new ol.style.AtlasManager({size: 128});
expect(manager.add('1', 100, 100, defaultRender)).to.be.ok();
expect(manager.add('2', 100, 100, defaultRender)).to.be.ok();
expect(manager.add('1', 100, 100, defaultRender, defaultRender))
.to.be.ok();
expect(manager.add('2', 100, 100, defaultRender, defaultRender))
.to.be.ok();
expect(manager.atlases_).to.have.length(2);
var info = manager.add(3, 500, 500, defaultRender);
expect(manager.hitAtlases_).to.have.length(2);
var info = manager.add(3, 500, 500, defaultRender, defaultRender);
expect(info).to.be.ok();
expect(info.image.width).to.eql(512);
expect(manager.atlases_).to.have.length(3);
expect(info.hitImage.width).to.eql(512);
expect(manager.hitAtlases_).to.have.length(3);
});
it('returns null if the size exceeds the maximum size', function() {
var manager = new ol.style.AtlasManager({size: 128});
expect(manager.add('1', 100, 100, defaultRender)).to.be.ok();
expect(manager.add('2', 2048, 2048, defaultRender)).to.eql(null);
expect(manager.add('1', 100, 100, defaultRender, defaultRender))
.to.be.ok();
expect(manager.add('2', 2048, 2048, defaultRender, defaultRender))
.to.eql(null);
});
});

50
test/spec/ol/style/circlestyle.test.js
View File

@@ -5,18 +5,40 @@ describe('ol.style.Circle', function() {
describe('#constructor', function() {
it('creates a canvas if no atlas is used', function() {
it('creates a canvas if no atlas is used (no fill-style)', function() {
var style = new ol.style.Circle({radius: 10});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([21, 21]);
expect(style.getOrigin()).to.eql([0, 0]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// hit-detection image is created, because no fill style is set
expect(style.getImage()).to.not.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
expect(style.getHitDetectionOrigin()).to.eql([0, 0]);
});
it('adds itself to an atlas manager', function() {
it('creates a canvas if no atlas is used (fill-style)', function() {
var style = new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: '#FFFF00'
})
});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([21, 21]);
expect(style.getOrigin()).to.eql([0, 0]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// no hit-detection image is created, because fill style is set
expect(style.getImage()).to.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
expect(style.getHitDetectionOrigin()).to.eql([0, 0]);
});
it('adds itself to an atlas manager (no fill-style)', function() {
var atlasManager = new ol.style.AtlasManager({size: 512});
var style = new ol.style.Circle({radius: 10, atlasManager: atlasManager});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
@@ -24,8 +46,32 @@ describe('ol.style.Circle', function() {
expect(style.getImageSize()).to.eql([512, 512]);
expect(style.getOrigin()).to.eql([1, 1]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// hit-detection image is created, because no fill style is set
expect(style.getImage()).to.not.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([512, 512]);
expect(style.getHitDetectionOrigin()).to.eql([1, 1]);
});
it('adds itself to an atlas manager (fill-style)', function() {
var atlasManager = new ol.style.AtlasManager({size: 512});
var style = new ol.style.Circle({
radius: 10,
atlasManager: atlasManager,
fill: new ol.style.Fill({
color: '#FFFF00'
})
});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([512, 512]);
expect(style.getOrigin()).to.eql([1, 1]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// no hit-detection image is created, because fill style is set
expect(style.getImage()).to.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([512, 512]);
expect(style.getHitDetectionOrigin()).to.eql([1, 1]);
});
});

50
test/spec/ol/style/regularshapestyle.test.js
View File

@@ -5,18 +5,40 @@ describe('ol.style.RegularShape', function() {
describe('#constructor', function() {
it('creates a canvas if no atlas is used', function() {
it('creates a canvas if no atlas is used (no fill-style)', function() {
var style = new ol.style.RegularShape({radius: 10});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([21, 21]);
expect(style.getOrigin()).to.eql([0, 0]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// hit-detection image is created, because no fill style is set
expect(style.getImage()).to.not.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
expect(style.getHitDetectionOrigin()).to.eql([0, 0]);
});
it('adds itself to an atlas manager', function() {
it('creates a canvas if no atlas is used (fill-style)', function() {
var style = new ol.style.RegularShape({
radius: 10,
fill: new ol.style.Fill({
color: '#FFFF00'
})
});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([21, 21]);
expect(style.getOrigin()).to.eql([0, 0]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// no hit-detection image is created, because fill style is set
expect(style.getImage()).to.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
expect(style.getHitDetectionOrigin()).to.eql([0, 0]);
});
it('adds itself to an atlas manager (no fill-style)', function() {
var atlasManager = new ol.style.AtlasManager({size: 512});
var style = new ol.style.RegularShape(
{radius: 10, atlasManager: atlasManager});
@@ -25,8 +47,32 @@ describe('ol.style.RegularShape', function() {
expect(style.getImageSize()).to.eql([512, 512]);
expect(style.getOrigin()).to.eql([1, 1]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// hit-detection image is created, because no fill style is set
expect(style.getImage()).to.not.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([512, 512]);
expect(style.getHitDetectionOrigin()).to.eql([1, 1]);
});
it('adds itself to an atlas manager (fill-style)', function() {
var atlasManager = new ol.style.AtlasManager({size: 512});
var style = new ol.style.RegularShape({
radius: 10,
atlasManager: atlasManager,
fill: new ol.style.Fill({
color: '#FFFF00'
})
});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([512, 512]);
expect(style.getOrigin()).to.eql([1, 1]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// no hit-detection image is created, because fill style is set
expect(style.getImage()).to.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([512, 512]);
expect(style.getHitDetectionOrigin()).to.eql([1, 1]);
});
});