Need Help Switch X and Y in TileMapService

CesiumJS
1

I am trying to figure out how to switch the X and Y in TileMapServiceImageryProvider because the tiles displayed in the globe are out of order. Can someone point me in the right direction?

Thanks!

2

Still need help on this plz

3

Here’s some code I use for generic TMS services (which don’t provide a TileMapService resource).
You don’t have to use the proxy class I created, it’s only for testing if CORS is available, you can use a more straightforward one, as in the many existing Cesium examples. Also the API might not be optimal due to some other constraints I have, so you might want to adapt it a little. The core is in the formatUrl method, just swapping around x-y coordinates, nothing fancy really.
I don’t know if this helps at all…

_.TMSLayer = function(baseUrl, yFlip, swLat, swLng, neLat, neLng) {
   
    if(baseUrl.indexOf("$z") == -1) {
        baseUrl = baseUrl + "/$z/$x/$y.png";
    }
   
    this._url = baseUrl;
   
    this._yFlip = yFlip;
   
    this._proxy = new _.Proxy(this.formatUrl(0, 0, 0));
   
    this._tileDiscardPolicy = undefined;

    this._errorEvent = new Cesium.Event();

    this._credit = undefined;

    this._tileWidth = 256;
    this._tileHeight = 256;
    this._minimumLevel = 0;
    this._maximumLevel = 18;
    this._tilingScheme = new Cesium.WebMercatorTilingScheme();
    if(swLat && swLng && neLat && neLng) {
        var extent = new Cesium.Extent(Cesium.Math.toRadians(swLng), Cesium.Math.toRadians(swLat), Cesium.Math.toRadians(neLng), Cesium.Math.toRadians(neLat));
        extent = this._tilingScheme.extent.contains(extent) ? extent : this._tilingScheme.extent;
        this._extent = extent;
    } else {
        this._extent = this._tilingScheme.extent;
    }
    this._ready = true;
   
}

_.TMSLayer.prototype = new Cesium.TileMapServiceImageryProvider();

_.TMSLayer.prototype.formatUrl = function(x, y, level) {
    return this._url.replace("$z", level).replace("$y", this._yFlip ? y : (1 << level) - y - 1).replace("$x", x);
}

// rewrite the requestImage method to use the baseUrl pattern
_.TMSLayer.prototype.requestImage = function(x, y, level) {
    return Cesium.ImageryProvider.loadImage(this, this._proxy.getURL(this.formatUrl(x, y, level)));
};

_.Proxy = function(testUrl) {
    if(!testUrl) {
        return;
    }
    // check for URL
    this.directURL = testUrl.indexOf(window.location.protocol + "//" + window.location.host) == 0;
    // check for CORS support on both sides
    if(!this.directURL) {
        var _self = this;
        // Create the XHR object.
        function createCORSRequest(method, url) {
            var xhr = new XMLHttpRequest();
            if ("withCredentials" in xhr) {
                // XHR for Chrome/Firefox/Opera/Safari.
                xhr.open(method, url, true);
            } else if (typeof XDomainRequest != "undefined") {
                // XDomainRequest for IE.
                xhr = new XDomainRequest();
                xhr.open(method, url);
            } else {
                // CORS not supported.
                xhr = null;
            }
            return xhr;
        }

        var xhr = createCORSRequest('GET', testUrl);
        if (!xhr) {
            return;
        }

        // Response handlers.
        xhr.onload = function() {
            _self.directURL = true; //xhr.getResponseHeader('Access-Control-Allow-Origin') != null;
        };

        xhr.onerror = function() {
            _self.directURL = false;
        };

        xhr.send();
    }
}

_.Proxy.prototype.getURL = function(resource) {
    if(this.directURL) {
        return resource;
    } else {
        return '/proxy/?targetURL=' + encodeURIComponent(resource);
    }
}
4

Thank you Thomas, this does help!