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

update zoomify source to accept tileIndex placeholders and handle iipsource, update tests and examples

Browse Source
This commit is contained in:
Thomas Tilak
2017-09-05 18:27:35 +02:00
parent ab59f79f6a
commit c43a46c5b7
5 changed files with 102 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/zoomify.html
View File

@@ -3,7 +3,13 @@ layout: example.html
title: Zoomify
shortdesc: Example of a Zoomify source.
docs: >
Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection.
tags: "zoomify, deep zoom, pixel, projection"
Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection. Internet Imaging Protocol (IIP) with JTL extension is also handled.
tags: "zoomify, deep zoom, IIP, pixel, projection"
---
<div id="map" class="map"></div>
<div class="controls">
<select id="zoomifyProtocol">
<option value="zoomify">Zoomify</option>
<option value="iip">IIP</option>
</select>
</div>

39
examples/zoomify.js
View File

@@ -6,26 +6,47 @@ goog.require('ol.source.Zoomify');
var imgWidth = 9911;
var imgHeight = 6100;
var source = new ol.source.Zoomify({
url: 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
'/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/',
var zoomifyUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
'/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';
var iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF' + '&JTL={z},{tileIndex}';
var layer = new ol.layer.Tile({
source: new ol.source.Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
});
var extent = [0, -imgHeight, imgWidth, 0];
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: source
})
],
layers: [layer],
target: 'map',
view: new ol.View({
// adjust zoom levels to those provided by the source
resolutions: source.getTileGrid().getResolutions(),
resolutions: layer.getSource().getTileGrid().getResolutions(),
// constrain the center: center cannot be set outside this extent
extent: extent
})
});
map.getView().fit(extent);
var control = document.getElementById('zoomifyProtocol');
control.addEventListener('change', function(event) {
var value = event.currentTarget.value;
if (value === 'iip') {
layer.setSource(new ol.source.Zoomify({
url: iipUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
}));
} else if (value === 'zoomify') {
layer.setSource(new ol.source.Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
}));
}
});

3
externs/olx.js
View File

@@ -7175,6 +7175,9 @@ olx.source.ZoomifyOptions.prototype.reprojectionErrorThreshold;
* `http://my.zoomify.info/IMAGE.TIF/`. A URL template must include
* `{TileGroup}`, `{x}`, `{y}`, and `{z}` placeholders, e.g.
* `http://my.zoomify.info/IMAGE.TIF/{TileGroup}/{z}-{x}-{y}.jpg`.
* Internet Imaging Protocol (IIP) with JTL extension can be also used with
* `{tileIndex}` and `{z}` placeholders, e.g.
* `http://my.zoomify.info?FIF=IMAGE.TIF&JTL={z},{tileIndex}`.
* A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
* used instead of defining each one separately in the `urls` option.
* @type {!string}

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

