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

Only support square tiles

Browse Source
This commit is contained in:
Tom Payne
2014-01-15 09:45:49 +01:00
parent 50a322208a
commit d5c1e53e48
13 changed files with 89 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/objectliterals.jsdoc
View File

@@ -902,8 +902,8 @@
* @property {ol.Coordinate|undefined} origin Origin.
* @property {Array.<ol.Coordinate>|undefined} origins Origins.
* @property {!Array.<number>} resolutions Resolutions.
* @property {ol.Size|undefined} tileSize Tile size.
* @property {Array.<ol.Size>|undefined} tileSizes Tile sizes.
* @property {number|undefined} tileSize Tile size.
* @property {Array.<number>|undefined} tileSizes Tile sizes.
* @todo stability experimental
*/
@@ -913,8 +913,8 @@
* @property {Array.<ol.Coordinate>|undefined} origins Origins.
* @property {!Array.<number>} resolutions Resolutions.
* @property {!Array.<string>} matrixIds matrix IDs.
* @property {ol.Size|undefined} tileSize Tile size.
* @property {Array.<ol.Size>|undefined} tileSizes Tile sizes.
* @property {number|undefined} tileSize Tile size.
* @property {Array.<number>|undefined} tileSizes Tile sizes.
* @todo stability experimental
*/

30
src/ol/renderer/canvas/canvastilelayerrenderer.js
View File

@@ -191,8 +191,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var tileRange = tileGrid.getTileRangeForExtentAndResolution(
extent, tileResolution);
var canvasWidth = tileSize[0] * tileRange.getWidth();
var canvasHeight = tileSize[1] * tileRange.getHeight();
var canvasWidth = tileSize * tileRange.getWidth();
var canvasHeight = tileSize * tileRange.getHeight();
var canvas, context;
if (goog.isNull(this.canvas_)) {
@@ -231,8 +231,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var canvasTileRange, canvasTileRangeWidth, minX, minY;
if (goog.isNull(this.renderedCanvasTileRange_)) {
canvasTileRangeWidth = canvasWidth / tileSize[0];
var canvasTileRangeHeight = canvasHeight / tileSize[1];
canvasTileRangeWidth = canvasWidth / tileSize;
var canvasTileRangeHeight = canvasHeight / tileSize;
minX = tileRange.minX -
Math.floor((canvasTileRangeWidth - tileRange.getWidth()) / 2);
minY = tileRange.minY -
@@ -299,9 +299,9 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
var i, ii;
for (i = 0, ii = tilesToClear.length; i < ii; ++i) {
tile = tilesToClear[i];
x = tileSize[0] * (tile.tileCoord.x - canvasTileRange.minX);
y = tileSize[1] * (canvasTileRange.maxY - tile.tileCoord.y);
context.clearRect(x, y, tileSize[0], tileSize[1]);
x = tileSize * (tile.tileCoord.x - canvasTileRange.minX);
y = tileSize * (canvasTileRange.maxY - tile.tileCoord.y);
context.clearRect(x, y, tileSize, tileSize);
}
/** @type {Array.<number>} */
@@ -325,18 +325,18 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
(tile.tileCoord.y - canvasTileRange.minY) * canvasTileRangeWidth +
(tile.tileCoord.x - canvasTileRange.minX);
if (this.renderedTiles_[index] != tile) {
x = tileSize[0] * (tile.tileCoord.x - canvasTileRange.minX);
y = tileSize[1] * (canvasTileRange.maxY - tile.tileCoord.y);
x = tileSize * (tile.tileCoord.x - canvasTileRange.minX);
y = tileSize * (canvasTileRange.maxY - tile.tileCoord.y);
tileState = tile.getState();
if (tileState == ol.TileState.EMPTY ||
tileState == ol.TileState.ERROR ||
!opaque) {
context.clearRect(x, y, tileSize[0], tileSize[1]);
context.clearRect(x, y, tileSize, tileSize);
}
if (tileState == ol.TileState.LOADED) {
context.drawImage(tile.getImage(),
tileGutter, tileGutter, tileSize[0], tileSize[1],
x, y, tileSize[0], tileSize[1]);
tileGutter, tileGutter, tileSize, tileSize,
x, y, tileSize, tileSize);
}
this.renderedTiles_[index] = tile;
}
@@ -348,15 +348,15 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent);
x = (tileExtent[0] - origin[0]) / tileResolution;
y = (origin[1] - tileExtent[3]) / tileResolution;
width = scale * tileSize[0];
height = scale * tileSize[1];
width = scale * tileSize;
height = scale * tileSize;
tileState = tile.getState();
if (tileState == ol.TileState.EMPTY || !opaque) {
context.clearRect(x, y, width, height);
}
if (tileState == ol.TileState.LOADED) {
context.drawImage(tile.getImage(),
tileGutter, tileGutter, tileSize[0], tileSize[1],
tileGutter, tileGutter, tileSize, tileSize,
x, y, width, height);
}
interimTileRange =

