使用 Bing Maps Quadkeys 作为 Openlayers 3 Tile 源

Question

我有许多图块源在旧的 Silverlight 应用程序中使用 Bing Maps 的 Quadkey 系统，我想在新的 Openlayers 3 地图中使用它们。

我找到了几个函数示例，这些函数会将这些源代码转换为 Leaflet.js，但 OL3 的语法有些不同，通读 API 文档表明有一个 ol.Tile.coord class 但如果我理解正确的话，这是一项实验性功能，可能需要从源代码进行自定义构建。

GitHub 页面上提到了此类功能，但我不知道是否必须使用此源代码编译构建： https://github.com/openlayers/ol3/blob/5c5364bbb7e8df76f18242ad665c87ca08a76e76/src/ol/source/bingmapssource.js

任何人都可以提供这种类型转换的示例，或者确实有人知道最新的 (3.8.2) 版本的 OL3 是否支持四键方法？

这是传单示例：

var BingLayer = L.TileLayer.extend({
getTileUrl: function (tilePoint) {
    this._adjustTilePoint(tilePoint);
    return L.Util.template(this._url, {
        s: this._getSubdomain(tilePoint),
        q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl())
    });
},
_quadKey: function (x, y, z) {
    var quadKey = [];
    for (var i = z; i > 0; i--) {
        var digit = '0';
        var mask = 1 << (i - 1);
        if ((x & mask) != 0) {
            digit++;
        }
        if ((y & mask) != 0) {
            digit++;
            digit++;
        }
        quadKey.push(digit);
    }
    return quadKey.join('');
}
});

这是现有的 Silverlight 代码：

public override Uri GetUri(int x, int y, int zoomLevel, bool getPrintLink)
    {
        Uri uri = null;
        if (this.Covers(x, y, zoomLevel))
        {
            QuadKey qk = new QuadKey(x, y, zoomLevel);
            if (getPrintLink)
            {
                uri = new Uri(this.CurrentHostURL + "/tiles/NL/" + zoomLevel.ToString() + "/" + qk.Key + ".ipic", UriKind.RelativeOrAbsolute);
            }
            else
            {
                uri = new Uri("http://tileserver.satmap.com/NL/" + zoomLevel.ToString() + "/" + qk.Key + ".ipic", UriKind.RelativeOrAbsolute);
            }
        }
        return uri;
    }

任何见解都将不胜感激，因为我在许多论坛和无数页的搜索结果中进行了搜索，但仍未找到解决方案。

Answer 1

据我所知，您的 _quadKey 函数是正确的。可能出现的问题是理解提供给 URL 函数的 ol.TileCoord。

在 OpenLayers 3.7 及更高版本中，所有 TileCoord 均以左上角为原点计算。此外，X和Y坐标自然增加，所以TileCoord的X和Y坐标对应二维轴的正常概念。

给定缩放级别的左上图块将始终具有 X=0 和 Y=-1。下面的瓷砖将有 X=0 和 Y=-2； Y 永远是负数。

一些地图应用程序，例如 Bing，也使用左上角作为图块原点，但让 Y coordinate increase downwards。左上角的图块将是 X=0 和 Y=0，而下方的图块将是 X=0 和 Y=1。

为了计算四键，Y坐标必须反转并调整一个。 This should work:

// this is unchanged from the question
var quadkey = function (x, y, z) {
    var quadKey = [];
    for (var i = z; i > 0; i--) {
        var digit = '0';
        var mask = 1 << (i - 1);
        if ((x & mask) != 0) {
            digit++;
        }
        if ((y & mask) != 0) {
            digit++;
            digit++;
        }
        quadKey.push(digit);
    }
    return quadKey.join('');
};

var quadKeyLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        maxZoom: 19,
        tileUrlFunction: function (tileCoord, pixelRatio, projection) {
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = -tileCoord[2] - 1;
            return "//example.com/r" + quadkey(x, y, z);
        }
    })
});

使用 Bing Maps Quadkeys 作为 Openlayers 3 Tile 源

Using Bing Maps Quadkeys as Openlayers 3 Tile source

bing-maps

openlayers-3

quadtree