html
1<!doctype html>2<html lang="ja">3 <head>4 <meta charset="UTF-8">5 <title>国土地理院</title>6 </head>7 8 <body>9 <div style="margin-left: 2em">10 <span>標高：</span><span id="elevation"></span><br />11 <span>データソース：</span><span id="elevationsrc"></span><br />12 <input type="button" value="button" onclick="buttonClick()">13 </div>14 15 <script src="https://maps.gsi.go.jp/js.lib/leaflet-1.2.0/leaflet.js"></script>16 <script src="https://maps.gsi.go.jp/js.lib/jquery/jquery-1.11.1.min.js"></script>17 <!--script src="./src/getElevation.js"></script-->18 19 <script>20 21/* 国土地理院 経緯度から標高を求めるプログラム 22 https://maps.gsi.go.jp/development/elevation.html 23-------------------------------------*/24 var GSI = {};25 var elevation;26 27 GSI.Footer = L.Class.extend({28 initialize: function () {},29 destroy: function () {},30 31 execRefresh: function (lon, lat, zoom) {32 if (!this._elevationLoader) {33 this._elevationLoader = new GSI.ElevationLoader();34 this._elevationLoader.on(35 "load",36 L.bind(function (e) {37 if (e.h == undefined) {38 console.log("この経緯度に対応する標高値はありません。");39 return;40 }41 elevation = e.h.toFixed(e.fixed != undefined ? e.fixed : 0);42 var tile = e.title;43 $("#elevation").html(elevation + "m");44 $("#elevationsrc").html(tile);45 console.log("標高： " + elevation + "m" + " データソース: " + tile);46 47 return elevation; //???????????????48 },this),49 ); 50 }51 this._elevationLoader.load({52 lat: lat,53 lng: lon,54 zoom: zoom,55 });56 },57 });58 59 _onImgLoad: function (url, current, tileInfo, img) {60 if (current != this._current) return;61 62 if (!this._canvas) {63 this._canvas = document.createElement("canvas");64 this._canvas.width = 256;65 this._canvas.height = 256;66 }67 68 var ctx = this._canvas.getContext("2d");69 ctx.drawImage(img, 0, 0);70 71 var imgData = ctx.getImageData(0, 0, 256, 256);72 var idx = tileInfo.pY * 256 * 4 + tileInfo.pX * 4;73 var r = imgData.data[idx + 0];74 var g = imgData.data[idx + 1];75 var b = imgData.data[idx + 2];76 var h = 0;77 78 if (r != 128 || g != 0 || b != 0) {79 var d = r * this.pow2_16 + g * this.pow2_8 + b;80 h = d < this.pow2_23 ? d : d - this.pow2_24;81 if (h == -this.pow2_23) h = 0;82 else h *= 0.01;83 this._destroyImage();84 85 this.fire("load", {86 h: h,87 title: url.title,88 fixed: url.fixed,89 pos: current.pos,90 });91 } else {92 this._onImgLoadError(url, current, tileInfo, img);93 }94 }, 95 _onImgLoadError: function (url, current, tileInfo, img) {96 if (current != this._current) return;97 this._load(current);98 },99 100 _getTileInfo: function (lat, lng, z) {101 var lng_rad = (lng * Math.PI) / 180;102 var R = 128 / Math.PI;103 var worldCoordX = R * (lng_rad + Math.PI);104 var pixelCoordX = worldCoordX * Math.pow(2, z);105 var tileCoordX = Math.floor(pixelCoordX / 256);106 107 var lat_rad = (lat * Math.PI) / 180;108 var worldCoordY =109 (-R / 2) *110 Math.log((1 + Math.sin(lat_rad)) / (1 - Math.sin(lat_rad))) +111 128;112 var pixelCoordY = worldCoordY * Math.pow(2, z);113 var tileCoordY = Math.floor(pixelCoordY / 256);114 115 return {116 x: tileCoordX,117 y: tileCoordY,118 pX: Math.floor(pixelCoordX - tileCoordX * 256),119 pY: Math.floor(pixelCoordY - tileCoordY * 256),120 };121 },122 });123 124/*------------------------- 125中省略 上記 https://maps.gsi.go.jp/development/elevation.html 参照 126-------------------------*/127 128 $(document).ready(function () {129 GSI.content = new GSI.Footer();130 });131 132 133/*----------------------------------------------------*/134 //window.onload = function () {135 function buttonClick(){136 137 /* 国土地理院:標高を求めるプログラム 138 https://maps.gsi.go.jp/development/elevation.html 139 ----------------------------------------*/140 // 富士山頂141 var lat = 35.36072876515965;142 var lng = 138.72743565863243;143///////////////////////////////////////144 const re = GSI.content.execRefresh(lng, lat, 17);145 console.log("値は " + re);146//////////////////////////////////////147 }148 149/* 上記からその後 標高を求めるプログラムを使って、例えば下記の動的lnglatデータの標高を求めたいと考えていますので、高速性も求めたいと思っています。 150 arr = [140.82639,38.30903],[140.82645,38.30889],[140.8266,38.30859],[140.8266,38.30859],[140.82619,38.30848],[140.82613,38.30846],[140.82613,38.30846],[140.82617,38.30824].... 151*/152 153 </script>154 </div>155 </body>156</html>157
0 コメント