javascript - Convert xyz coordinate of a tile to longitudelatitude - Stack Overflow

admin管理员组

文章数量:1305076

I wanted to make a map using openlayers but center it a unique way. For example I have a z/x/y coordinate of 12/2045/-1362, how do I convert it to longitude/latitude? It's quite the polar opposite of this: How to get X Y Z coordinates of tile by click on Leaflet map

It's quite hard for me to get the logic of the above link and invert it. I hope someone here has an experience or a ready-made formula for this. Thanks

Later I'll this in rendering the center of my map like this:

var z = 12;
var x = 2045;
var y = -1362;

function convertXYZtoCoor(z, x, y) {
    // code here
    return [lng, lat];
}

var coor = convertXYZtoCoor(z, x, y);
var view = new ol.View({
                    center: ol.proj.transform(
                        [coor[0], coor[1]], 'EPSG:4326', 'EPSG:3857'),
                    zoom: z
            });

var map = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                target: 'map',
                view: view
          });

Hope my question is understood more thanks.

Edit: Added code

I wanted to make a map using openlayers but center it a unique way. For example I have a z/x/y coordinate of 12/2045/-1362, how do I convert it to longitude/latitude? It's quite the polar opposite of this: How to get X Y Z coordinates of tile by click on Leaflet map

It's quite hard for me to get the logic of the above link and invert it. I hope someone here has an experience or a ready-made formula for this. Thanks

Later I'll this in rendering the center of my map like this:

var z = 12;
var x = 2045;
var y = -1362;

function convertXYZtoCoor(z, x, y) {
    // code here
    return [lng, lat];
}

var coor = convertXYZtoCoor(z, x, y);
var view = new ol.View({
                    center: ol.proj.transform(
                        [coor[0], coor[1]], 'EPSG:4326', 'EPSG:3857'),
                    zoom: z
            });

var map = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                target: 'map',
                view: view
          });

Hope my question is understood more thanks.

Edit: Added code

• javascript
• gis
• openlayers-3

Share Improve this question Follow edited May 23, 2017 at 12:00 CommunityBot 111 silver badge asked Aug 17, 2015 at 9:11 The BassmanThe Bassman 2,36155 gold badges3030 silver badges4141 bronze badges 8

• For me, it's not clear, are you looking for permalink? – Jonatas Walker Commented Aug 17, 2015 at 9:56
• I read the link sorry. No, you take the existing code from the link i created and just change the center value based on tile value 12/2045/-1362 by converting it to lat/lng. Is this possible? – The Bassman Commented Aug 17, 2015 at 10:25
• I don't think so. Let's see what others tell, in the meanwhile my guess is that you rethink your use case. – Jonatas Walker Commented Aug 17, 2015 at 10:44
• Where/How did you get this 12/2045/-1362? – Jonatas Walker Commented Aug 17, 2015 at 13:43
• openlayers/en/v3.5.0/examples/canvas-tiles.html?q=tiles check this one, by default the zoom level here is 10, i just zoomed it further to 12. Just edited my question further.. What my client wants to happen is that given a particular xyz tile coordinate, I would display it using openlayers which that coordinate should be the value of the ol.view so that tile is the center of the view. – The Bassman Commented Aug 17, 2015 at 13:59

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 7

var tileExtent = function(tileCoord){
    var z = tileCoord[0];
    var x = tileCoord[1];
    var y = tileCoord[2];
    var tileGridOrigin = tileGrid.getOrigin(z);
    var tileSizeAtResolution = tileGrid.getTileSize(z) * tileGrid.getResolution(z);
    return [
        tileGridOrigin[0] + tileSizeAtResolution * x,
        tileGridOrigin[1] + tileSizeAtResolution * y,
        tileGridOrigin[0] + tileSizeAtResolution * (x + 1),
        tileGridOrigin[1] + tileSizeAtResolution * (y + 1)
    ];
}

You can test/verify at http://jsfiddle/eurx57s7/

Note (stolen from the ol3 example, but it applies here to): The tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left)

本文标签： javascriptConvert xyz coordinate of a tile to longitudelatitudeStack Overflow