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

Merge pull request #10562 from crubier/master

Browse Source 
Zoomify: Separate the service pixel ratio and the device pixel ratio
This commit is contained in:
Andreas Hocevar
2020-01-27 15:46:11 +01:00
committed by GitHub
parent 9cf8fe9e05 23d441f9f2
commit 29ea779f66
4 changed files with 50 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/zoomify.html
View File

@@ -10,7 +10,6 @@ tags: "zoomify, deep zoom, IIP, pixel, projection"
<div class="controls">
<select id="zoomifyProtocol">
<option value="zoomify">Zoomify</option>
<option value="iip">IIP</option>
<option value="zoomifyretina">Zoomify Retina</option>
</select>
</div>

117
examples/zoomify.js
View File

@@ -3,36 +3,42 @@ import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
import Zoomify from '../src/ol/source/Zoomify.js';
const imgWidth = 9911;
const imgHeight = 6100;
const imgWidth = 4000;
const imgHeight = 3000;
const zoomifyUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
'/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';
const iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF' + '&JTL={z},{tileIndex}';
const zoomifyUrl = 'https://ol-zoomify.surge.sh/zoomify/';
const layer = new TileLayer({
source: new Zoomify({
tileSize: 256,
tilePixelRatio: 1,
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
const source = new Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous',
zDirection: -1 // Ensure we get a tile with the screen resolution or higher
});
const extent = source.getTileGrid().getExtent();
const retinaPixelRatio = 2;
const retinaSource = new Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous',
zDirection: -1, // Ensure we get a tile with the screen resolution or higher
tilePixelRatio: retinaPixelRatio, // Display retina tiles
tileSize: 256 / retinaPixelRatio // from a higher zoom level
});
const extent = [0, -imgHeight, imgWidth, 0];
const resolutions = layer.getSource().getTileGrid().getResolutions();
const layer = new TileLayer({
source: source
});
const map = new Map({
layers: [layer],
target: 'map',
view: new View({
// adjust zoom levels to those provided by the source
minResolution: resolutions[resolutions.length - 1],
maxResolution: resolutions[0],
resolutions: layer.getSource().getTileGrid().getResolutions(),
// constrain the center: center cannot be set outside this extent
extent: extent
extent: extent,
constrainOnlyCenter: true
})
});
map.getView().fit(extent);
@@ -40,74 +46,11 @@ map.getView().fit(extent);
const control = document.getElementById('zoomifyProtocol');
control.addEventListener('change', function(event) {
const value = event.currentTarget.value;
if (value === 'iip') {
const extent = [0, -imgHeight, imgWidth, 0];
layer.setSource(
new Zoomify({
tileSize: 256,
tilePixelRatio: 1,
url: iipUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
);
const resolutions = layer.getSource().getTileGrid().getResolutions();
map.setView(
new View({
// adjust zoom levels to those provided by the source
minResolution: resolutions[resolutions.length - 1],
maxResolution: resolutions[0],
// constrain the center: center cannot be set outside this extent
extent: extent
})
);
map.getView().fit(extent);
} else if (value === 'zoomify') {
const extent = [0, -imgHeight, imgWidth, 0];
layer.setSource(
new Zoomify({
tileSize: 256,
tilePixelRatio: 1,
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
);
const resolutions = layer.getSource().getTileGrid().getResolutions();
map.setView(
new View({
// adjust zoom levels to those provided by the source
minResolution: resolutions[resolutions.length - 1],
maxResolution: resolutions[0],
// constrain the center: center cannot be set outside this extent
extent: extent
})
);
map.getView().fit(extent);
if (value === 'zoomify') {
layer.setSource(source);
} else if (value === 'zoomifyretina') {
const pixelRatio = 4;
// Be careful! Image extent will be modified by pixel ratio
const extent = [0, -imgHeight / pixelRatio, imgWidth / pixelRatio, 0];
layer.setSource(
new Zoomify({
tileSize: 256 / pixelRatio,
tilePixelRatio: pixelRatio,
url: zoomifyUrl,
size: [imgWidth / pixelRatio, imgHeight / pixelRatio],
crossOrigin: 'anonymous'
})
);
const resolutions = layer.getSource().getTileGrid().getResolutions();
map.setView(
new View({
// adjust zoom levels to those provided by the source
minResolution: resolutions[resolutions.length - 1] / pixelRatio,
maxResolution: resolutions[0],
// constrain the center: center cannot be set outside this extent
extent: extent
})
);
map.getView().fit(extent);
layer.setSource(retinaSource);
}
});