@@ -13,7 +13,8 @@ goog.require('ol.tilegrid.TileGrid');
/**
* @classdesc
* Layer source for tile data in Zoomify format.
* Layer source for tile data in Zoomify format (both Zoomify and Internet
* Imaging Protocol are supported).
*
* @constructor
* @extends {ol.source.TileImage}
@@ -84,7 +85,7 @@ ol.source.Zoomify = function(opt_options) {
});
var url = options.url;
if (url && url.indexOf('{TileGroup}') == -1) {
if (url && url.indexOf('{TileGroup}') == -1 && url.indexOf('{tileIndex}') == -1) {
url += '{TileGroup}/{z}-{x}-{y}.jpg';
}
var urls = ol.TileUrlFunction.expandUrl(url);
@@ -111,13 +112,13 @@ ol.source.Zoomify = function(opt_options) {
var tileCoordY = -tileCoord[2] - 1;
var tileIndex =
tileCoordX +
tileCoordY * tierSizeInTiles[tileCoordZ][0] +
tileCountUpToTier[tileCoordZ];
var tileGroup = (tileIndex / ol.DEFAULT_TILE_SIZE) | 0;
tileCoordY * tierSizeInTiles[tileCoordZ][0];
var tileGroup = ((tileIndex + tileCountUpToTier[tileCoordZ]) / ol.DEFAULT_TILE_SIZE) | 0;
var localContext = {
'z': tileCoordZ,
'x': tileCoordX,
'y': tileCoordY,
'tileIndex': tileIndex,
'TileGroup': 'TileGroup' + tileGroup
};
return template.replace(/\{(\w+?)\}/g, function(m, p) {

63
test/spec/ol/source/zoomify.test.js
View File

@@ -11,7 +11,8 @@ describe('ol.source.Zoomify', function() {
var w = 1024;
var h = 512;
var size = [w, h];
var url = 'spec/ol/source/images/zoomify/{TileGroup}/{z}-{x}-{y}.jpg';
var zoomifyUrl = 'spec/ol/source/images/zoomify/{TileGroup}/{z}-{x}-{y}.jpg';
var iipUrl = 'spec/ol/source/images/zoomify?JTL={z},{tileIndex}';
var proj = new ol.proj.Projection({
code: 'ZOOMIFY',
units: 'pixels',
@@ -19,7 +20,13 @@ describe('ol.source.Zoomify', function() {
});
function getZoomifySource() {
return new ol.source.Zoomify({
url: url,
url: zoomifyUrl,
size: size
});
}
function getIIPSource() {
return new ol.source.Zoomify({
url: iipUrl,
size: size
});
}
@@ -55,10 +62,13 @@ describe('ol.source.Zoomify', function() {
// we got a source
expect(source).to.be.a(ol.source.Zoomify);
// also test our helper method from above
// also test our helper methods from above
expect(function() {
source = getZoomifySource();
}).to.not.throwException();
expect(function() {
source = getIIPSource();
}).to.not.throwException();
// we got a source
expect(source).to.be.a(ol.source.Zoomify);
});
@@ -99,10 +109,12 @@ describe('ol.source.Zoomify', function() {
}).to.throwException();
});
it('creates a tileGrid', function() {
var source = getZoomifySource();
var tileGrid = source.getTileGrid();
it('creates a tileGrid for both protocols', function() {
var sources = [getZoomifySource(), getIIPSource()];
for (var i = 0; i < sources.length; i++) {
var tileGrid = sources[i].getTileGrid();
expect(tileGrid).to.be.a(ol.tilegrid.TileGrid);
}
});
});
@@ -110,24 +122,30 @@ describe('ol.source.Zoomify', function() {
describe('generated tileGrid', function() {
it('has expected extent', function() {
var source = getZoomifySource();
var tileGrid = source.getTileGrid();
var sources = [getZoomifySource(), getIIPSource()];
for (var i = 0; i < sources.length; i++) {
var tileGrid = sources[i].getTileGrid();
var expectedExtent = [0, -h, w, 0];
expect(tileGrid.getExtent()).to.eql(expectedExtent);
}
});
it('has expected origin', function() {
var source = getZoomifySource();
var tileGrid = source.getTileGrid();
var sources = [getZoomifySource(), getIIPSource()];
for (var i = 0; i < sources.length; i++) {
var tileGrid = sources[i].getTileGrid();
var expectedOrigin = [0, 0];
expect(tileGrid.getOrigin()).to.eql(expectedOrigin);
}
});
it('has expected resolutions', function() {
var source = getZoomifySource();
var tileGrid = source.getTileGrid();
var sources = [getZoomifySource(), getIIPSource()];
for (var i = 0; i < sources.length; i++) {
var tileGrid = sources[i].getTileGrid();
var expectedResolutions = [4, 2, 1];
expect(tileGrid.getResolutions()).to.eql(expectedResolutions);
}
});
});
@@ -137,14 +155,14 @@ describe('ol.source.Zoomify', function() {
it('influences resolutions', function() {
// not configured at all
var source = new ol.source.Zoomify({
url: url,
url: zoomifyUrl,
size: [513, 256]
});
var tileGrid = source.getTileGrid();
// explicitly set as 'default'
var sourceDefault = new ol.source.Zoomify({
url: url,
url: zoomifyUrl,
size: [513, 256],
tierSizeCalculation: 'default'
});
@@ -152,7 +170,7 @@ describe('ol.source.Zoomify', function() {
// explicitly set to 'truncated'
var sourceTruncated = new ol.source.Zoomify({
url: url,
url: zoomifyUrl,
size: [513, 256],
tierSizeCalculation: 'truncated'
});
@@ -165,9 +183,9 @@ describe('ol.source.Zoomify', function() {
});
describe('generated tileUrlFunction', function() {
describe('generated tileUrlFunction for zoomify protocol', function() {
it('creates an expected tileUrlFunction with template', function() {
it('creates an expected tileUrlFunction with zoomify template', function() {
var source = getZoomifySource();
var tileUrlFunction = source.getTileUrlFunction();
// zoomlevel 0
@@ -178,6 +196,17 @@ describe('ol.source.Zoomify', function() {
expect(tileUrlFunction([1, 0, -2])).to.eql('spec/ol/source/images/zoomify/TileGroup0/1-0-1.jpg');
expect(tileUrlFunction([1, 1, -2])).to.eql('spec/ol/source/images/zoomify/TileGroup0/1-1-1.jpg');
});
it('creates an expected tileUrlFunction with IIP template', function() {
var source = getIIPSource();
var tileUrlFunction = source.getTileUrlFunction();
// zoomlevel 0
expect(tileUrlFunction([0, 0, -1])).to.eql('spec/ol/source/images/zoomify?JTL=0,0');
// zoomlevel 1
expect(tileUrlFunction([1, 0, -1])).to.eql('spec/ol/source/images/zoomify?JTL=1,0');
expect(tileUrlFunction([1, 1, -1])).to.eql('spec/ol/source/images/zoomify?JTL=1,1');
expect(tileUrlFunction([1, 0, -2])).to.eql('spec/ol/source/images/zoomify?JTL=1,2');
expect(tileUrlFunction([1, 1, -2])).to.eql('spec/ol/source/images/zoomify?JTL=1,3');
});
it('creates an expected tileUrlFunction without template', function() {
var source = new ol.source.Zoomify({