8
src/ol/renderer/dom/domtilelayerrenderer.js
View File

@@ -334,8 +334,8 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
tileElement = goog.dom.createElement(goog.dom.TagName.DIV);
tileElementStyle = tileElement.style;
tileElementStyle.overflow = 'hidden';
tileElementStyle.width = tileSize[0] + 'px';
tileElementStyle.height = tileSize[1] + 'px';
tileElementStyle.width = tileSize + 'px';
tileElementStyle.height = tileSize + 'px';
imageStyle.position = 'absolute';
imageStyle.left = -tileGutter + 'px';
imageStyle.top = -tileGutter + 'px';
@@ -346,9 +346,9 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
}
tileElementStyle.position = 'absolute';
tileElementStyle.left =
((tileCoord.x - this.tileCoordOrigin_.x) * tileSize[0]) + 'px';
((tileCoord.x - this.tileCoordOrigin_.x) * tileSize) + 'px';
tileElementStyle.top =
((this.tileCoordOrigin_.y - tileCoord.y) * tileSize[1]) + 'px';
((this.tileCoordOrigin_.y - tileCoord.y) * tileSize) + 'px';
if (goog.isNull(this.documentFragment_)) {
this.documentFragment_ = document.createDocumentFragment();
}

34
src/ol/renderer/webgl/webglmaprenderer.js
View File

