javascriptで値の渡し方が実現できない

実現したいこと

コンソールで値を取得すること

発生している問題・分からないこと

該当ソースのreの値(標高)を求めたい
///////////////////////////////////////
const re = GSI.content.execRefresh(lng, lat, 17);
console.log("値は　" + re);
//////////////////////////////////////

該当のソースコード

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

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

return elevation; //を追加しましたが
値がえられずにいます

補足

otn

2024/05/19 13:55

> コンソールで値を取得すること具体的にはどういうことでしょうか？「コンソールに値を表示したい」ということでしょうか？また、現在どういう状況でしょうか？否定文を使わずに書いてください。 > console.log("値は　" + re); というコードがありますが、・"値は "も表示されていないので、この関数 buttonClick が呼ばれていない・"値は "だけが表示され、その後が空欄・その他。エラーメッセージが出るなど

shin2

2024/05/19 15:05

コメント有り難うございます 43,44行目に答えが得られていますが、画面上ではなく、その後値を利用したいので、プログラム上での値を取得したいです。この言い方で伝わりますか？その後の問いは、パソコンから離れていて就寝しようと思いますので、明後日に返事したいとおもいます。では

otn

2024/05/19 15:52

> 画面上ではなく、その後値を利用したいので、プログラム上での値を取得したいです。ということは、「実現したいこと：コンソールで値を取得すること」は間違いと言うことですね。書き直しましょう。どうしたいのかを＊＊具体的に＊＊ちゃんと書きましょう。 > 43,44行目に答えが得られていますが、 43,44にreは出てこないのですが、「145行目で答えが得られていますが」の書き間違いでしょうか？

shin2

2024/05/19 19:15

otn様　追加コメント有難うございます 2024/05/19 22:55のコメント返しですが、 > console.log("値は　" + re);　＞＞＞　値は　undefined　となります 2024/05/20 00:52のコメント返しなかなかこちらの思っている事が表現できなく申し訳ありません 43行の答えは$("#elevation").htmlに書き込まれるので、同じ答えをREで取得したいとかんがえての、問い合わせでした。　この場合コンソールで取得する　という表現以外検討が付きません。どの様な表現が正しいのでしょうか？

Upposer

2024/05/21 03:56 編集

問題は解決しましたか? https://geometrydashlite.online

otn

2024/05/20 08:51

> コンソールで取得するの「コンソール」が「開発者ツールのコンソール」のことであれば、「コンソールで取得する」というのは、「開発者ツールのコンソールに表示する（or出力する）」という意味になります。つまり、console.log("値は　" + re); ですね。 > 値は　undefined　となりますということなので、その時点の re の値は undefined で、その旨は表示されているので、目的は達成できていることになります。 > 43行の答えは$("#elevation").htmlに書き込まれるので、同じ答えをREで取得したいとかんがえての、「43行の答え」「REで取得したい」というのが何のことか分かりませんが、そのあたりに何かコンソールに表示したい値があるのなら、それをconsole.logで書けば良いだけですし、「REで取得したい」がもし、「REという変数に代入したい」であれば、代入すれば良いだけです。そういうのは自明なので、おそらくやりたいこととは違うのでしょうね。あなたに当てはまるかどうか分かりませんが、あくまで一般路でのアドバイスですが、「何を言いたいのかわからないことを書いている人」というのは、やりたいこと・実現したいことを、具体的にストレートに書かずに、何かもっとうまく言おうとして失敗している事が多いです。あるいは頭の中に浮かんだことをそのまま書いているケースも多いです。良いやり方としては、「相手に伝えたいことを明確化（言語化）」して、それを相手に伝えるためにはどういうアプローチで何をどう伝えれば良いかを「設計」します。その設計図に従って、日本語をコーディングします。これは「自分のやりたいことを、言語処理系に理解できる形に変換して、筋道立てて、言語処理系に伝える」という「プログラミング」と同じ構造なので、「プログラミングがうまくできない人が、その状況を赤の他人にうまく伝えられない」というのはごく普通です。 shin2さんは大丈夫ですが、もっとその手前の段階の「日本語シンタックスエラー」の人も多いですね。

行動規範の内容に同意します

回答2件

elevation の値を利用する処理をするには、return elevation; のところにその処理を書きます。非同期処理のようですので、コールバック関数が execRefresh() の戻り値を返すことはできません。execRefresh() の呼び出しから帰ってきた時点ではまだ evlevation の値が用意できていないと思われます。

コードの雰囲気から想像すると、this._elevationLoader.load() の処理完了でコールバックを呼ぶのではなく Promise を返すように改造すれば async await で値を返すことが可能になるかもしれません。

投稿2024/05/19 22:45

編集2024/05/20 00:35