Merge pull request #7187 from ahocevar/simpler-tile-pixels
Simpler tile pixel handling and faster parsing for ol.format.MVT vector tiles
This commit is contained in:
Andreas Hocevar
GitHub
@@ -1,11 +1,11 @@
|
||||
|
||||
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.ext.PBF');
|
||||
goog.require('ol.ext.vectortile.VectorTile');
|
||||
goog.require('ol.extent');
|
||||
goog.require('ol.format.MVT');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.geom.Polygon');
|
||||
goog.require('ol.geom.MultiPolygon');
|
||||
goog.require('ol.render.Feature');
|
||||
|
||||
where('ArrayBuffer.isView').describe('ol.format.MVT', function() {
|
||||
@@ -41,36 +41,23 @@ where('ArrayBuffer.isView').describe('ol.format.MVT', function() {
|
||||
featureClass: ol.Feature,
|
||||
layers: ['poi_label']
|
||||
});
|
||||
var pbf = new ol.ext.PBF(data);
|
||||
var tile = new ol.ext.vectortile.VectorTile(pbf);
|
||||
var geometry, rawGeometry;
|
||||
var geometry;
|
||||
|
||||
rawGeometry = tile.layers['poi_label'].feature(0).loadGeometry();
|
||||
geometry = format.readFeatures(data)[0]
|
||||
.getGeometry();
|
||||
geometry = format.readFeatures(data)[0].getGeometry();
|
||||
expect(geometry.getType()).to.be('Point');
|
||||
expect(geometry.getCoordinates())
|
||||
.to.eql([rawGeometry[0][0].x, rawGeometry[0][0].y]);
|
||||
expect(geometry.getCoordinates()).to.eql([-1210, 2681]);
|
||||
|
||||
rawGeometry = tile.layers['water'].feature(0).loadGeometry();
|
||||
format.setLayers(['water']);
|
||||
geometry = format.readFeatures(data)[0]
|
||||
.getGeometry();
|
||||
geometry = format.readFeatures(data)[0].getGeometry();
|
||||
expect(geometry.getType()).to.be('Polygon');
|
||||
expect(rawGeometry[0].length)
|
||||
.to.equal(geometry.getCoordinates()[0].length);
|
||||
expect(geometry.getCoordinates()[0][0])
|
||||
.to.eql([rawGeometry[0][0].x, rawGeometry[0][0].y]);
|
||||
expect(geometry.getCoordinates()[0].length).to.be(10);
|
||||
expect(geometry.getCoordinates()[0][0]).to.eql([1007, 2302]);
|
||||
|
||||
rawGeometry = tile.layers['barrier_line'].feature(0).loadGeometry();
|
||||
format.setLayers(['barrier_line']);
|
||||
geometry = format.readFeatures(data)[0]
|
||||
.getGeometry();
|
||||
geometry = format.readFeatures(data)[0].getGeometry();
|
||||
expect(geometry.getType()).to.be('MultiLineString');
|
||||
expect(rawGeometry[1].length)
|
||||
.to.equal(geometry.getCoordinates()[1].length);
|
||||
expect(geometry.getCoordinates()[1][0])
|
||||
.to.eql([rawGeometry[1][0].x, rawGeometry[1][0].y]);
|
||||
expect(geometry.getCoordinates()[1].length).to.be(6);
|
||||
expect(geometry.getCoordinates()[1][0]).to.eql([4160, 3489]);
|
||||
});
|
||||
|
||||
it('parses id property', function() {
|
||||
@@ -102,7 +89,7 @@ where('ArrayBuffer.isView').describe('ol.format.MVT', function() {
|
||||
|
||||
describe('ol.format.MVT', function() {
|
||||
|
||||
describe('#readFeature_', function() {
|
||||
describe('#createFeature_', function() {
|
||||
it('accepts a geometryName', function() {
|
||||
var format = new ol.format.MVT({
|
||||
featureClass: ol.Feature,
|
||||
@@ -114,16 +101,99 @@ describe('ol.format.MVT', function() {
|
||||
geometry: 'foo'
|
||||
},
|
||||
type: 1,
|
||||
loadGeometry: function() {
|
||||
return [[0, 0]];
|
||||
layer: {
|
||||
name: 'layer1'
|
||||
}
|
||||
};
|
||||
var feature = format.readFeature_(rawFeature, 'mapbox');
|
||||
var readRawGeometry_ = ol.format.MVT.readRawGeometry_;
|
||||
ol.format.MVT.readRawGeometry_ = function({}, rawFeature, flatCoordinates, ends) {
|
||||
flatCoordinates.push(0, 0);
|
||||
ends.push(2);
|
||||
};
|
||||
var feature = format.createFeature_({}, rawFeature);
|
||||
ol.format.MVT.readRawGeometry_ = readRawGeometry_;
|
||||
var geometry = feature.getGeometry();
|
||||
expect(geometry).to.be.a(ol.geom.Point);
|
||||
expect(feature.get('myGeom')).to.equal(geometry);
|
||||
expect(feature.get('geometry')).to.be('foo');
|
||||
});
|
||||
|
||||
it('detects a Polygon', function() {
|
||||
var format = new ol.format.MVT({
|
||||
featureClass: ol.Feature
|
||||
});
|
||||
var rawFeature = {
|
||||
type: 3,
|
||||
properties: {},
|
||||
layer: {
|
||||
name: 'layer1'
|
||||
}
|
||||
};
|
||||
var readRawGeometry_ = ol.format.MVT.readRawGeometry_;
|
||||
ol.format.MVT.readRawGeometry_ = function({}, rawFeature, flatCoordinates, ends) {
|
||||
flatCoordinates.push(0, 0, 3, 0, 3, 3, 3, 0, 0, 0);
|
||||
flatCoordinates.push(1, 1, 1, 2, 2, 2, 2, 1, 1, 1);
|
||||
ends.push(10, 20);
|
||||
};
|
||||
var feature = format.createFeature_({}, rawFeature);
|
||||
ol.format.MVT.readRawGeometry_ = readRawGeometry_;
|
||||
var geometry = feature.getGeometry();
|
||||
expect(geometry).to.be.a(ol.geom.Polygon);
|
||||
});
|
||||
|
||||
it('detects a MultiPolygon', function() {
|
||||
var format = new ol.format.MVT({
|
||||
featureClass: ol.Feature
|
||||
});
|
||||
var rawFeature = {
|
||||
type: 3,
|
||||
properties: {},
|
||||
layer: {
|
||||
name: 'layer1'
|
||||
}
|
||||
};
|
||||
var readRawGeometry_ = ol.format.MVT.readRawGeometry_;
|
||||
ol.format.MVT.readRawGeometry_ = function({}, rawFeature, flatCoordinates, ends) {
|
||||
flatCoordinates.push(0, 0, 1, 0, 1, 1, 1, 0, 0, 0);
|
||||
flatCoordinates.push(1, 1, 2, 1, 2, 2, 2, 1, 1, 1);
|
||||
ends.push(10, 20);
|
||||
};
|
||||
var feature = format.createFeature_({}, rawFeature);
|
||||
ol.format.MVT.readRawGeometry_ = readRawGeometry_;
|
||||
var geometry = feature.getGeometry();
|
||||
expect(geometry).to.be.a(ol.geom.MultiPolygon);
|
||||
});
|
||||
|
||||
it('creates ol.render.Feature instances', function() {
|
||||
var format = new ol.format.MVT();
|
||||
var rawFeature = {
|
||||
type: 3,
|
||||
properties: {
|
||||
foo: 'bar'
|
||||
},
|
||||
layer: {
|
||||
name: 'layer1'
|
||||
}
|
||||
};
|
||||
var readRawGeometry_ = ol.format.MVT.readRawGeometry_;
|
||||
var createdFlatCoordinates;
|
||||
var createdEnds;
|
||||
ol.format.MVT.readRawGeometry_ = function({}, rawFeature, flatCoordinates, ends) {
|
||||
flatCoordinates.push(0, 0, 1, 0, 1, 1, 1, 0, 0, 0);
|
||||
flatCoordinates.push(1, 1, 2, 1, 2, 2, 2, 1, 1, 1);
|
||||
createdFlatCoordinates = flatCoordinates;
|
||||
ends.push(10, 20);
|
||||
createdEnds = ends;
|
||||
};
|
||||
var feature = format.createFeature_({}, rawFeature);
|
||||
ol.format.MVT.readRawGeometry_ = readRawGeometry_;
|
||||
expect(feature).to.be.a(ol.render.Feature);
|
||||
expect(feature.getType()).to.be('Polygon');
|
||||
expect(feature.getFlatCoordinates()).to.equal(createdFlatCoordinates);
|
||||
expect(feature.getEnds()).to.equal(createdEnds);
|
||||
expect(feature.get('foo')).to.be('bar');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -13,6 +13,7 @@ goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.VectorTile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.proj.Projection');
|
||||
goog.require('ol.render.Feature');
|
||||
goog.require('ol.renderer.canvas.VectorTileLayer');
|
||||
goog.require('ol.source.VectorTile');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -24,7 +25,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
|
||||
|
||||
describe('constructor', function() {
|
||||
|
||||
var map, layer, source, feature1, feature2, target, tileCallback;
|
||||
var map, layer, source, feature1, feature2, feature3, target, tileCallback;
|
||||
|
||||
beforeEach(function() {
|
||||
tileCallback = function() {};
|
||||
@@ -51,11 +52,12 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
|
||||
})];
|
||||
feature1 = new ol.Feature(new ol.geom.Point([1, -1]));
|
||||
feature2 = new ol.Feature(new ol.geom.Point([0, 0]));
|
||||
feature3 = new ol.render.Feature('Point', [1, -1], []);
|
||||
feature2.setStyle(featureStyle);
|
||||
var TileClass = function() {
|
||||
ol.VectorTile.apply(this, arguments);
|
||||
this.setState('loaded');
|
||||
this.setFeatures([feature1, feature2]);
|
||||
this.setFeatures([feature1, feature2, feature3]);
|
||||
this.setProjection(ol.proj.get('EPSG:4326'));
|
||||
tileCallback(this);
|
||||
};
|
||||
@@ -106,7 +108,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
|
||||
it('does not render replays for pure image rendering', function() {
|
||||
layer.renderMode_ = 'image';
|
||||
var spy = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
|
||||
'getReplayTransform_');
|
||||
'getTransform');
|
||||
map.renderSync();
|
||||
expect(spy.callCount).to.be(0);
|
||||
spy.restore();
|
||||
@@ -114,7 +116,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
|
||||
|
||||
it('renders both replays and images for hybrid rendering', function() {
|
||||
var spy1 = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
|
||||
'getReplayTransform_');
|
||||
'getTransform');
|
||||
var spy2 = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
|
||||
'renderTileImage_');
|
||||
map.renderSync();
|
||||
@@ -130,7 +132,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
|
||||
renderer: function() {}
|
||||
}));
|
||||
var spy = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
|
||||
'getReplayTransform_');
|
||||
'getTransform');
|
||||
map.renderSync();
|
||||
expect(spy.callCount).to.be(1);
|
||||
spy.restore();
|
||||
@@ -142,6 +144,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
|
||||
map.renderSync();
|
||||
expect(spy.getCall(0).args[2]).to.be(layer.getStyle());
|
||||
expect(spy.getCall(1).args[2]).to.be(feature2.getStyle());
|
||||
spy.restore();
|
||||
});
|
||||
|
||||
it('transforms geometries when tile and view projection are different', function() {
|
||||
@@ -155,16 +158,17 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
|
||||
ol.proj.fromLonLat([1, -1]));
|
||||
});
|
||||
|
||||
it('leaves geometries untouched when units are tile-pixels', function() {
|
||||
var proj = new ol.proj.Projection({code: '', units: 'tile-pixels'});
|
||||
it('Geometries are transformed from tile-pixels', function() {
|
||||
var proj = new ol.proj.Projection({code: 'EPSG:3857', units: 'tile-pixels'});
|
||||
var tile;
|
||||
tileCallback = function(t) {
|
||||
t.setProjection(proj);
|
||||
tile = t;
|
||||
};
|
||||
map.renderSync();
|
||||
expect(tile.getProjection()).to.equal(proj);
|
||||
expect(feature1.getGeometry().getCoordinates()).to.eql([1, -1]);
|
||||
expect(tile.getProjection()).to.equal(ol.proj.get('EPSG:3857'));
|
||||
expect(feature1.getGeometry().getCoordinates()).to.eql([-20027724.40316874, 20047292.282409746]);
|
||||
expect(feature3.flatCoordinates_).to.eql([-20027724.40316874, 20047292.282409746]);
|
||||
});
|
||||
|
||||
it('works for multiple layers that use the same source', function() {
|
||||
@@ -189,14 +193,6 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
|
||||
spy2.restore();
|
||||
});
|
||||
|
||||
it('uses the extent of the source tile', function() {
|
||||
var renderer = map.getRenderer().getLayerRenderer(layer);
|
||||
var tile = new ol.VectorTile([0, 0, 0], 2);
|
||||
tile.setExtent([0, 0, 4096, 4096]);
|
||||
var tilePixelRatio = renderer.getTilePixelRatio_(source, tile);
|
||||
expect(tilePixelRatio).to.be(16);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('#prepareFrame', function() {
|
||||
|
||||
Reference in New Issue
Block a user