Долгота, широта до пикселя OSM в плитке 256x256 - PullRequest
Новая
       13

Долгота, широта до пикселя OSM в плитке 256x256

0 голосов
/ 08 февраля 2019

OpenStreetMap (OSM) имеет Tile-сервер.Плитка - это изображение мира размером 256x256 с определенным увеличением.

У меня есть долгота и широта, и я могу найти правильную плитку с помощью , используя эту функцию .

function long2tile(lon,zoom) {return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }
function lat2tile(lat,zoom)  { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }
var zoom = 4;
var x= long2tile(13.393562,zoom);
var y = lat2tile(52.519582,zoom);
document.getElementById('a').src='https://tile.openstreetmap.org/'+zoom+'/'+ x+'/'+y+'.png';
<img src="" id="a" style="border:1px solid black"/>

Моя проблема в том, что я хотел бы знать, какую координату в пикселе 256x256 это местоположение, которое я установил.

Как получить координаты xyвнутри этой плитки?

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Округление имеет значение! 

function lo2t(lon,zoom){
    return (lon+180)/360*Math.pow(2,zoom);
}
function la2t(lat,zoom){
    return (1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom);
}
function long2tile(lon,zoom) {return Math.floor(lo2t(lon,zoom)); }
function lat2tile(lat,zoom)  {return Math.floor(la2t(lat,zoom)); }
function long2tfac(lon,zoom) {
    return long2tile(lon,zoom)-lo2t(lon,zoom);
}
function lat2tfac(lat,zoom) {
    return lat2tile(lat,zoom)-la2t(lat,zoom);
}
var zoom = 4;
var x= long2tile(13.393562,zoom);
var y = lat2tile(52.519582,zoom);
document.getElementById('a').src='https://tile.openstreetmap.org/'+zoom+'/'+ x+'/'+y+'.png';
var point = document.getElementById('point');
var pos=";"; pos+="left:"+long2tfac(13.393562,zoom)*-256;
 pos+="px;top:"+lat2tfac(52.519582,zoom)*-256;
 point.setAttribute('style',point.getAttribute('style')+pos+'px;');
<img src="" id="a" style="border:1px solid black"/>
<div id="point" style="display:block; position:absolute; width:30px; height:30px; border:1px solid black; border-radius:15px;">&nbsp;</div>
0 голосов
/ 08 февраля 2019

Вы можете использовать библиотеку OpenLayers для этой цели, она может управлять всеми видами вычислений и преобразований для вас: 

const source = new ol.source.OSM();
const grid = source.getTileGrid();

const projectedCoordinate=ol.proj.fromLonLat([13.393562,52.519582], "EPSG:3857");
const tileCoord = grid.getTileCoordForCoordAndZ(projectedCoordinate, 4/*zoom-level*/);
const projectedExtent=grid.getTileCoordExtent(tileCoord);
const extent = ol.proj.transformExtent(projectedExtent, ol.proj.get('EPSG:3857'), ol.proj.get('EPSG:4326'));
const yWidth=extent[2]-extent[0];
const xWidth=extent[3]-extent[1];
const tileUrlFunction = source.getTileUrlFunction();
const url=tileUrlFunction(tileCoord, 1, ol.proj.get('EPSG:3857'))

function convertPixelToLonLat(xPixel,yPixel){
  if(!(xPixel>=0 && xPixel<=256)){
    throw new Error('invalid xPixel');
  }
   if(!(yPixel>=0 && yPixel<=256)){
    throw new Error('invalid yPixel');
  }
  
  return {lon:extent[1]+xWidth/256*xPixel,lat:extent[2]-yWidth/256*yPixel}
}
document.querySelector('img').src=url;
console.log("top-left of tile:",convertPixelToLonLat(0,0))
console.log("bottom-right of tile:",convertPixelToLonLat(256,256))
console.log("middle of tile:",convertPixelToLonLat(128,128))
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <title>Test</title>
</head>
<body>
 <img />
 </body>
</html>
...