使用Bing Maps四键作为Openlayers 3 Tile源 [英] Using Bing Maps Quadkeys as Openlayers 3 Tile source

问题描述

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

I have a number of tile sources which utilise Bing Maps' Quadkey system in an old Silverlight application and I would like to use them in a new Openlayers 3 map.

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

I have found several examples of functions which will convert these sources for Leaflet.js but the syntax is somewhat different for OL3 and reading through the API docs indicates that there is an ol.Tile.coord class but if I understand correctly this is an experimental feature and might require a custom build from the source code.

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

There is reference to such functionality on the GitHub pages but I don't know if I have to compile a build with this source: https://github.com/openlayers/ol3/blob/5c5364bbb7e8df76f18242ad665c87ca08a76e76/src/ol/source/bingmapssource.js

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

Can anyone provide an example of this type of conversion or indeed does anyone know if the latest (3.8.2) version of OL3 supports the quadkey method?

这是传单示例:

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代码:

And this is the exisiting Silverlight code:

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

任何见识都会受到赞赏，因为我在没有找到解决方案的情况下拖曳了许多论坛和无数页面的搜索结果.

Any insight would be appreciated as I've trawled many forums and countless pages of search results without finding a solution.

推荐答案

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

As far as I can see, your _quadKey function is correct. The issue that might arise is understanding the ol.TileCoord provided to the URL function.

在OpenLayers 3.7和更高版本中，所有TileCoord均以左上角为原点进行计算.此外，X和Y坐标都自然增加，因此TileCoord的X和Y坐标对应于二维轴的法线概念.

In OpenLayers 3.7 and later, all TileCoords are calculated with the top left corner as their origin. Furthermore, both the X and Y coordinates increase naturally, so that the X and Y coordinates of a TileCoord corresponds to the normal concepts of a two-dimensional axis.

给定缩放级别的左上图块将始终具有X = 0和Y = -1.下面的图块将具有X = 0和Y = -2； Y将始终为负.

The top left tile of a given zoom level will always have X=0 and Y=-1. The tile below that will have X=0 and Y=-2; Y will always be negative.

诸如Bing之类的某些地图绘制应用程序也使用左上角作为图块的原点，但允许 Y坐标向下增加.左上方的图块将为X = 0和Y = 0，而下方的图块将为X = 0和Y = 1.

Some mapping applications, such as Bing, also use the top left corner as the tile origin, but lets the Y coordinate increase downwards. The top left tile would the be X=0 and Y=0, while the tile below would be X=0 and Y=1.

为了计算四键，必须将Y坐标反转并调整一个. 这应该有效:

In order to calculate the quadkeys, the Y coordinate has to be inverted and adjusted by one. 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四键作为Openlayers 3 Tile源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！