OL3 V3.1.1到V3.8.2打破了PouchDB中的ol.source.xyz

Question

我最近将我的Cordova移动地图应用程序从OL3 V3.1.1更新到V3.7.0到V3.8.2。

我使用PouchDB来存储离线图块，并且可以看到V3.1.1图块。 这是代码片段：

    OSM_bc_offline_pouchdb = new ol.layer.Tile({
        //maxResolution: 5000,
        //extent: BC,
        //projection: spherical_mercator,
        //crossOrigin: 'anonymous',
        source: new ol.source.XYZ({
            //adapted from: http://jsfiddle.net/gussy/LCNWC/
            tileLoadFunction: function (imageTile, src) {
                pouchTilesDB_osm_bc_baselayer.getAttachment(src, 'tile', function (err, res) {
                    if (err && err.error == 'not_found')
                        return;
                    //if(!res) return;  // ?issue -> causes map refresh on movement to stop 
                    imageTile.getImage().src = window.URL.createObjectURL(res);
                });
            },
            tileUrlFunction: function (coordinate, projection) {
                if (coordinate == null)
                    return undefined;
                // OSM NW origin style URL
                var z = coordinate[0];
                var x = coordinate[1];
                var y = coordinate[2];
                var imgURL = ["tile", z, x, y].join('_');
                return imgURL;
            }
        })
    });
    trails_mobileMap.addLayer(OSM_bc_offline_pouchdb);
    OSM_bc_offline_pouchdb.setVisible(true);

移至V3.7.0和V3.8.2会导致切片无法显示。 阅读API，我想知道为什么会这样。

我的代码需要更新才能使用OL-V3.8.2吗？

谢谢，彼得

Answer 1

您的问题可能与OpenLayers 3.7.0中对ol.TileCoord的更改有关。 从发行说明：

到目前为止，API暴露了两种不同类型的ol.TileCoord切片坐标：从左到右增加的内部坐标，以及可能向下增加的转换，如由切片网格上的转换函数定义的。 通过此更改，API现在仅公开从左到右增加的切片坐标。

以前，OpenLayers创建的切片网格的原点位于范围的左上角或左下角。 为了使应用程序开发人员能够更轻松地将切片坐标转换为常见的XYZ切片方案，OpenLayers内部创建的所有切片网格现在都位于范围的左上角。

此更改会影响为ol.source.Tile配置自定义tileUrlFunction的应用程序。 以前，使用相当不可预测的切片坐标调用tileUrlFunction，具体取决于在调用tileUrlFunction之前是否发生了切片坐标转换。 现在总是使用OpenLayers tile坐标调用它。 要将这些转换为常见的XYZ切片方案，自定义tileUrlFunction必须更改ol.TileCoord的y值（切片行）：

function tileUrlFunction = function(tileCoord, pixelRatio, projection){
  var urlTemplate = '{z}/{x}/{y}';
  return urlTemplate
      .replace('{z}', tileCoord[0].toString())
      .replace('{x}', tileCoord[1].toString())
      .replace('{y}', (-tileCoord[2] - 1).toString());
}

如果这是您的问题，请尝试将tileUrlFunction更改为

function (coordinate, projection) {
    if (coordinate == null)
        return undefined;
    // OSM NW origin style URL
    var z = coordinate[0];
    var x = coordinate[1];
    var y = (-coordinate[2] - 1);
    var imgURL = ["tile", z, x, y].join('_');
    return imgURL;
}