在OL3中加載本地zoomify切片集

Question

我從一些數字化地圖圖像生成了一個zoomify圖塊，現在想使用OL3在網站上顯示該地圖。 但是，我的腳本當前無法從本地文件uri加載該地圖（后來，在生產中，我將在某些Web服務器上上傳圖塊，並使用HTTP引用圖塊）。 這是我到目前為止的內容：

  var url = 'file:///home/user/map_zoomfiy/';
  var imgWidth = 17244;
  var imgHeight = 9684;

  var imgCenter = [imgWidth / 2, - imgHeight / 2];

  var proj = new ol.proj.Projection({
    code: 'ZOOMIFY',
    units: 'pixels',
    extend: [0, 0, imgWidth, imgHeight]
  });

  var source = new ol.source.Zoomify({
    url: url,
    size: [imgWidth, imgHeight],
    crossOrigin: 'anonymous'
  });

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: source
      })
    ],
    view: new ol.View({
      projection: proj,
      center: imgCenter,
      zoom: 1
    })
  });

</script>

有什么想法為什么會失敗嗎？ 謝謝。

Answer 1

這不是正確的方法，例如https://developer.mozilla.org/en-US/docs/WebGuide/API/File_System/Introduction#file

我不明白為什么您不制作本地服務器而不是爭用本地URL訪問文件。

有時候，我編寫了一些食譜來做到這一點。

打開命令行，轉到代碼根目錄，然后根據您喜歡的編程語言編寫食譜。

Answer 2

如果tiles_zoomify貼位於子目錄（例如， tiles_zoomify ）中，則應該可以進行以下操作

var url = 'tiles_zoomify/';
var imgWidth = 17244;
var imgHeight = 9684;

var imgCenter = [imgWidth / 2, - imgHeight / 2];

var proj = new ol.proj.Projection({
  code: 'ZOOMIFY',
  units: 'pixels',
  extend: [0, 0, imgWidth, imgHeight]
});

var source = new ol.source.Zoomify({
  url: url,
  size: [imgWidth, imgHeight],
  crossOrigin: 'anonymous'
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: source
    })
  ],
  view: new ol.View({
    projection: proj,
    center: imgCenter,
    zoom: 1
  })
});