//椭球相关参数计算 const a = 6378137; //长半轴 a const f = 1 / 298.257223563; //扁率 (a-b)/a const b = a * (1 - f);//短半轴 b const e = Math.sqrt(a * a - b * b) / a;//椭球第一偏心率 // console.log(a); // console.log(f); // console.log(b); // console.log(e); // console.log(e*e); function degToRad(deg) { return deg / 180 * Math.PI; } function radToDeg(rad) { return rad / Math.PI * 180; } function wgs84ToWebMercator(lat, lon) { let x = a * lon; let y = a * Math.log(Math.tan(Math.PI / 4 + lat / 2)); return { x: x, y: y }; } function webMercatorToWgs84(x, y) { let lon = x / a; let lat = 2 * Math.atan(Math.pow(Math.E, y / a)) - Math.PI / 2; return { lon: lon, lat: lat } } // console.log(wgs84ToWebMercator(degToRad(50), degToRad(50))); // console.log(wgs84ToWebMercator(degToRad(49.99999999999999), degToRad(49.99999999999999))); // let wgs = webMercatorToWgs84(5565974.539663678, 6446275.841017158); // console.log(wgs); // console.log('lat: ' + radToDeg(wgs.lat) + ',' // + 'lon:' + radToDeg(wgs.lon)); // console.log(2 * Math.atan(Math.pow(Math.E, 0 / a)) - Math.PI / 2); // console.log(radToDeg(webMercatorToWgs84(5565974.539663678, 0).lat)); function lon2tile(lon, z) { return (Math.floor((lon + 180) / 360 * Math.pow(2, z))); } function lat2tile(lat, z) { 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, z))); } function lon2x(lon, z) { return ((lon + 180) / 360 * Math.pow(2, z)); } function lat2y(lat, z) { return ((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, z)); } function tile2long(x, z) { return (x / Math.pow(2, z) * 360 - 180); } function tile2lat(y, z) { var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z); return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)))); } //test //22.7490073, 114.3781213 z=15 //let mappiece = Math.pow(2, zoom_level); //一个方向的地图块数 1块256个像素 // console.log(lon2tile(long, zoom_level)); // console.log(lat2tile(lat, zoom_level)); // console.log(lon2x(long, zoom_level)); // console.log(lat2y(lat, zoom_level)); // console.log('----------------------'); // console.log(tile2long(26794, zoom_level)); // console.log(tile2long(26794 + 1 / 256, zoom_level)); //https://tile.openstreetmap.org/z/x/y.png //https://tile.openstreetmap.org/15/26794/14256.png let zoom_level = 15; let lat = 22.7490073; let long = 114.3781213; let x = lon2x(long, zoom_level); let y = lat2y(lat, zoom_level); let tilex = lon2tile(long, zoom_level); let tiley = lat2tile(lat, zoom_level); let offsetx = Math.floor((x - tilex) * 256); let offsety = Math.floor((y - tiley) * 256); //计算出瓦片地图的基准坐标,假设显示的宽高为1600*900 let width = 1600; let height = 900; let minx = width / 2 - offsetx; let maxx = minx + 256; let miny = height / 2 - offsety; let maxy = miny + 256; //计算出四个方向各需要的块数 //p1 p2 p3 p4 上 下 左 右 let p1 = Math.floor(maxy / 256 + 0.5); let p2 = Math.floor((height - miny) / 256 + 0.5); let p3 = Math.floor(maxx / 256 + 0.5); let p4 = Math.floor((width - minx) / 256 + 0.5); //基于已知条件计算需要的各个tile let tiles = new Array(); tiles.push({ x: tilex, y: tiley }); for (let i = 1; i < p4; i++) { tiles.push({ x: tilex + i, y: tiley }); } for (let i = 1; i < p3; i++) { tiles.push({ x: tilex - i, y: tiley }); } for (let i = 1; i < p1; i++) { for (let j = 0; j < p3 + p4 - 1; j++) { tiles.push({ x: tilex - p3 + 1 + j, y: tiley - i }); } } for (let i = 1; i < p2; i++) { for (let j = 0; j < p3 + p4 - 1; j++) { tiles.push({ x: tilex - p3 + 1 + j, y: tiley + i }); } } console.log(tiles); console.log(tiles.length); //渲染问题 //通过与基准之间的位置关系计算渲染的坐标 //minx miny 即为基准tile当前渲染位置 for (let i = 0; i < tiles.length; i++) { const element = tiles[i]; let renderx = (element.x - tilex) * 256 + minx; let rendery = (element.y - tiley) * 256 + miny; console.log({ x: renderx, y: rendery }); }