Tell me, how can I get the coordinates of the corners of each tile?

var layers = { Streets: L.mapbox.tileLayer('mapbox.streets'), }; layers.Streets.on('tileload', function (e) { ... как-то получить координаты углов загрузившегося тайла ... });

Version leaflet 0.7.7. Thank you

    2 answers 2

    The {tile: ... , url: ... } object is passed to the tileload event handler. The tile element is an HTML <img /> element with some additional parameters. One of them is _leaflet_pos - indent in pixels from the upper left corner of the visible part of the map (since the parameter starts with an underscore, it is assumed that it is private, it will not be in the documentation, and it can easily be called in another version or be completely absent). You can also see these values ​​in the transform inline-style parameter. To convert pixels to coordinates, you can use the layerPointToLatLng method. For example:

     layers.Streets.on('tileload', function (e) { console.log(mymap.layerPointToLatLng(e.tile._leaflet_pos)); });

    See also:

    1. Source L.TileLayer
    • And how can I find the coordinates of the upper left corner? - RSalnikov September
    • one
      So that's how they will be at the output of mymap.layerPointToLatLng(e.tile._leaflet_pos) . If you need other angles, then in pixel coordinates you will need to add the size of the tile, then convert to the corner ones. - tutankhamun

    It seems everything turned out

     var layers = { Streets: L.mapbox.tileLayer('mapbox.streets'), }; layers.Streets.on('tileload', function (e) { var topLeft = map.layerPointToLatLng([e.tile._leaflet_pos.y, e.tile._leaflet_pos.x]); var topRight = map.layerPointToLatLng([e.tile._leaflet_pos.y, e.tile._leaflet_pos.x + layers.Streets.options.tileSize]); var downLeft = map.layerPointToLatLng([e.tile._leaflet_pos.y + layers.Streets.options.tileSize, e.tile._leaflet_pos.x]); var downRight = map.layerPointToLatLng([e.tile._leaflet_pos.y + layers.Streets.options.tileSize, e.tile._leaflet_pos.x + layers.Streets.options.tileSize]); L.marker([topLeft.lat, topLeft.lng]).addTo(map); L.marker([topRight.lat, topRight.lng]).addTo(map); L.marker([downLeft.lat, downLeft.lng]).addTo(map); L.marker([downRight.lat, downRight.lng]).addTo(map); });

    Maybe it could have been done somehow more elegantly ... And a strange behavior appeared - only half of the markers are drawn for some reason ... http://image.prntscr.com/image/c42fb1b161b74a55babce747a9d38355.png