Javascript 如何使用openlayers在浏览器中显示高分辨率图像

我正在尝试使用openlayers 5在浏览器中显示高分辨率图像。我找到了一个关于如何使用zoomify创建图像平铺并使用openlayers map进行渲染的示例。但我无法将其用于我自己的形象。我对这个完全陌生。我问的问题可能很琐碎。请容忍我的无知

-这是openlayers网站的示例。我也在试着用同样的方法。 我试着用我的图片url替换zoomifyUrl和iipUrl，但没有成功

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'
    }));
  }

});

我想在中实现一些类似于演示的东西。在修改了上面的代码之后，我得到了一个网格，其中重复了一部分图像。

---

要使用Zoomify，您需要一个支持图像作为平铺的服务器。您使用的url是flickr上的静态图像，OpenLayers需要将其作为ImageStatic处理。下面是使用flickr中最高分辨率图像的代码

var范围=[0,0,10000,7328]；
var分辨率=[64,32,16,8,4,2,1]；
var layer=新ol.layer.Image({
来源：new ol.source.ImageStatic({
网址：'https://live.staticflickr.com/8173/7993440342_6a1f281898_o_d.jpg',
imageExtent：范围
})
});
var map=新ol.map({
图层：[图层]，
目标：“地图”，
视图：新ol.view({
//将缩放级别调整为源提供的缩放级别
决议：决议，
//约束中心：中心不能设置在此范围之外
范围：范围
})
});
map.getView（）.fit（范围）
html，body，.map{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
上述答案有两个问题：


缺少对放大放大放大的支持
瓷砖之间的白线

我能弄明白。回答：
Hi。非常感谢你的回答。这帮了大忙。您能告诉我您在哪里找到该图像和相关元数据文件的zoomify源吗？还有，有没有一种方法可以将深度缩放图像分幅与openlayers一起使用？可以在浏览器控制台的“源”选项卡“openlayers”中看到分幅URL，openlayers没有任何内置的dzi定义文件解析，但它们使用的分幅网格似乎与openlayers兼容。但是，您如何知道最后一级中有多少行和列？瓷砖的尺寸是多少？平铺大小通常在xml文件中指定，我在sources选项卡中找不到该文件。当我在缩放级别中移动图像时，一个级别中的图像数量似乎在不断增加。你就是这么做的吗？或者还有别的吗？我放大了图像的右下角，以确保加载了具有最大x和y值的url，然后直接打开它以获取维度。我不知道它使用的是dzi文件，但在加载页面时检查网络选项卡发现，该文件使用的维度比我使用的更小，因为标称磁贴大小更小（尽管如果OpenLayers源代码中指定了254，则显然会提供更大的磁贴，任何溢出或重叠都将被忽略）。如果需要，可以通过XHR加载dzi XML并进行解析以构建OpenLayers源代码定义。缩放级别8的不寻常（对于OpenLayers）单个平铺可能是因为级别0是单个像素，因此偏移可能会根据平铺大小而变化，需要进行计算。