我正在尝试使用 openlayers 5 在浏览器中显示高分辨率图像。我找到了一个有关如何使用 Zoomify 创建图像图块并使用 openlayers 地图渲染它的示例。但我无法将它用于我自己的形象。我对此完全陌生。我问的问题可能很琐碎。请包容我的无知。
Example code https://openlayers.org/en/latest/examples/zoomify.html - This is the example from openlayers website. I am trying to do the same with this image https://live.staticflickr.com/8173/7993440342_5d9c68faec_c.jpg.
I tried replacing the zoomifyUrl and iipUrl with my image url but it didn't work.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import Zoomify from 'ol/source/Zoomify.js';
var imgWidth = 799;
var imgHeight = 586;
var zoomifyUrl = 'https://live.staticflickr.com/8173/7993440342_5d9c68faec_c.jpg';
var iipUrl = 'https://live.staticflickr.com/8173/7993440342_5d9c68faec_c.jpg' + '&JTL={z},{tileIndex}';
var layer = new TileLayer({
source: new Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
});
var extent = [0, -imgHeight, imgWidth, 0];
var map = new Map({
layers: [layer],
target: 'map',
view: new View({
// adjust zoom levels to those provided by the source
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 Zoomify({
url: iipUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
}));
} else if (value === 'zoomify') {
layer.setSource(new Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
}));
}
});
I want to achieve something like the demo in openseadragon website https://openseadragon.github.io/. After making the above code change, I get a a grid with a portion of image repeated.
要使用 Zoomify，您需要一个支持将图像用作图块的服务器。您使用的 url 是 flickr 上的静态图像，OpenLayers 需要将其处理为 ImageStatic。这是使用 flickr 中最高分辨率图像的代码
var extent = [0, 0, 10000, 7328];
var resolutions = [64, 32, 16, 8, 4, 2, 1];
var layer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'https://live.staticflickr.com/8173/7993440342_6a1f281898_o_d.jpg',
imageExtent: extent
})
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
// adjust zoom levels to those provided by the source
resolutions: resolutions,
// constrain the center: center cannot be set outside this extent
extent: extent
})
});
map.getView().fit(extent);html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>或者，您可以链接到 OpenSeadragon 使用的 url。奇怪的是，缩放级别从 8 到 14 不等，8 级有一个图块，14 级有一个 55 x 41 网格，其中最右列的图块宽 206 像素，底行高 41 像素。可以使用 Zoomify，但需要自定义图块 url 函数来将 OpenLayers 预期的缩放级别添加 8。
var imgWidth = 54*256 + 206;
var imgHeight = 40*256 + 41;
var zoomifyUrl = 'https://openseadragon.github.io/example-images/duomo/duomo_files/{z}/{x}_{y}.jpg';
var layer = new ol.layer.Tile({
source: new ol.source.Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
});
layer.getSource().setTileUrlFunction(function(tileCoord) {
return zoomifyUrl.replace(
'{z}', tileCoord[0]+8
).replace(
'{x}', tileCoord[1]
).replace(
'{y}', -(tileCoord[2]+1)
);
});
var extent = [0, -imgHeight, imgWidth, 0];
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
// adjust zoom levels to those provided by the source
resolutions: layer.getSource().getTileGrid().getResolutions(),
// constrain the center: center cannot be set outside this extent
extent: extent
})
});
map.getView().fit(extent);html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>从该尝试的结果来看，很明显一些图块只有 255 像素，而不是标准的 256 像素，这导致输出上出现白线。我添加了一个自定义图块加载函数，将 255px 宽度或高度拉伸到 256（但它不能拉伸右侧和底部边缘的图块，这些边缘可能小于 255px）。
var imgWidth = 54*256 + 206;
var imgHeight = 40*256 + 41;
var zoomifyUrl = 'https://openseadragon.github.io/example-images/duomo/duomo_files/{z}/{x}_{y}.jpg';
var layer = new ol.layer.Tile({
source: new ol.source.Zoomify({
url: zoomifyUrl,
size: [imgWidth, imgHeight],
crossOrigin: 'anonymous'
})
});
layer.getSource().setTileUrlFunction(function(tileCoord) {
return zoomifyUrl.replace(
'{z}', tileCoord[0]+8
).replace(
'{x}', tileCoord[1]
).replace(
'{y}', -(tileCoord[2]+1)
);
});
var tileSize = ol.size.toSize(layer.getSource().getTileGrid().getTileSize(0));
layer.getSource().setTileLoadFunction(function(imageTile, src) {
var img = document.createElement('img');
img.onload = function() {
var width = img.naturalWidth >= tileSize[0]-1 ? tileSize[0] : img.naturalWidth;
var height = img.naturalHeight >= tileSize[1]-1 ? tileSize[1] : img.naturalHeight;
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
imageTile.getImage().src = canvas.toDataURL();
};
img.crossOrigin = 'anonymous';
img.src = src;
});
var extent = [0, -imgHeight, imgWidth, 0];
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
// adjust zoom levels to those provided by the source
resolutions: layer.getSource().getTileGrid().getResolutions(),
// constrain the center: center cannot be set outside this extent
extent: extent
})
});
map.getView().fit(extent);html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>使用 dzi XML 解析器：
var map = new ol.Map({
target: 'map',
logo: false
});
var layer = dzi.loadUrl(
'https://openseadragon.github.io/example-images/duomo/duomo.dzi',
{ attributions: 'Image © 2012, <a href="https://www.flickr.com/photos/projectese/" target="_blank">Dario Morelli</a>' }
);
layer.on('change:source', function(evt) {
map.setView(
new ol.View({
resolutions: layer.getSource().getTileGrid().getResolutions(),
extent: layer.getExtent()
})
);
map.getView().fit(layer.getExtent(), { size: map.getSize() });
});
map.addLayer(layer);html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script>
dzi = function() {
function loadUrl ( url,
opt_options // attributions (defaults to undefined), crossOrigin (defaults to 'anonymous')
) {
var options = opt_options || {};
var crossOrigin = options.crossOrigin === undefined ? 'anonymous' : options.crossOrigin;
var layer = new ol.layer.Tile();
var last = url.lastIndexOf('.');
var path = url.slice(0, last);
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xhr.responseText,'text/xml');
var elements = xmlDoc.getElementsByTagName('Image');
var tileSize = Number(elements[0].getAttribute('TileSize'));
var format = elements[0].getAttribute('Format');
var width = Number(elements[0].getElementsByTagName('Size')[0].getAttribute('Width'));
var height = Number(elements[0].getElementsByTagName('Size')[0].getAttribute('Height'));
var url = path + '_files/{z}/{x}_{y}.' + format;
var source = new ol.source.Zoomify({
attributions: options.attributions,
url: url,
size: [width, height],
tileSize: tileSize,
crossOrigin: crossOrigin
});
var offset = Math.ceil(Math.log(tileSize)/Math.LN2);
source.setTileUrlFunction(function(tileCoord) {
return url.replace(
'{z}', tileCoord[0] + offset
).replace(
'{x}', tileCoord[1]
).replace(
'{y}', -(tileCoord[2]+1)
);
});
layer.setExtent([0, -height, width, 0]);
layer.setSource(source);
}
xhr.send();
return layer;
}
return {
"loadUrl" : loadUrl
}
} ();
</script>
<div id="map" class="map"></div>