Use XYZ to indicate OpenStreetMap-style tile grids

This commit is contained in:
Tom Payne
2012-07-20 23:33:59 +02:00
parent 0602942cf8
commit 277c1ea3a6
8 changed files with 101 additions and 77 deletions

View File

@@ -34,9 +34,10 @@ goog.require('ol.dom');
goog.require('ol.dom.LayerRenderer');
goog.require('ol.dom.Map');
goog.require('ol.dom.TileLayerRenderer');
goog.require('ol.tilegrid.createOpenStreetMap');
goog.require('ol.tilegrid.createXYZ');
goog.require('ol.tilelayer.createOpenStreetMap');
goog.require('ol.tilestore.createOpenStreetMap');
goog.require('ol.tilelayer.createXYZ');
goog.require('ol.tilestore.createXYZ');
goog.require('ol.webgl');
goog.require('ol.webgl.LayerRenderer');
goog.require('ol.webgl.Map');

View File

@@ -1,4 +1,4 @@
goog.provide('ol.tilegrid.createOpenStreetMap');
goog.provide('ol.tilegrid.createXYZ');
goog.require('ol.Coordinate');
goog.require('ol.Projection');
@@ -10,7 +10,7 @@ goog.require('ol.TileGrid');
* @param {number} maxZoom Maximum zoom.
* @return {ol.TileGrid} Tile grid.
*/
ol.tilegrid.createOpenStreetMap = function(maxZoom) {
ol.tilegrid.createXYZ = function(maxZoom) {
var resolutions = new Array(maxZoom + 1);
var z;

View File

@@ -2,7 +2,7 @@ goog.provide('ol.tilelayer.createOpenStreetMap');
goog.require('ol.Layer');
goog.require('ol.TileLayer');
goog.require('ol.tilestore.createOpenStreetMap');
goog.require('ol.tilestore.createXYZ');
/**
@@ -10,6 +10,18 @@ goog.require('ol.tilestore.createOpenStreetMap');
* @return {ol.Layer} Layer.
*/
ol.tilelayer.createOpenStreetMap = function(opt_values) {
var store = ol.tilestore.createOpenStreetMap();
var store = ol.tilestore.createXYZ(
18,
[
'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
'http://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
'http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
],
'© ' +
'<a href="http://www.openstreetmap.org">OpenStreetMap</a> ' +
'contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA</a>',
''
);
return new ol.TileLayer(store, opt_values);
};

21
src/ol/tilelayer/xyz.js Normal file
View File

@@ -0,0 +1,21 @@
goog.provide('ol.tilelayer.createXYZ');
goog.require('ol.Layer');
goog.require('ol.TileLayer');
goog.require('ol.tilestore.createXYZ');
/**
* @param {number} maxZoom Maximum zoom.
* @param {Array.<string>} templates Templates.
* @param {string=} opt_attribution Attribution.
* @param {string=} opt_crossOrigin Cross origin.
* @param {Object.<string, *>=} opt_values Values.
* @return {ol.Layer} Layer.
*/
ol.tilelayer.createXYZ =
function(maxZoom, templates, opt_attribution, opt_crossOrigin, opt_values) {
var store = ol.tilestore.createXYZ(
maxZoom, templates, opt_attribution, opt_crossOrigin);
return new ol.TileLayer(store, opt_values);
};

View File

@@ -1,48 +0,0 @@
goog.provide('ol.tilestore.createOpenStreetMap');
goog.require('goog.math');
goog.require('ol.Projection');
goog.require('ol.TileCoord');
goog.require('ol.TileGrid');
goog.require('ol.TileStore');
goog.require('ol.TileUrlFunction');
goog.require('ol.tilegrid.createOpenStreetMap');
/**
* @return {ol.TileStore} Tile store.
*/
ol.tilestore.createOpenStreetMap = function() {
var projection = ol.Projection.getFromCode('EPSG:3857');
var tileGrid = ol.tilegrid.createOpenStreetMap(18);
var tileUrlFunction = ol.TileUrlFunction.withTileCoordTransform(
function(tileCoord) {
var n = 1 << tileCoord.z;
var y = -tileCoord.y - 1;
if (y < 0 || n <= y) {
return null;
} else {
var x = goog.math.modulo(tileCoord.x, n);
return new ol.TileCoord(tileCoord.z, x, y);
}
},
ol.TileUrlFunction.createFromTemplates([
'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
'http://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
'http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
]));
var extent = projection.getExtent();
var attribution =
'&copy; ' +
'<a href="http://www.openstreetmap.org">OpenStreetMap</a> ' +
'contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA</a>';
var crossOrigin = '';
return new ol.TileStore(
projection, tileGrid, tileUrlFunction, extent, attribution, crossOrigin);
};

View File

@@ -1,71 +1,66 @@
goog.require('goog.testing.jsunit');
goog.require('ol.Coordinate');
goog.require('ol.TileCoord');
goog.require('ol.tilestore.createOpenStreetMap');
goog.require('ol.tilestore.createXYZ');
function getTileCoordPart(tileUrl) {
return tileUrl.substr(32, tileUrl.length - 36);
}
function testXYZ() {
function testOpenStreetMap() {
var tileStore = ol.tilestore.createOpenStreetMap(8);
var tileStore = ol.tilestore.createXYZ(6, ['{z}/{x}/{y}']);
var tileGrid = tileStore.getTileGrid();
var coordinate = new ol.Coordinate(829330.2064098881, 5933916.615134273);
var tileUrl;
tileUrl = tileStore.getTileCoordUrl(tileGrid.getTileCoord(0, coordinate));
assertEquals('0/0/0', getTileCoordPart(tileUrl));
assertEquals('0/0/0', tileUrl);
tileUrl = tileStore.getTileCoordUrl(tileGrid.getTileCoord(1, coordinate));
assertEquals('1/1/0', getTileCoordPart(tileUrl));
assertEquals('1/1/0', tileUrl);
tileUrl = tileStore.getTileCoordUrl(tileGrid.getTileCoord(2, coordinate));
assertEquals('2/2/1', getTileCoordPart(tileUrl));
assertEquals('2/2/1', tileUrl);
tileUrl = tileStore.getTileCoordUrl(tileGrid.getTileCoord(3, coordinate));
assertEquals('3/4/2', getTileCoordPart(tileUrl));
assertEquals('3/4/2', tileUrl);
tileUrl = tileStore.getTileCoordUrl(tileGrid.getTileCoord(4, coordinate));
assertEquals('4/8/5', getTileCoordPart(tileUrl));
assertEquals('4/8/5', tileUrl);
tileUrl = tileStore.getTileCoordUrl(tileGrid.getTileCoord(5, coordinate));
assertEquals('5/16/11', getTileCoordPart(tileUrl));
assertEquals('5/16/11', tileUrl);
tileUrl = tileStore.getTileCoordUrl(tileGrid.getTileCoord(6, coordinate));
assertEquals('6/33/22', getTileCoordPart(tileUrl));
assertEquals('6/33/22', tileUrl);
}
function testOpenStreetMapWrapX() {
function testXYZWrapX() {
var tileStore = ol.tilestore.createOpenStreetMap(8);
var tileStore = ol.tilestore.createXYZ(6, ['{z}/{x}/{y}']);
tileUrl = tileStore.getTileCoordUrl(new ol.TileCoord(6, -31, -23));
assertEquals('6/33/22', getTileCoordPart(tileUrl));
assertEquals('6/33/22', tileUrl);
tileUrl = tileStore.getTileCoordUrl(new ol.TileCoord(6, 33, -23));
assertEquals('6/33/22', getTileCoordPart(tileUrl));
assertEquals('6/33/22', tileUrl);
tileUrl = tileStore.getTileCoordUrl(new ol.TileCoord(6, 97, -23));
assertEquals('6/33/22', getTileCoordPart(tileUrl));
assertEquals('6/33/22', tileUrl);
}
function testOpenStreetMapCropY() {
function testXYZCropY() {
var tileStore = ol.tilestore.createOpenStreetMap(8);
var tileStore = ol.tilestore.createXYZ(6, ['{z}/{x}/{y}']);
tileUrl = tileStore.getTileCoordUrl(new ol.TileCoord(6, 33, -87));
assertUndefined(tileUrl);
tileUrl = tileStore.getTileCoordUrl(new ol.TileCoord(6, 33, -23));
assertEquals('6/33/22', getTileCoordPart(tileUrl));
assertEquals('6/33/22', tileUrl);
tileUrl = tileStore.getTileCoordUrl(new ol.TileCoord(6, 33, 41));
assertUndefined(tileUrl);

43
src/ol/tilestore/xyz.js Normal file
View File

@@ -0,0 +1,43 @@
goog.provide('ol.tilestore.createXYZ');
goog.require('goog.math');
goog.require('ol.Projection');
goog.require('ol.TileCoord');
goog.require('ol.TileGrid');
goog.require('ol.TileStore');
goog.require('ol.TileUrlFunction');
goog.require('ol.tilegrid.createXYZ');
/**
* @param {number} maxZoom Maximum zoom.
* @param {Array.<string>} templates Templates.
* @param {string=} opt_attribution Attribution.
* @param {string=} opt_crossOrigin Cross origin.
* @return {ol.TileStore} Tile store.
*/
ol.tilestore.createXYZ =
function(maxZoom, templates, opt_attribution, opt_crossOrigin) {
var projection = ol.Projection.getFromCode('EPSG:3857');
var tileGrid = ol.tilegrid.createXYZ(maxZoom);
var tileUrlFunction = ol.TileUrlFunction.withTileCoordTransform(
function(tileCoord) {
var n = 1 << tileCoord.z;
var y = -tileCoord.y - 1;
if (y < 0 || n <= y) {
return null;
} else {
var x = goog.math.modulo(tileCoord.x, n);
return new ol.TileCoord(tileCoord.z, x, y);
}
},
ol.TileUrlFunction.createFromTemplates(templates));
var extent = projection.getExtent();
return new ol.TileStore(projection, tileGrid, tileUrlFunction, extent,
opt_attribution, opt_crossOrigin);
};