JavaScriptでピクセル座標と緯度経度を相互変換するツールを作ったよ

作ったのがコレ。
ワンファイルの静的ページで実現してます。

下記のようにJavaScriptで計算しています。
計算式についてはコチラを参考にさせて頂きました。

緯度経度尺度からピクセル座標、タイル座標を計算

const L = 85.05112878; // 最大緯度

var latLon2tile = function(lat, lon, zoom) {
    lat = parseFloat(lat); // 緯度
    lon = parseFloat(lon); // 経度
    zoom = parseInt(zoom); // 尺度

    var pixelX = parseInt(Math.pow(2, zoom + 7) * (lon / 180 + 1));
    var tileX = parseInt(pixelX / 256);

    var pixelY = parseInt((Math.pow(2, zoom + 7) / Math.PI) * ((-1 * Math.atanh(Math.sin((Math.PI / 180) * lat))) + Math.atanh(Math.sin((Math.PI / 180) * L))));
    var tileY = parseInt(pixelY / 256);

    $('#pixelX').val(pixelX); // ピクセル座標X
    $('#tileX').val(tileX); // タイル座標X
    $('#pixelY').val(pixelY); // ピクセル座標Y
    $('#tileY').val(tileY); // タイル座標Y
};

ピクセル座標と尺度から緯度経度を計算

var tile2LatLon = function(pixelX, pixelY, zoom) {
    pixelX = parseInt(pixelX); // ピクセル座標X
    pixelY = parseInt(pixelY); // ピクセル座標Y
    zoom = parseInt(zoom); // 尺度

    var tileX = parseInt(pixelX / 256); // タイル座標X
    var tileY = parseInt(pixelY / 256); // タイル座標Y
    $('#tileX').val(tileX);
    $('#tileY').val(tileY);

    var lat = 180 * (pixelX / Math.pow(2, zoom + 7) - 1);
    var lon = (180 / Math.PI) * (Math.asin(Math.tanh((-1 * Math.PI / Math.pow(2, zoom + 7) * pixelY) + Math.atanh(Math.sin(Math.PI / 180 * L)))));
    $('#latitude').val(lat); // 緯度
    $('#longitude').val(lon); // 経度
};
NEVER LOST AGAIN グーグルマップ誕生 (世界を変えた地図)

作ってみたJavaScript, jQuery

Posted by danishi