0

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

任何想法为什么会失败？谢谢。

4

2 回答 2

0

It's not right way e.g https://developer.mozilla.org/en-US/docs/WebGuide/API/File_System/Introduction#file

I don't see why you do not make a local server instead of fighting to access your file with local url.

Some times ago, I compiled some recipes to do so.

Open your command line, go to your code root dir and follow recipes depending of your favorite programming language.

于 2014-11-04T04:29:28.423 回答
0

如果图块位于子目录中（例如，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
  })
});
于 2014-11-21T08:52:11.263 回答