Merge pull request #7221 from thhomas/zoomify-update-iip
update zoomify source to accept tileIndex placeholders and handle iip…
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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/',
|
||||
size: [imgWidth, imgHeight],
|
||||
crossOrigin: 'anonymous'
|
||||
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'
|
||||
}));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user