在OL3中加载本地缩放平铺集

Question

我从一些数字化地图图像中生成了一个缩放平铺集，现在我想使用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>

你知道为什么会失败吗？Thx。

Answer 1

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

我不明白你为什么不制作一个本地服务器，而不是努力用本地url访问你的文件。

几次前，我整理了一些食谱来做到这一点。

打开你的命令行，转到你的代码根目录，根据你喜欢的编程语言遵循食谱。

Answer 2

如果瓦片在子目录中（例如，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
  })
});