smellman · June 9, 2017 05:29
diff --git a/get_dem_from_gsimap.html b/get_dem_from_gsimap.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>Get dem from GSI dem tile</title>
    <!-- leaflet.js -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
      integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
      crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
      integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
      crossorigin=""></script>
    <script>
      var map;
      var init = function() {
        map = L.map('map').setView([34.72433, 139.39453], 16);
        L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
          attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"
        }).addTo(map);
        map.on('click', onMapClick);
      };
      var marker = L.marker();

      // event
      var onMapClick = function(e) {
        var real_x = long2tilewithdecimal(e.latlng.lng, 14);
        var real_y = lat2tilewithdecimal(e.latlng.lat, 14);
        var x = Math.floor(real_x);
        var y = Math.floor(real_y);
        var pos_x = Math.floor((real_x - x) * 256);
        var pos_y = Math.floor((real_y - y) * 256);
        var text = "Position: " + e.latlng.toString() + " ,x: " + x + " ,y: " + y;
        text = text + " ,pos_x: " + pos_x + " ,pos_y: " + pos_y;
        marker.setLatLng(e.latlng).addTo(map);

        var url = "https://cyberjapandata.gsi.go.jp/xyz/dem/14/" + x + "/" + y + ".txt";
        text = text + " ,url: " + url;
        document.getElementById("output").textContent = text;

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var new_line = String.fromCharCode(10);
              var lines = xhr.responseText.split(new_line);
              var dem = lines[pos_y].split(",")[pos_x];
              text = text + " ,標高: " + dem;
              document.getElementById("output").textContent = text;
            }
          }
        };
        xhr.open("GET", url);
        xhr.send();
      };

      var long2tilewithdecimal = function(lon, zoom) {
        return (lon+180)/360*Math.pow(2,zoom);
      };

      var lat2tilewithdecimal = function(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);
      };
      // Original Code: http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29
      var long2tile = function(lon,zoom) {
        return (Math.floor((lon+180)/360*Math.pow(2,zoom)));
      };
      var lat2tile = function(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)));
      };
    </script>
  </head>
  <body onload="init();">
    <h1>get dem</h1>
    <div id="container">
      <div id="map" style="width: 500px; height: 500px;">
      </div>
      <div>
        <p>クリックした地点の標高を出力します。</p>
        <p id="output">ここに出力されます</p>
      </div>
    </div>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Get dem from GSI dem tile</title>
	<!-- leaflet.js -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
	integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
	crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
	integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
	crossorigin=""></script>
	<script>
	var map;
	var init = function() {
	map = L.map('map').setView([34.72433, 139.39453], 16);
	L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"
	}).addTo(map);
	map.on('click', onMapClick);
	};
	var marker = L.marker();

	// event
	var onMapClick = function(e) {
	var real_x = long2tilewithdecimal(e.latlng.lng, 14);
	var real_y = lat2tilewithdecimal(e.latlng.lat, 14);
	var x = Math.floor(real_x);
	var y = Math.floor(real_y);
	var pos_x = Math.floor((real_x - x) * 256);
	var pos_y = Math.floor((real_y - y) * 256);
	var text = "Position: " + e.latlng.toString() + " ,x: " + x + " ,y: " + y;
	text = text + " ,pos_x: " + pos_x + " ,pos_y: " + pos_y;
	marker.setLatLng(e.latlng).addTo(map);

	var url = "https://cyberjapandata.gsi.go.jp/xyz/dem/14/" + x + "/" + y + ".txt";
	text = text + " ,url: " + url;
	document.getElementById("output").textContent = text;

	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
	if (xhr.readyState == 4) {
	if (xhr.status == 200) {
	var new_line = String.fromCharCode(10);
	var lines = xhr.responseText.split(new_line);
	var dem = lines[pos_y].split(",")[pos_x];
	text = text + " ,標高: " + dem;
	document.getElementById("output").textContent = text;
	}
	}
	};
	xhr.open("GET", url);
	xhr.send();
	};

	var long2tilewithdecimal = function(lon, zoom) {
	return (lon+180)/360*Math.pow(2,zoom);
	};

	var lat2tilewithdecimal = function(lat, zoom) {
	return (1-Math.log(Math.tan(latMath.PI/180) + 1/Math.cos(latMath.PI/180))/Math.PI)/2 *Math.pow(2,zoom);
	};
	// Original Code: http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29
	var long2tile = function(lon,zoom) {
	return (Math.floor((lon+180)/360*Math.pow(2,zoom)));
	};
	var lat2tile = function(lat,zoom) {
	return (Math.floor((1-Math.log(Math.tan(latMath.PI/180) + 1/Math.cos(latMath.PI/180))/Math.PI)/2 *Math.pow(2,zoom)));
	};
	</script>
	</head>
	<body onload="init();">
	<h1>get dem</h1>
	<div id="container">
	<div id="map" style="width: 500px; height: 500px;">
	</div>
	<div>
	<p>クリックした地点の標高を出力します。</p>
	<p id="output">ここに出力されます</p>
	</div>
	</div>
	</body>
	</html>
No results found