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;
}