使用Google Maps格式而不是Zoomify的XYZ图片图块查看器

问题描述

我正在尝试使用OpenLayers创建一个基本的图像查看器。我有一幅很大的图像,我将其分成Google Maps格式的图像图块,其中图块存储在一组编号的目录中,每个缩放级别对应一个。例如

Directory structure:
   /0
      /0
         0.jpg
   /1
      /0
         0.jpg  
         1.jpg
      /1
         0.jpg  
         1.jpg

我正在使用烧瓶,并做了一些研究,我正在使用以下代码初始化缩放级别为0-4的图像的地图:

// the image height and width values
var imgWidth = x;
var imgHeight = u;
var imgCenter = [imgWidth / 2,-imgHeight / 2];

var zoomMin = 0;
var zoomMax = 4;

var resolutions = [];
for (var i = zoomMax; i >= zoomMin; --i) {
    resolutions.push(Math.pow(2,i));
}

var extent = [0,-imgHeight,imgWidth,0];

var view = new ol.View({
    center: ol.extent.getCenter(extent),zoom: zoomMin,resolutions: resolutions
})

var source = new ol.source.TileImage({
    url: "tiles/{z}/{x}/{y}",tileGrid: new ol.tilegrid.TileGrid({
        resolutions: resolutions,origin: [0,0]
    })
});

var layer = new ol.layer.Tile({
    source: source,extent: extent
})

var map = new ol.Map({
    target: 'map',layers: [layer],view: view
});

要提供图像图块,我使用以下烧瓶视图,该视图从后端检索z / x / y图像图块:

@app.route('/tiles')
@app.route('/tiles/<int:z>/<int:x>/<int:y>',methods=['GET'])
def tiles(z,x,y):
    file = ....
    # retrieve the file with path of z/x/y.jpg 
    return file

运行此命令,将正确显示图块0/0 / 0.jpg的第一张图像。但是,放大时,磁贴的顺序不正确,对于不存在的磁贴,我遇到了404错误。我处理磁贴URL的方式是否有问题?任何帮助将不胜感激!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)