世界の測量

Sibling of "Relevant, Timely, and Accurate, " but much lighter and shorter ※自らの所属する組織の見解を示すものでない

タイルパス→タイル位置ツール xyz.html

タイルパスをタイル位置に変換して地図上に表示する xyz.html を作成した。CC0。
f:id:hfu:20140304035957p:plain
http://handygeospatial.github.io/mapsites/xyz.html?16/58509/24181.png みたいな感じで、?の後ろにタイルパスを入れると、タイル矩形を地図に表現するだけの簡単なツールである。

ソース

<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<style>
body {padding: 0; margin: 0}
html, body, #map {height: 100%; width: 100%;}
.leaflet-container {background: #fff;}
</style>
</head>
<body>
<div id="map">
<script>
tile2lng = function(x, z) {
  return x / Math.pow(2, z) * 360 - 180;
}
tile2lat = function(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)));
}

if(!document.location.href.split('?')[1]) {
  document.location.href += '?16/58509/24181.png';
}
var zxy = document.location.href.split('?')[1].split('/').map(parseFloat);
var lng0 = tile2lng(zxy[1], zxy[0]);
var lng1 = tile2lng(zxy[1] + 1, zxy[0]);
var lat0 = tile2lat(zxy[2] + 1, zxy[0]);
var lat1 = tile2lat(zxy[2], zxy[0]);
var bounds = [[lat0, lng0], [lat1, lng1]];

var map = L.map('map');
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', 
  {attribution: '地理院タイル'}).addTo(map);
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
map.fitBounds(bounds);
</script>
</body>
</html>