diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md index 42c63f6852c..7082a36aa66 100644 --- a/changelog/upgrade-notes.md +++ b/changelog/upgrade-notes.md @@ -2,6 +2,27 @@ ### Next release +#### `ol.source.VectorTile` no longer requires a `tileGrid` option + +By default, the `ol.source.VectorTile` constructor creates an XYZ tile grid (in Web Mercator) for 512 pixel tiles and assumes a max zoom level of 22. If you were creating a vector tile source with an explicit `tileGrid` option, you can now remove this. + +Before: +```js +var source = new ol.source.VectorTile({ + tileGrid: ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22}), + url: url +}); +``` + +After: +```js +var source = new ol.source.VectorTile({ + url: url +}); +``` + +If you need to change the max zoom level, you can pass the source a `maxZoom` option. If you need to change the tile size, you can pass the source a `tileSize` option. If you need a completely custom tile grid, you can still pass the source a `tileGrid` option. + #### `ol.interaction.Modify` deletes with `alt` key only To delete features with the modify interaction, press the `alt` key while clicking on an existing vertex. If you want to configure the modify interaction with a different delete condition, use the `deleteCondition` option. For example, to allow deletion on a single click with no modifier keys, configure the interaction like this: diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js index 892c4795b4d..2252f649dfe 100644 --- a/examples/geojson-vt.js +++ b/examples/geojson-vt.js @@ -6,7 +6,6 @@ goog.require('ol.source.OSM'); goog.require('ol.source.VectorTile'); goog.require('ol.layer.Tile'); goog.require('ol.layer.VectorTile'); -goog.require('ol.tilegrid'); goog.require('ol.proj.Projection'); @@ -77,7 +76,6 @@ fetch(url).then(function(response) { }); var vectorSource = new ol.source.VectorTile({ format: new ol.format.GeoJSON(), - tileGrid: ol.tilegrid.createXYZ(), tileLoadFunction: function(tile) { var format = tile.getFormat(); var tileCoord = tile.getTileCoord(); diff --git a/examples/mapbox-vector-tiles.js b/examples/mapbox-vector-tiles.js index 752ee245ab8..7512f12f276 100644 --- a/examples/mapbox-vector-tiles.js +++ b/examples/mapbox-vector-tiles.js @@ -10,7 +10,6 @@ goog.require('ol.style.Icon'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); goog.require('ol.style.Text'); -goog.require('ol.tilegrid'); var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg'; @@ -23,7 +22,6 @@ var map = new ol.Map({ '© ' + 'OpenStreetMap contributors', format: new ol.format.MVT(), - tileGrid: ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22}), url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' + '{z}/{x}/{y}.vector.pbf?access_token=' + key }), diff --git a/examples/osm-vector-tiles.js b/examples/osm-vector-tiles.js index fa837c2a182..846a06d2190 100644 --- a/examples/osm-vector-tiles.js +++ b/examples/osm-vector-tiles.js @@ -7,8 +7,6 @@ goog.require('ol.source.VectorTile'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); -goog.require('ol.tilegrid'); - var key = 'vector-tiles-5eJz6JX'; @@ -70,7 +68,7 @@ var map = new ol.Map({ layerName: 'layer', layers: ['water', 'roads', 'buildings'] }), - tileGrid: ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 19}), + maxZoom: 19, url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key }), style: function(feature, resolution) { diff --git a/src/ol/source/vectortile.js b/src/ol/source/vectortile.js index fc24c8d0719..cfd8eb10797 100644 --- a/src/ol/source/vectortile.js +++ b/src/ol/source/vectortile.js @@ -27,16 +27,26 @@ goog.require('ol.source.UrlTile'); * @api */ ol.source.VectorTile = function(options) { + var projection = options.projection || 'EPSG:3857'; + + var extent = options.extent || ol.tilegrid.extentFromProjection(projection); + + var tileGrid = options.tileGrid || ol.tilegrid.createXYZ({ + extent: extent, + maxZoom: options.maxZoom || 22, + minZoom: options.minZoom, + tileSize: options.tileSize || 512 + }); ol.source.UrlTile.call(this, { attributions: options.attributions, cacheSize: options.cacheSize !== undefined ? options.cacheSize : 128, - extent: options.extent, + extent: extent, logo: options.logo, opaque: false, - projection: options.projection, + projection: projection, state: options.state, - tileGrid: options.tileGrid, + tileGrid: tileGrid, tileLoadFunction: options.tileLoadFunction ? options.tileLoadFunction : ol.VectorImageTile.defaultLoadFunction, tileUrlFunction: options.tileUrlFunction, diff --git a/test/spec/ol/source/vectortile.test.js b/test/spec/ol/source/vectortile.test.js index 273a66f1375..1f5c2d06e4e 100644 --- a/test/spec/ol/source/vectortile.test.js +++ b/test/spec/ol/source/vectortile.test.js @@ -6,13 +6,11 @@ goog.require('ol.proj'); goog.require('ol.source.VectorTile'); goog.require('ol.tilegrid'); - describe('ol.source.VectorTile', function() { var format = new ol.format.MVT(); var source = new ol.source.VectorTile({ format: format, - tileGrid: ol.tilegrid.createXYZ({tileSize: 512}), tilePixelRatio: 8, url: 'spec/ol/data/{z}-{x}-{y}.vector.pbf' }); @@ -22,9 +20,16 @@ describe('ol.source.VectorTile', function() { it('sets the format on the instance', function() { expect(source.format_).to.equal(format); }); + it('uses ol.VectorTile as default tileClass', function() { expect(source.tileClass).to.equal(ol.VectorTile); }); + + it('creates a 512 XYZ tilegrid by default', function() { + var tileGrid = ol.tilegrid.createXYZ({tileSize: 512}); + expect(source.tileGrid.tileSize_).to.equal(tileGrid.tileSize_); + expect(source.tileGrid.extent_).to.equal(tileGrid.extent_); + }); }); describe('#getTile()', function() {