Use XYZ to indicate OpenStreetMap-style tile grids
This commit is contained in:
@@ -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');
|
||||
|
||||
@@ -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;
|
||||
@@ -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
21
src/ol/tilelayer/xyz.js
Normal 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);
|
||||
};
|
||||
@@ -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 =
|
||||
'© ' +
|
||||
'<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);
|
||||
|
||||
};
|
||||
|
||||
|
||||
@@ -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
43
src/ol/tilestore/xyz.js
Normal 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);
|
||||
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user