@@ -76,9 +76,9 @@ ol.renderer.webgl.Map = function(container, map) {
/**
* @private
* @type {ol.Size}
* @type {number}
*/
this.clipTileCanvasSize_ = [0, 0];
this.clipTileCanvasSize_ = 0;
/**
* @private
@@ -170,12 +170,10 @@ ol.renderer.webgl.Map = function(container, map) {
this.tileTextureQueue_.reprioritize();
var element = this.tileTextureQueue_.dequeue();
var tile = /** @type {ol.Tile} */ (element[0]);
var tileWidth = /** @type {number} */ (element[3]);
var tileHeight = /** @type {number} */ (element[4]);
var tileGutter = /** @type {number} */ (element[5]);
this.bindTileTexture(tile,
tileWidth, tileHeight, tileGutter,
goog.webgl.LINEAR, goog.webgl.LINEAR);
var tileSize = /** @type {number} */ (element[3]);
var tileGutter = /** @type {number} */ (element[4]);
this.bindTileTexture(
tile, tileSize, tileGutter, goog.webgl.LINEAR, goog.webgl.LINEAR);
}
}, this);
@@ -193,14 +191,13 @@ goog.inherits(ol.renderer.webgl.Map, ol.renderer.Map);
/**
* @param {ol.Tile} tile Tile.
* @param {number} tileWidth Tile width.
* @param {number} tileHeight Tile height.
* @param {number} tileSize Tile size.
* @param {number} tileGutter Tile gutter.
* @param {number} magFilter Mag filter.
* @param {number} minFilter Min filter.
*/
ol.renderer.webgl.Map.prototype.bindTileTexture =
function(tile, tileWidth, tileHeight, tileGutter, magFilter, minFilter) {
function(tile, tileSize, tileGutter, magFilter, minFilter) {
var gl = this.getGL();
var tileKey = tile.getKey();
if (this.textureCache_.containsKey(tileKey)) {
@@ -222,19 +219,16 @@ ol.renderer.webgl.Map.prototype.bindTileTexture =
gl.bindTexture(goog.webgl.TEXTURE_2D, texture);
if (tileGutter > 0) {
var clipTileCanvas = this.clipTileCanvas_;
var clipTileCanvasSize = this.clipTileCanvasSize_;
var clipTileContext = this.clipTileContext_;
if (clipTileCanvasSize[0] != tileWidth ||
clipTileCanvasSize[1] != tileHeight) {
clipTileCanvas.width = tileWidth;
clipTileCanvas.height = tileHeight;
clipTileCanvasSize[0] = tileWidth;
clipTileCanvasSize[1] = tileHeight;
if (this.clipTileCanvasSize_ != tileSize) {
clipTileCanvas.width = tileSize;
clipTileCanvas.height = tileSize;
this.clipTileCanvasSize_ = tileSize;
} else {
clipTileContext.clearRect(0, 0, tileWidth, tileHeight);
clipTileContext.clearRect(0, 0, tileSize, tileSize);
}
clipTileContext.drawImage(tile.getImage(), tileGutter, tileGutter,
tileWidth, tileHeight, 0, 0, tileWidth, tileHeight);
tileSize, tileSize, 0, 0, tileSize, tileSize);
gl.texImage2D(goog.webgl.TEXTURE_2D, 0,
goog.webgl.RGBA, goog.webgl.RGBA,
goog.webgl.UNSIGNED_BYTE, clipTileCanvas);

14
src/ol/renderer/webgl/webgltilelayerrenderer.js
View File

@@ -152,14 +152,13 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
var tileRangeSize = tileRange.getSize();
var maxDimension = Math.max(
tileRangeSize[0] * tileSize[0],
tileRangeSize[1] * tileSize[1]);
var maxDimension =
Math.max(tileRangeSize[0] * tileSize, tileRangeSize[1] * tileSize);
var framebufferDimension = ol.math.roundUpToPowerOfTwo(maxDimension);
var framebufferExtentDimension = tileResolution * framebufferDimension;
var origin = tileGrid.getOrigin(z);
var minX = origin[0] + tileRange.minX * tileSize[0] * tileResolution;
var minY = origin[1] + tileRange.minY * tileSize[1] * tileResolution;
var minX = origin[0] + tileRange.minX * tileSize * tileResolution;
var minY = origin[1] + tileRange.minY * tileSize * tileResolution;
framebufferExtent = [
minX, minY,
minX + framebufferExtentDimension, minY + framebufferExtentDimension
@@ -255,8 +254,7 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
framebufferExtentDimension - 1;
goog.vec.Vec4.setFromValues(u_tileOffset, sx, sy, tx, ty);
gl.uniform4fv(this.locations_.u_tileOffset, u_tileOffset);
mapRenderer.bindTileTexture(tile,
tileSize[0], tileSize[1], tileGutter,
mapRenderer.bindTileTexture(tile, tileSize, tileGutter,
goog.webgl.LINEAR, goog.webgl.LINEAR);
gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
}
@@ -291,7 +289,7 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
tile,
tileGrid.getTileCoordCenter(tile.tileCoord),
tileGrid.getResolution(tile.tileCoord.z),
tileSize[0], tileSize[1], tileGutter
tileSize, tileGutter
]);
}
}, this);

3
src/ol/source/bingmapssource.js
View File

@@ -79,10 +79,11 @@ ol.source.BingMaps.prototype.handleImageryMetadataResponse =
//var copyright = response.copyright; // FIXME do we need to display this?
var resource = response.resourceSets[0].resources[0];
goog.asserts.assert(resource.imageWidth == resource.imageHeight);
var tileGrid = new ol.tilegrid.XYZ({
minZoom: resource.zoomMin,
maxZoom: resource.zoomMax,
tileSize: [resource.imageWidth, resource.imageHeight]
tileSize: resource.imageWidth
});
this.tileGrid = tileGrid;

11
src/ol/source/debugtilesource.js
View File

