国土地理院の標高を求めるプログラムの編集

実現したいこと

国土地理院のプログラムページ
https://maps.gsi.go.jp/development/elevation.html
そのプログラムでresults(標高)をライプラリ内ではなく、スクリプト内で得たい

前提

国土地理院にクライアントサイドで経緯度から標高を求めるプログラムがあります。
そのプログラムでresults(標高)をライプラリ内ではなく、スクリプト内で得たいと思っています。少し手を加えてやってみましたが、思う結果が得られません。詳しく言いますと実行ボタン1回目でundefined、2回目で値が得られます。
恐らく同期処理となっていないためと思われます。その処理コードを教えて頂きたく思います。宜しくお願いいたします。

発生している問題・エラーメッセージ

実行ボタン1回目でundefined、2回目で値が得られます。

該当のソースコード

htmlのコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="robots" content="noindex">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0"> 
7    <title>国土地理院</title>
8</head>
9<body>
10    <div>標高を求める<input type="button"  onclick="execdem()" value="実行"></div>
11    <script type="text/javascript" src="https://maps.gsi.go.jp/js.lib/leaflet-1.2.0/leaflet.js"></script>
12    <script type="text/javascript" src="https://maps.gsi.go.jp/js.lib/jquery/jquery-1.11.1.min.js"></script>
13    <script type="text/javascript" src="./elevation.js"></script>
14
15    <script>
16    var elev; var src;        
17    function execdem() {
18        //富士山山頂の座標(35.36072, 138.72743)を入れて計算
19        var lat = 35.36072; 
20        var lng = 138.72743; 
21        var zoom = 17;
22
23        elevLoader = new GSI.elevLoader();
24        //const startTime = performance.now(); // 開始時間
25        GSI.content.execRefresh(lng, lat, zoom);
26        //const endTime = performance.now(); // 終了時間
27        //console.log(endTime - startTime); // 何ミリ秒かかったかを表示する
28        alert(elev);
29
30    }
31    </script>    
32</body>
33</html>

ライブラリの編集コード

javascript
1var GSI = {};
2
3GSI.Footer = L.Class.extend({
4    execRefresh:  function (lng, lat, zoom) {
5
6        elevLoader.on(
7            "load",
8            L.bind(function (e) {
9                if (e.h !== undefined) {
10                    // toFixed(?):指定した少数点以下の桁数で数値を四捨五入した文字列
11                    elev = e.h.toFixed(0) + "m";
12                    src = e.title;
13                    //console.log('標高:'+ elev + ' src:' + src);
14                    //alert('標高:'+ elev + ' src:' + src); 
15                }else{
16                    elev = 0;
17                }
18            }, this)
19        );
20
21        elevLoader.load({
22            lat, lng, zoom
23        });     
24    },
25});
26
27GSI.elevLoader = L.Evented.extend({
28>>>>>以下上記リンクと同じ

juner

2025/01/23 00:26

こういうことでしょうか？動いている気がしますが……？ https://livecodes.io/?x=id/4pwjayrtwbg

shin2

2025/01/23 05:21

link先を試しましたが、思う結果が得らえませんでした。別回答を頂き、結果が出ましたので終了といたします。コメント有難うございました。

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

回答1件

ベストアンサー

execRefreshがPromiseを返すようにするといいと思います。

js
1    execRefresh: function (lng, lat, zoom) {
2        const { promise, resolve, reject } = Promise.withResolvers(); // これ
3        elevLoader.on(
4            "load",
5            L.bind(function (e) {
6                if (e.h !== undefined) {
7                    // toFixed(?):指定した少数点以下の桁数で数値を四捨五入した文字列
8                    elev = e.h.toFixed(0) + "m";
9                    src = e.title;
10                    //console.log('標高:'+ elev + ' src:' + src);
11                    //alert('標高:'+ elev + ' src:' + src); 
12                } else {
13                    elev = 0;
14                }
15                resolve(elev); // これ
16            }, this)
17        );
18
19        elevLoader.load({
20            lat, lng, zoom
21        });
22        return promise; // これ
23    },

js
1GSI.content.execRefresh(lng, lat, zoom).then(alert);

投稿2025/01/23 00:50

編集2025/01/23 04:46

Lhankor_Mhy

総合スコア37445

shin2

2025/01/23 05:23

回答ありがとうございます。試したところ問題が解決しました！ Promiseはまだまだ勉強不足です、有難うございました。ベストアンサーに選ばせていただきました。

Lhankor_Mhy

2025/01/23 08:44

前回の質問でも同様の回答をもらっていると思いますので、3度目は自力でご対応いただければと思います。 > 処理完了でコールバックを呼ぶのではなく Promise を返すように改造すれば async await で値を返すことが可能になるかもしれません。 https://teratail.com/questions/cyg32cbezp8wcx#reply-e0y7mse99w5xvw

shin2

2025/01/23 18:13

Lhankor_Mhy様　コメント有難うございますご指摘通り同じ質問をしていました。高齢になると一回りして同じ壁にぶつかって上達してないなぁと… 自分自身でびっくりです。そしてやっと公開できるプログラムが出来そうです。ご指摘有難うございました

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