Question

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

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

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

任何人都可以提供此类转换的示例，或者确实有人知道OL3的最新版本（3.8.2）是否支持quadkey方法吗？

这是传单示例：

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.

为了计算quadkeys，必须将Y坐标反转并调整为1。 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源

1 个答案: