Add Zoomify stuff
This commit is contained in:
Olivier Terral
committed by
Tom Payne
Tom Payne
parent
83e34bfc8d
commit
fe1f98899f
50
examples/zoomify.html
Normal file
50
examples/zoomify.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Zoomify example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Zoomify example</h4>
|
||||
<p id="shortdesc">Example of a Zoomify source.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="zoomify.js" target="_blank">zoomify.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">zoomify</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=zoomify" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
examples/zoomify.js
Normal file
39
examples/zoomify.js
Normal file
@@ -0,0 +1,39 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.proj.Projection');
|
||||
goog.require('ol.proj.Units');
|
||||
goog.require('ol.source.Zoomify');
|
||||
|
||||
var imgWidth = 8001;
|
||||
var imgHeight = 6943;
|
||||
var imgCenter = [imgWidth / 2, -imgHeight / 2];
|
||||
var url = 'http://mapy.mzk.cz/AA22/0103/';
|
||||
|
||||
var proj = new ol.proj.Projection({
|
||||
code: 'ZOOMIFY',
|
||||
units: ol.proj.Units.PIXELS,
|
||||
extent: [0, 0, imgWidth, imgHeight]
|
||||
});
|
||||
|
||||
var source = new ol.source.Zoomify({
|
||||
url: url,
|
||||
size: [imgWidth, imgHeight]
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: source
|
||||
})
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
projection: proj,
|
||||
center: imgCenter,
|
||||
zoom: 0
|
||||
})
|
||||
});
|
||||
@@ -840,6 +840,17 @@
|
||||
* @todo stability experimental
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} ol.source.ZoomifyOptions
|
||||
* @property {Array.<ol.Attribution>|undefined} attributions Attributions.
|
||||
* @property {null|string|undefined} crossOrigin Cross origin setting for image
|
||||
* requests.
|
||||
* @property {string|undefined} logo Logo.
|
||||
* @property {!string} url Prefix of URL template.
|
||||
* @property {ol.Size} size Size of the image.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} olx.style.IconOptions
|
||||
* @property {string|ol.expr.Expression} url Icon image URL.
|
||||
@@ -954,3 +965,9 @@
|
||||
* @property {number} maxZoom Maximum zoom.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} ol.tilegrid.ZoomifyOptions
|
||||
* @property {!Array.<number>} resolutions Resolutions.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
|
||||
@@ -40,7 +40,8 @@ ol.proj.ProjectionLike;
|
||||
ol.proj.Units = {
|
||||
DEGREES: 'degrees',
|
||||
FEET: 'ft',
|
||||
METERS: 'm'
|
||||
METERS: 'm',
|
||||
PIXELS: 'pixels'
|
||||
};
|
||||
|
||||
|
||||
|
||||
1
src/ol/source/zoomifysource.exports
Normal file
1
src/ol/source/zoomifysource.exports
Normal file
@@ -0,0 +1 @@
|
||||
@exportClass ol.source.Zoomify ol.source.ZoomifyOptions
|
||||
142
src/ol/source/zoomifysource.js
Normal file
142
src/ol/source/zoomifysource.js
Normal file
@@ -0,0 +1,142 @@
|
||||
goog.provide('ol.source.Zoomify');
|
||||
|
||||
goog.require('goog.array');
|
||||
goog.require('ol.TileCoord');
|
||||
goog.require('ol.TileUrlFunction');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.TileImage');
|
||||
goog.require('ol.tilegrid.Zoomify');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.source.TileImage}
|
||||
* @param {ol.source.ZoomifyOptions} options Zoomify options.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
ol.source.Zoomify = function(options) {
|
||||
|
||||
/**
|
||||
* Prefix of URL template.
|
||||
* @private
|
||||
* @type {!string}
|
||||
*/
|
||||
this.url_ = options.url;
|
||||
|
||||
/**
|
||||
* Size of the image.
|
||||
* @private
|
||||
* @type {ol.Size}
|
||||
*/
|
||||
this.size_ = options.size;
|
||||
|
||||
/**
|
||||
* Depth of the Zoomify pyramid, number of tiers (zoom levels).
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.numberOfTiers_ = 0;
|
||||
|
||||
/**
|
||||
* Number of tiles up to the given tier of pyramid.
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.tileCountUpToTier_ = null;
|
||||
|
||||
/**
|
||||
* Size (in tiles) for each tier of pyramid.
|
||||
* @private
|
||||
* @type {Array.<ol.Size>}
|
||||
*/
|
||||
this.tierSizeInTiles_ = null;
|
||||
|
||||
/**
|
||||
* Image size in pixels for each pyramid tier.
|
||||
* @private
|
||||
* @type {Array.<ol.Size>}
|
||||
*/
|
||||
this.tierImageSize_ = null;
|
||||
|
||||
var imageSize = [].concat(this.size_);
|
||||
var tiles = [
|
||||
Math.ceil(this.size_[0] / ol.DEFAULT_TILE_SIZE),
|
||||
Math.ceil(this.size_[1] / ol.DEFAULT_TILE_SIZE)
|
||||
];
|
||||
this.tierSizeInTiles_ = [tiles];
|
||||
this.tierImageSize_ = [imageSize];
|
||||
|
||||
while (imageSize[0] > ol.DEFAULT_TILE_SIZE ||
|
||||
imageSize[1] > ol.DEFAULT_TILE_SIZE) {
|
||||
|
||||
imageSize = [
|
||||
Math.floor(imageSize[0] / 2),
|
||||
Math.floor(imageSize[1] / 2)
|
||||
];
|
||||
tiles = [
|
||||
Math.ceil(imageSize[0] / ol.DEFAULT_TILE_SIZE),
|
||||
Math.ceil(imageSize[1] / ol.DEFAULT_TILE_SIZE)
|
||||
];
|
||||
this.tierSizeInTiles_.push(tiles);
|
||||
this.tierImageSize_.push(imageSize);
|
||||
}
|
||||
|
||||
this.tierSizeInTiles_.reverse();
|
||||
this.tierImageSize_.reverse();
|
||||
this.numberOfTiers_ = this.tierSizeInTiles_.length;
|
||||
var resolutions = [1];
|
||||
this.tileCountUpToTier_ = [0];
|
||||
for (var i = 1; i < this.numberOfTiers_; i++) {
|
||||
resolutions.unshift(Math.pow(2, i));
|
||||
this.tileCountUpToTier_.push(
|
||||
this.tierSizeInTiles_[i - 1][0] * this.tierSizeInTiles_[i - 1][1] +
|
||||
this.tileCountUpToTier_[i - 1]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
var createFromUrl = function(url) {
|
||||
var template = url + '{tileIndex}/{z}-{x}-{y}.jpg';
|
||||
return (
|
||||
/**
|
||||
* @this {ol.source.TileImage}
|
||||
* @param {ol.TileCoord} tileCoord Tile Coordinate.
|
||||
* @param {ol.proj.Projection} projection Projection.
|
||||
* @return {string|undefined} Tile URL.
|
||||
*/
|
||||
function(tileCoord, projection) {
|
||||
if (goog.isNull(tileCoord)) {
|
||||
return undefined;
|
||||
} else {
|
||||
var tileIndex = tileCoord.x +
|
||||
(tileCoord.y * this.tierSizeInTiles_[tileCoord.z][0]) +
|
||||
this.tileCountUpToTier_[tileCoord.z];
|
||||
return template.replace('{tileIndex}', 'TileGroup' +
|
||||
Math.floor((tileIndex) / ol.DEFAULT_TILE_SIZE))
|
||||
.replace('{z}', '' + tileCoord.z)
|
||||
.replace('{x}', '' + tileCoord.x)
|
||||
.replace('{y}', '' + tileCoord.y);
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
var tileGrid = new ol.tilegrid.Zoomify({
|
||||
resolutions: resolutions
|
||||
});
|
||||
var tileUrlFunction = ol.TileUrlFunction.withTileCoordTransform(
|
||||
tileGrid.createTileCoordTransform(),
|
||||
createFromUrl(this.url_));
|
||||
|
||||
|
||||
goog.base(this, {
|
||||
attributions: options.attributions,
|
||||
crossOrigin: options.crossOrigin,
|
||||
logo: options.logo,
|
||||
tileGrid: tileGrid,
|
||||
tileUrlFunction: tileUrlFunction
|
||||
});
|
||||
|
||||
};
|
||||
goog.inherits(ol.source.Zoomify, ol.source.TileImage);
|
||||
1
src/ol/tilegrid/zoomifytilegrid.exports
Normal file
1
src/ol/tilegrid/zoomifytilegrid.exports
Normal file
@@ -0,0 +1 @@
|
||||
@exportClass ol.tilegrid.Zoomify ol.tilegrid.ZoomifyOptions
|
||||
85
src/ol/tilegrid/zoomifytilegrid.js
Normal file
85
src/ol/tilegrid/zoomifytilegrid.js
Normal file
@@ -0,0 +1,85 @@
|
||||
goog.provide('ol.tilegrid.Zoomify');
|
||||
|
||||
goog.require('goog.math');
|
||||
goog.require('ol.TileCoord');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.tilegrid.TileGrid');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.tilegrid.TileGrid}
|
||||
* @param {ol.tilegrid.ZoomifyOptions} options Zoomify options.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
ol.tilegrid.Zoomify = function(options) {
|
||||
goog.base(this, {
|
||||
origin: [0, 0],
|
||||
resolutions: options.resolutions
|
||||
});
|
||||
|
||||
};
|
||||
goog.inherits(ol.tilegrid.Zoomify, ol.tilegrid.TileGrid);
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.tilegrid.Zoomify.prototype.createTileCoordTransform = function(opt_options) {
|
||||
var options = goog.isDef(opt_options) ? opt_options : {};
|
||||
var minZ = this.minZoom;
|
||||
var maxZ = this.maxZoom;
|
||||
var tmpTileCoord = new ol.TileCoord(0, 0, 0);
|
||||
/** @type {Array.<ol.TileRange>} */
|
||||
var tileRangeByZ = null;
|
||||
if (goog.isDef(options.extent)) {
|
||||
tileRangeByZ = new Array(maxZ + 1);
|
||||
var z;
|
||||
for (z = 0; z <= maxZ; ++z) {
|
||||
if (z < minZ) {
|
||||
tileRangeByZ[z] = null;
|
||||
} else {
|
||||
tileRangeByZ[z] = this.getTileRangeForExtentAndZ(options.extent, z);
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
/**
|
||||
* @param {ol.TileCoord} tileCoord Tile coordinate.
|
||||
* @param {ol.proj.Projection} projection Projection.
|
||||
* @param {ol.TileCoord=} opt_tileCoord Destination tile coordinate.
|
||||
* @return {ol.TileCoord} Tile coordinate.
|
||||
*/
|
||||
function(tileCoord, projection, opt_tileCoord) {
|
||||
var z = tileCoord.z;
|
||||
if (z < minZ || maxZ < z) {
|
||||
return null;
|
||||
}
|
||||
var n = Math.pow(2, z);
|
||||
var x = tileCoord.x;
|
||||
if (x < 0 || n <= x) {
|
||||
return null;
|
||||
}
|
||||
var y = tileCoord.y;
|
||||
if (y < -n || -1 < y) {
|
||||
return null;
|
||||
}
|
||||
if (!goog.isNull(tileRangeByZ)) {
|
||||
tmpTileCoord.z = z;
|
||||
tmpTileCoord.x = x;
|
||||
tmpTileCoord.y = y;
|
||||
if (!tileRangeByZ[z].contains(tmpTileCoord)) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
if (goog.isDef(opt_tileCoord)) {
|
||||
opt_tileCoord.z = z;
|
||||
opt_tileCoord.x = x;
|
||||
opt_tileCoord.y = -y - 1;
|
||||
return opt_tileCoord;
|
||||
} else {
|
||||
return new ol.TileCoord(z, x, -y - 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user