@@ -2,7 +2,6 @@ goog.provide('ol.source.TileDebug');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('ol.Size');
goog.require('ol.Tile');
goog.require('ol.TileCache');
goog.require('ol.TileCoord');
@@ -31,7 +30,7 @@ ol.DebugTile_ = function(tileCoord, tileGrid) {
/**
* @private
* @type {ol.Size}
* @type {number}
*/
this.tileSize_ = tileGrid.getTileSize(tileCoord.z);
@@ -58,21 +57,21 @@ ol.DebugTile_.prototype.getImage = function(opt_context) {
var canvas = /** @type {HTMLCanvasElement} */
(goog.dom.createElement(goog.dom.TagName.CANVAS));
canvas.width = tileSize[0];
canvas.height = tileSize[1];
canvas.width = tileSize;
canvas.height = tileSize;
var context = /** @type {CanvasRenderingContext2D} */
(canvas.getContext('2d'));
context.strokeStyle = 'black';
context.strokeRect(0.5, 0.5, tileSize[0] + 0.5, tileSize[1] + 0.5);
context.strokeRect(0.5, 0.5, tileSize + 0.5, tileSize + 0.5);
context.fillStyle = 'black';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.font = '24px sans-serif';
context.fillText(
this.tileCoord_.toString(), tileSize[0] / 2, tileSize[1] / 2);
this.tileCoord_.toString(), tileSize / 2, tileSize / 2);
this.canvasByContext_[key] = canvas;
return canvas;

8
src/ol/source/tilewmssource.js
View File

@@ -167,11 +167,11 @@ ol.source.TileWMS.prototype.tileUrlFunction_ = function(tileCoord, projection) {
var tileSize = tileGrid.getTileSize(tileCoord.z);
var gutter = this.gutter_;
if (gutter === 0) {
goog.object.set(params, 'WIDTH', tileSize[0]);
goog.object.set(params, 'HEIGHT', tileSize[1]);
goog.object.set(params, 'WIDTH', tileSize);
goog.object.set(params, 'HEIGHT', tileSize);
} else {
goog.object.set(params, 'WIDTH', tileSize[0] + 2 * gutter);
goog.object.set(params, 'HEIGHT', tileSize[1] + 2 * gutter);
goog.object.set(params, 'WIDTH', tileSize + 2 * gutter);
goog.object.set(params, 'HEIGHT', tileSize + 2 * gutter);
tileExtent =
ol.extent.buffer(tileExtent, tileResolution * gutter, this.tmpExtent_);
}

47
src/ol/tilegrid/tilegrid.js
View File

@@ -3,7 +3,6 @@ goog.provide('ol.tilegrid.TileGrid');
goog.require('goog.array');
goog.require('goog.asserts');
goog.require('ol.Coordinate');
goog.require('ol.Size');
goog.require('ol.TileCoord');
goog.require('ol.TileRange');
goog.require('ol.array');
@@ -75,7 +74,7 @@ ol.tilegrid.TileGrid = function(options) {
/**
* @private
* @type {Array.<ol.Size>}
* @type {Array.<number>}
*/
this.tileSizes_ = null;
if (goog.isDef(options.tileSizes)) {
@@ -85,15 +84,14 @@ ol.tilegrid.TileGrid = function(options) {
/**
* @private
* @type {ol.Size}
* @type {number|undefined}
*/
this.tileSize_ = goog.isDef(options.tileSize) ?
options.tileSize :
goog.isNull(this.tileSizes_) ?
[ol.DEFAULT_TILE_SIZE, ol.DEFAULT_TILE_SIZE] : null;
goog.isNull(this.tileSizes_) ? ol.DEFAULT_TILE_SIZE : undefined;
goog.asserts.assert(
(goog.isNull(this.tileSize_) && !goog.isNull(this.tileSizes_)) ||
(!goog.isNull(this.tileSize_) && goog.isNull(this.tileSizes_)));
(!goog.isDef(this.tileSize_) && !goog.isNull(this.tileSizes_)) ||
(goog.isDef(this.tileSize_) && goog.isNull(this.tileSizes_)));
};
@@ -220,10 +218,10 @@ ol.tilegrid.TileGrid.prototype.getTileRangeExtent =
var origin = this.getOrigin(z);
var resolution = this.getResolution(z);
var tileSize = this.getTileSize(z);
var minX = origin[0] + tileRange.minX * tileSize[0] * resolution;
var maxX = origin[0] + (tileRange.maxX + 1) * tileSize[0] * resolution;
var minY = origin[1] + tileRange.minY * tileSize[1] * resolution;
var maxY = origin[1] + (tileRange.maxY + 1) * tileSize[1] * resolution;
var minX = origin[0] + tileRange.minX * tileSize * resolution;
var maxX = origin[0] + (tileRange.maxX + 1) * tileSize * resolution;
var minY = origin[1] + tileRange.minY * tileSize * resolution;
var maxY = origin[1] + (tileRange.maxY + 1) * tileSize * resolution;
return ol.extent.createOrUpdate(minX, minY, maxX, maxY, opt_extent);
};
@@ -271,8 +269,8 @@ ol.tilegrid.TileGrid.prototype.getTileCoordCenter = function(tileCoord) {
var resolution = this.getResolution(tileCoord.z);
var tileSize = this.getTileSize(tileCoord.z);
return [
origin[0] + (tileCoord.x + 0.5) * tileSize[0] * resolution,
origin[1] + (tileCoord.y + 0.5) * tileSize[1] * resolution
origin[0] + (tileCoord.x + 0.5) * tileSize * resolution,
origin[1] + (tileCoord.y + 0.5) * tileSize * resolution
];
};
@@ -287,10 +285,10 @@ ol.tilegrid.TileGrid.prototype.getTileCoordExtent =
var origin = this.getOrigin(tileCoord.z);
var resolution = this.getResolution(tileCoord.z);
var tileSize = this.getTileSize(tileCoord.z);
var minX = origin[0] + tileCoord.x * tileSize[0] * resolution;
var minY = origin[1] + tileCoord.y * tileSize[1] * resolution;
var maxX = minX + tileSize[0] * resolution;
var maxY = minY + tileSize[1] * resolution;
var minX = origin[0] + tileCoord.x * tileSize * resolution;
var minY = origin[1] + tileCoord.y * tileSize * resolution;
var maxX = minX + tileSize * resolution;
var maxY = minY + tileSize * resolution;
return ol.extent.createOrUpdate(minX, minY, maxX, maxY, opt_extent);
};
@@ -330,8 +328,8 @@ ol.tilegrid.TileGrid.prototype.getTileCoordForXYAndResolution_ = function(
var origin = this.getOrigin(z);
var tileSize = this.getTileSize(z);
var tileCoordX = scale * (x - origin[0]) / (resolution * tileSize[0]);
var tileCoordY = scale * (y - origin[1]) / (resolution * tileSize[1]);
var tileCoordX = scale * (x - origin[0]) / (resolution * tileSize);
var tileCoordY = scale * (y - origin[1]) / (resolution * tileSize);
if (reverseIntersectionPolicy) {
tileCoordX = Math.ceil(tileCoordX) - 1;
@@ -372,11 +370,11 @@ ol.tilegrid.TileGrid.prototype.getTileCoordResolution = function(tileCoord) {
/**
* @param {number} z Z.
* @return {ol.Size} Tile size.
* @return {number} Tile size.
* @todo stability experimental
*/
ol.tilegrid.TileGrid.prototype.getTileSize = function(z) {
if (!goog.isNull(this.tileSize_)) {
if (goog.isDef(this.tileSize_)) {
return this.tileSize_;
} else {
goog.asserts.assert(!goog.isNull(this.tileSizes_));
@@ -412,7 +410,7 @@ ol.tilegrid.getForProjection = function(projection) {
/**
* @param {ol.proj.Projection} projection Projection.
* @param {number=} opt_maxZoom Maximum zoom level.
* @param {ol.Size=} opt_tileSize Tile size.
* @param {number=} opt_tileSize Tile size.
* @return {ol.tilegrid.TileGrid} TileGrid instance.
*/
ol.tilegrid.createForProjection =
@@ -425,10 +423,9 @@ ol.tilegrid.createForProjection =
projectionExtent[3] - projectionExtent[1]);
var maxZoom = goog.isDef(opt_maxZoom) ?
opt_maxZoom : ol.DEFAULT_MAX_ZOOM;
var tileSize = goog.isDef(opt_tileSize) ?
opt_tileSize : [ol.DEFAULT_TILE_SIZE, ol.DEFAULT_TILE_SIZE];
var tileSize = goog.isDef(opt_tileSize) ? opt_tileSize : ol.DEFAULT_TILE_SIZE;
var resolutions = new Array(maxZoom + 1);
var maxResolution = size / Math.max(tileSize[0], tileSize[1]);
var maxResolution = size / tileSize;
for (var z = 0, zz = resolutions.length; z < zz; ++z) {
resolutions[z] = maxResolution / Math.pow(2, z);
}

9
src/ol/tilegrid/wmtstilegrid.js
View File

@@ -65,9 +65,13 @@ ol.tilegrid.WMTS.prototype.getMatrixIds = function() {
ol.tilegrid.WMTS.createFromCapabilitiesMatrixSet =
function(matrixSet) {
/** @type {!Array.<number>} */
var resolutions = [];
/** @type {!Array.<string>} */
var matrixIds = [];
/** @type {!Array.<ol.Coordinate>} */
var origins = [];
/** @type {!Array.<number>} */
var tileSizes = [];
var supportedCRSPropName = 'supportedCRS';
@@ -91,7 +95,10 @@ ol.tilegrid.WMTS.createFromCapabilitiesMatrixSet =
origins.push(elt[topLeftCornerPropName]);
resolutions.push(elt[scaleDenominatorPropName] * 0.28E-3 /
metersPerUnit);
tileSizes.push([elt[tileWidthPropName], elt[tileHeightPropName]]);
var tileWidth = elt[tileWidthPropName];
var tileHeight = elt[tileHeightPropName];
goog.asserts.assert(tileWidth == tileHeight);
tileSizes.push(tileWidth);
});
return new ol.tilegrid.WMTS({

2
src/ol/tilegrid/xyztilegrid.js
View File

@@ -29,7 +29,7 @@ ol.tilegrid.XYZ = function(options) {
minZoom: options.minZoom,
origin: [-ol.proj.EPSG3857.HALF_SIZE, ol.proj.EPSG3857.HALF_SIZE],
resolutions: resolutions,
tileSize: [ol.DEFAULT_TILE_SIZE, ol.DEFAULT_TILE_SIZE]
tileSize: ol.DEFAULT_TILE_SIZE
});
};

2
test/spec/ol/source/tilesource.test.js
View File

@@ -197,7 +197,7 @@ ol.test.source.TileMock = function(loaded) {
resolutions: [360 / 256, 180 / 256, 90 / 256, 45 / 256],
extent: extent,
origin: [-180, -180],
tileSize: [256, 256]
tileSize: 256
});
goog.base(this, {

6
test/spec/ol/tilegrid/tilegrid.test.js
View File

@@ -12,7 +12,7 @@ describe('ol.tilegrid.TileGrid', function() {
extent = [0, 0, 100000, 100000];
origin = [0, 0];
origins = [];
tileSize = [100, 100];
tileSize = 100;
});
describe('create valid', function() {
@@ -211,7 +211,7 @@ describe('ol.tilegrid.TileGrid', function() {
var resolutions = grid.getResolutions();
expect(resolutions.length).to.be(ol.DEFAULT_MAX_ZOOM + 1);
expect(grid.getTileSize()).to.eql([256, 256]);
expect(grid.getTileSize()).to.eql(256);
});
it('stores the default tile grid on a projection', function() {
@@ -295,7 +295,7 @@ describe('ol.tilegrid.TileGrid', function() {
describe('getTileCoordForCoordAndResolution', function() {
it('returns the expected TileCoord', function() {
var tileSize = [256, 256];
var tileSize = 256;
var tileGrid = new ol.tilegrid.TileGrid({
resolutions: [10],
extent: extent,