javascriptで、連想配列に追加した要素の実態が無い

実現したいこと

javascriptの連想配列に追加した要素を実在させたい

前提

Geojson書式コード(track)に、国土地理院地図サーバから求めた標高値を.filterを使い
要素3番目に追加する(1番目：経度、2番目：緯度、3番目：高度）
次にそのtrackを.filterを用いてGPXに書式変換します。

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

ソースコード内コメントの[1]と[2]に要素の相違が有ります
[1]console.log(coordinates);では3要素に表示されますが、
[2]console.log(...coordinate[3]); では3番目の要素がundefinedとなって、
値を参照出来なくなります

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0, ,user-scalable=no">
7</head>
8
9<body>
10  <button class="work" onclick="exportGPX()">
11    <i class="fa-solid fa-print">exportGPX</i>
12  </button>
13  <script type="text/javascript" src="https://maps.gsi.go.jp/js.lib/leaflet-1.2.0/leaflet.js"></script>
14  <script type="text/javascript" src="https://maps.gsi.go.jp/js.lib/jquery/jquery-1.11.1.min.js"></script>
15  <script>
16  var track = {
17    "type": "FeatureCollection",
18    "features": [
19        {
20            "type": "Feature",
21            "properties": {
22                "id": "waypoints",
23                "names":"|"
24            },
25            "geometry": {
26                "type": "MultiPoint",
27                "coordinates":[[140.834125,38.310143],[140.860454,38.222667]]
28            }
29        },
30        {
31            "type": "Feature",
32            "properties": {
33                "id": "line"
34            },
35            "geometry": {
36                "type": "LineString",
37                "coordinates":[
38    [140.83413,38.31014],[140.83424,38.30989],[140.86038,38.22176],[140.86069,38.22186],[140.86045,38.22267],[140.86045,38.22267]
39                ]
40            }
41        }]
42    }
43
44    var outputGPXstyle = '<?xml version="1.0" encoding="UTF-8"?>'
45    '<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" version="1.1" author="signpost - https://signpost.mydns.jp/">'
46    '<metadata>'
47    '<trk>'
48    '<name>trackName'
49    '<desc>'
50    '<trkseg>'
51      '<trkpt lat="38.31014" lon="140.83413"><ele>標高値'
52      '<trkpt lat="38.30989" lon="140.83424"><ele>標高値'
53      '............'
54      '<trkpt lat="38.22267" lon="140.86045"><ele>標高値'
55    ''
56    ''
57
58//----------------------------------------------------------------------------    
59    function addElevation(track){
60        // Elevation　add >>>>>>>>>>>>>>>>>>>>>>
61        ////return new Promise(function(resolve) {  //Promiseは恐らく関係ない
62        track.features
63            .filter(function(feature) { return feature.geometry.type == "LineString" })
64            .map(function(feature) {
65                let coordinates = feature.geometry.coordinates;
66                coordinates.forEach(function(coordinate,i) {
67                    lat = coordinate[1];
68                    lng = coordinate[0];
69                //console.log(lat + ',' + lng);    
70                    // 地理院地図サーバから標高を求める
71                    // http://maps.gsi.go.jp/development/elevation_s.html
72                    // https://2ndart.hatenablog.com/entry/2021/04/29/143307
73                    var src = 'https://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=' + lng + '&lat=' + lat;
74                    fetch(src)
75                    .then((response) => {
76                        return response.text();
77                    })
78                    .then((text) => {
79                        var results = JSON.parse(text);
80                        // Math.round() 関数は、引数として与えた数を四捨五入
81                        var popStr = Math.round(results.elevation);
82                        ///console.log(popStr);
83                        coordinates[i].push(popStr);
84                    }) 
85                })              
86            })
87        ////resolve(track);
88        ////return;
89        ////}) 
90    };
91//----------------------------------------------------------------------------    
92    function exportGPX(){  
93        let outputGpxText;
94        let sp2 = '  ';
95
96        ////addElevation(track).then(function (track) {
97        addElevation(track);
98            //console.log(track);
99    
100            // routeline  >>>>>
101            // https://stackoverflow.com/questions/51397890/how-to-use-polyline-decorator-in-leaflet-using-geojson-line-string
102            track.features
103                .filter(function(feature) { return feature.geometry.type == "LineString" })
104                .map(function(feature) {
105
106                    let textGpx = '<?xml version="1.0" encoding="UTF-8"?>' + '\n' +
107                        '<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" version="1.1" author="signpost - https://signpost.mydns.jp/">' + '\n' +
108                        '<metadata>' + '\n' +
109                        '<trk>' + '\n' +
110                        '<name>'+ 'trackName' + '' + '\n' +
111                        '<desc>' + '\n' +
112                        '<trkseg>' + '\n';
113//------kokokara----
114                    let coordinates = feature.geometry.coordinates;
115                    console.log(coordinates); //<<<<<<< [1]ここでは3要素有る
116                    coordinates[2].push('tuikasita');
117
118                    coordinates.forEach(function(coordinate,i) {   
119                        textGpx = textGpx + sp2 + '<trkpt lat="' + coordinate[1] + '" lon="' + coordinate[0] + '">'; 
120                
121                    console.log(coordinate[0] + '  ' + coordinate[1] + '  ' + coordinate[2]);
122　　　　　　　// >>>>>>>>>>>>[2] ここでは3要素がundefinedになる
123
124                        // データに標高が無い場合
125                        if(coordinate.length == 2){ 
126                            textGpx = textGpx + '<ele>';                    
127                        // データに標高が有る場合
128                        }else if(coordinate.length == 3){ 
129                            textGpx = textGpx + '<ele>' + coordinate[2] + '';
130                        }
131                        textGpx = textGpx + '' + '\n';                     
132                    })
133                    textGpx = textGpx + '' + '\n' + ''
134
135                    console.log(textGpx);
136                    let outputGPXstyle = textGpx;
137        
138                })
139
140            // Code Export >>>>>
141            /* https://qiita.com/kerupani129/items/99fd7a768538fcd33420
142                ※ [0].click():jQuery オブジェクトの [0] は HTMLElement オブジェクト。HTMLElement.click() を呼んでいる 
143                https://www.sejuku.net/blog/67735              
144            ----------------------------------------------*/
145            /*$('<a>', {
146                href: window.URL.createObjectURL(new Blob([outputGPXstyle], {type : 'text/plain'})),
147                download: 'fileName' + '.gpx'
148                })[0].click(); // ※ [0].click()*/
149
150        ////})           
151    };
152  </script>
153</body>
154
155</html>
156
157### 試したこと
158Promiseを実装しましたが、恐らく関係ないと思われる
159### 近々の質問から
160国土地理院地図から標高を求める方法をこちらに変更しました
161

Lhankor_Mhy

2025/01/24 09:37

ひとまず、 console.log(coordinates); //<<<<<<< [1]ここでは3要素有る ↑を↓としてみるといいかもしれません。 console.log(...coordinates); //<<<<<<< [1]ここでは3要素有る --- > これらのブラウザーで記録されるのはオブジェクトへの参照です。そのため、 console.log() を呼び出した時点でのオブジェクトの「値」が表示されるのではなく、内容を見るために開いた時点での値が表示されます。 https://developer.mozilla.org/ja/docs/Web/API/console/log_static#obj1

shin2

2025/01/24 11:23

早々の回答有難うございます下記の指示ですが console.log(...coordinates);>>> >>>Array(3) Array(4) Array(3) Array(3) Array(3) と横並び表示になって要素数は変わりませんでした。

shin2

2025/01/24 11:33

link先の下記のコードでは、要素数が2個のままです console.log(JSON.parse(JSON.stringify(coordinates))); この場合はこれが正しい？のかも知れません

juner

2025/01/24 12:24

そういうときの為に公式では structuredClone() が用意されてるので使ってください https://developer.mozilla.org/ja/docs/Web/API/Window/structuredClone

Lhankor_Mhy

2025/01/24 12:54

Firefoxであればスプレッドで展開するだけでわかったのですが、Chromeだと見えなかったようですね、失礼しました。要は、ミュータブルなものをコンソールで実行後に見てもダメですよ、という話でした。

shin2

2025/01/24 13:27

結論から言いますと、要素[3]の値を〉〉〉[2]で使いたいです。

Lhankor_Mhy

2025/01/24 13:40

回答のとおりです。不明の点がありますか？

shin2

2025/01/24 13:53

では、このアルゴリズムではその後の希望する結果は得られないと言う事でしょうか？

Lhankor_Mhy

2025/01/24 16:47

回答にも書きましたが、Promiseを返すようにすればいいです。ただ、すでに指摘されているようにコードの筋が良くないので、ふた工夫ぐらいは必要になるかと。 Promise.all()で非同期的に処理するか、Array.fromAsync()で同期的に処理するか、みたいな感じになるかと思います。

Lhankor_Mhy

2025/01/24 16:51

または、yambejpさんがおっしゃるように、どこかでウェイトをかけて完了を待つとか。泥臭いですけど、動くは動くでしょう。

shin2

2025/01/24 22:46

ウェイト:Wait　なんだすっかり重いだと思ってたコメントは理解出来しました

Lhankor_Mhy

2025/01/25 06:38 編集

とりあえず、回答にコード例を追記しておきました。やっつけのコードなのでアレですが、当方ではひとまず動作しているように見えました。

shin2

2025/01/25 10:22

コメント有り難うございますまた修正コードも提示頂き難うございますまだ確認は出来ていません。皆様からいろいろなコメントを頂いて全面見直しをしている最中です。waitを用いて修正しています。まとまりましたらアップしますので、もう少々お待ちください。提示のコードも後に確認させて頂きます。では

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

回答4件

フローがちょっといびつですね
この流れでやるならどこかでウェイトをかけるのが現実的です。

投稿2025/01/24 10:52

yambejp

総合スコア117745

shin2

2025/01/24 11:27

コメント有難うございますコメントの内容が理解できないでいますアルゴリズムを再検討と言う事でしょうか

shin2

2025/01/24 12:13

そもそも、filter で要素編集は出来ないのかもと、思えてきた。

utm.

2025/01/24 12:26

> そもそも、filter で要素編集は出来ないのかもと、思えてきた。 filterメソッドは新しい配列を返すためのメソッドで、コールバック関数の戻り値がTrueだった要素を配列の要素とし、返すものです、配列のうち1つ目の要素が不要だから消しているという使い方をしていてこれは理にかなっているかと思います

shin2

2025/01/24 13:12

コメント有り難うございますコメント最後で「配列のうち一つ目の要素が不要だから…」私のコードにそんなとこ有りますでしょうか？ちょっと不明です。

utm.

2025/01/24 13:23

このコードはあなたが作成したのもではないのですか？以下の要素を除外するために、filterメソッドを使っていますよね？無意識にこんなコードかけませんよ。普通。 "geometry": { "type": "MultiPoint", "coordinates":[[140.834125,38.310143],[140.860454,38.222667]] }

shin2

2025/01/24 13:36

いろいろ参考にして作成していますあっその部分ですか。私には、filter はvbaより隠すと言うイメージが有りまして…

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

ベストアンサー

おそらく、addElevation関数でcoordinates配列に非同期に追加している要素を待ち切れていないのだと思います。どこかでPromiseを受け取るなどをするしかなさそうですね。

たとえば

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0, ,user-scalable=no">
7</head>
8
9<body>
10  <button class="work" onclick="exportGPX()">
11    <i class="fa-solid fa-print">exportGPX</i>
12  </button>
13  <script type="text/javascript" src="https://maps.gsi.go.jp/js.lib/leaflet-1.2.0/leaflet.js"></script>
14  <script type="text/javascript" src="https://maps.gsi.go.jp/js.lib/jquery/jquery-1.11.1.min.js"></script>
15  <script>
16    var track = {
17      "type": "FeatureCollection",
18      "features": [
19        {
20          "type": "Feature",
21          "properties": {
22            "id": "waypoints",
23            "names": "|"
24          },
25          "geometry": {
26            "type": "MultiPoint",
27            "coordinates": [[140.834125, 38.310143], [140.860454, 38.222667]]
28          }
29        },
30        {
31          "type": "Feature",
32          "properties": {
33            "id": "line"
34          },
35          "geometry": {
36            "type": "LineString",
37            "coordinates": [
38              [140.83413, 38.31014], [140.83424, 38.30989], [140.86038, 38.22176], [140.86069, 38.22186], [140.86045, 38.22267], [140.86045, 38.22267]
39            ]
40          }
41        }]
42    }
43
44    var outputGPXstyle = '<?xml version="1.0" encoding="UTF-8"?>'
45    '<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" version="1.1" author="signpost - https://signpost.mydns.jp/">'
46    '<metadata>'
47    '<trk>'
48    '<name>trackName'
49    '<desc>'
50    '<trkseg>'
51    '<trkpt lat="38.31014" lon="140.83413"><ele>標高値'
52    '<trkpt lat="38.30989" lon="140.83424"><ele>標高値'
53    '............'
54    '<trkpt lat="38.22267" lon="140.86045"><ele>標高値'
55    ''
56    ''
57
58    //----------------------------------------------------------------------------    
59    function addElevation(track) {
60      // Elevation　add >>>>>>>>>>>>>>>>>>>>>>
61      return Promise.all(track.features
62        .filter(function (feature) { return feature.geometry.type == "LineString" })
63        .map(function (feature) {
64          let coordinates = feature.geometry.coordinates;
65          return Promise.all(coordinates.map(function (coordinate, i) {
66            lat = coordinate[1];
67            lng = coordinate[0];
68            //console.log(lat + ',' + lng);    
69            // 地理院地図サーバから標高を求める
70            // http://maps.gsi.go.jp/development/elevation_s.html
71            // https://2ndart.hatenablog.com/entry/2021/04/29/143307
72            var src = 'https://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=' + lng + '&lat=' + lat;
73            return fetch(src)
74              .then((response) => {
75                return response.text();
76              })
77              .then((text) => {
78                var results = JSON.parse(text);
79                // Math.round() 関数は、引数として与えた数を四捨五入
80                var popStr = Math.round(results.elevation);
81                ///console.log(popStr);
82                coordinates[i].push(popStr);
83              })
84          }))
85        }))
86    };
87    //----------------------------------------------------------------------------    
88    function exportGPX() {
89      let outputGpxText;
90      let sp2 = '  ';
91
92      addElevation(track).then(function () {
93        // routeline  >>>>>
94        // https://stackoverflow.com/questions/51397890/how-to-use-polyline-decorator-in-leaflet-using-geojson-line-string
95        track.features
96          .filter(function (feature) { return feature.geometry.type == "LineString" })
97          .map(function (feature) {
98
99            let textGpx = '<?xml version="1.0" encoding="UTF-8"?>' + '\n' +
100              '<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" version="1.1" author="signpost - https://signpost.mydns.jp/">' + '\n' +
101              '<metadata>' + '\n' +
102              '<trk>' + '\n' +
103              '<name>' + 'trackName' + '' + '\n' +
104              '<desc>' + '\n' +
105              '<trkseg>' + '\n';
106            //------kokokara----
107            let coordinates = feature.geometry.coordinates;
108            console.log(coordinates); //<<<<<<< [1]ここでは3要素有る
109            coordinates[2].push('tuikasita');
110
111            coordinates.forEach(function (coordinate, i) {
112              textGpx = textGpx + sp2 + '<trkpt lat="' + coordinate[1] + '" lon="' + coordinate[0] + '">';
113
114              console.log(coordinate[0] + '  ' + coordinate[1] + '  ' + coordinate[2]);
115              // >>>>>>>>>>>>[2] ここでは3要素がundefinedになる
116
117              // データに標高が無い場合
118              if (coordinate.length == 2) {
119                textGpx = textGpx + '<ele>';
120                // データに標高が有る場合
121              } else if (coordinate.length == 3) {
122                textGpx = textGpx + '<ele>' + coordinate[2] + '';
123              }
124              textGpx = textGpx + '' + '\n';
125            })
126            textGpx = textGpx + '' + '\n' + ''
127
128            console.log(textGpx);
129            let outputGPXstyle = textGpx;
130
131          })
132
133        // Code Export >>>>>
134        /* https://qiita.com/kerupani129/items/99fd7a768538fcd33420
135            ※ [0].click():jQuery オブジェクトの [0] は HTMLElement オブジェクト。HTMLElement.click() を呼んでいる 
136            https://www.sejuku.net/blog/67735              
137        ----------------------------------------------*/
138        /*$('<a>', {
139            href: window.URL.createObjectURL(new Blob([outputGPXstyle], {type : 'text/plain'})),
140            download: 'fileName' + '.gpx'
141            })[0].click(); // ※ [0].click()*/
142
143      })
144    };
145  </script>
146</body>
147
148</html>

投稿2025/01/24 09:42

編集2025/01/25 06:27

Lhankor_Mhy

総合スコア37444

utm.

2025/01/24 11:51

イベントループに追加されるはずなのでそんな挙動は取らないと思うのですが、非同期に要素が追加されるパターンなどあるのですか？

Lhankor_Mhy

2025/01/24 12:49

すみません、何を聞かれているのかよくわかりませんでした。そのような挙動とはどのような挙動の話をされていますか？非同期処理を含む関数を呼び出してPromiseを受けずに処理を進めた場合、非同期処理の結果を受け取れないかもしれない、という話をしているだけですが、何かご不明の点がありましたらお知らせください。

Lhankor_Mhy

2025/01/24 12:57

あ、もしかして、console.log が lazy だという話のあたりでしたかね？他の方の回答をよく読んでいませんでした。

shin2

2025/01/25 21:38 編集

Lhankor_Mhy　様提示して頂いたコードで確認出来ました。バッチリです Promiseのコードは自分には思いつかないし、壁が高いですまだまだです　有難うございました。それと提示して頂いた元コードに文字飛び等が有りましたので(今回の質問と関係はないのですが)、抜粋修正コードをアップします。又他にwaitを使ったコードを自分なりに作成しましたので、別場所でアップします内容は・waitを用いた・地理院地図の標高をクライアントから求めた(ライブラリ追加）・標高を求めた値の使い方を変えたう～む　結論：Lhankor_Mhy様　の提示コードがすっきりしていいかも ```javascript // main ----------------------------------------------- function exportGPX() { let outputGpxText; let sp2 = ' '; addElevation(track).then(function () { // routeline >>>>> // https://stackoverflow.com/questions/51397890/how-to-use-polyline-decorator-in-leaflet-using-geojson-line-string track.features .filter(function (feature) { return feature.geometry.type == "LineString" }) .map(function (feature) { let textGpx = '<?xml version="1.0" encoding="UTF-8"?>' + '\n' + '<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" version="1.1" author="signpost - https://signpost.mydns.jp/">' + '\n' + '<metadata></metadata>' + '\n' + '<trk>' + '\n' + '<name>' + 'trackName' + '<name>' + '\n' + '<desc></desc>' + '\n' + '<trkseg>' + '\n'; let coordinates = feature.geometry.coordinates; coordinates.forEach(function (coordinate, i) { textGpx = textGpx + sp2 + '<trkpt lat="' + coordinate[1] + '" lon="' + coordinate[0] + '">'; // データに標高が無い場合 if (coordinate.length == 2) { textGpx = textGpx + '<ele></ele>'; // データに標高が有る場合 } else if (coordinate.length == 3) { textGpx = textGpx + '<ele>' + coordinate[2] + '</ele>'; } textGpx = textGpx + '</trkpt>' + '\n'; }) textGpx = textGpx + '</trkseg></trk>' + '\n' + '</gpx>' console.log(textGpx); outputGPXstyle = textGpx; }) // Code Export >>>>> /* https://qiita.com/kerupani129/items/99fd7a768538fcd33420 ※ [0].click():jQuery オブジェクトの [0] は HTMLElement オブジェクト。HTMLElement.click() を呼んでいる https://www.sejuku.net/blog/67735 ----------------------------------------------*/ $('<a>', { href: window.URL.createObjectURL(new Blob([outputGPXstyle], {type : 'text/plain'})), download: 'fileName' + '.gpx' })[0].click(); // ※ [0].click()*/ }) }; ```

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

Lhankor_Mhy様のコードを解決コードとします
有難うございました
すいません　解決ボタン間違えました

今頃ですが、このコードは国土地理院の標高コードを用いて
geojson(標高無し)からgpx(標高有り)への変換コードでした

自分なりの別案
内容は
・waitを用いた
・国土地理院地図の標高をクライアントから求めた(ライブラリ追加）
・標高を求めた値の使い方を変えた

尚 elevation(client).jsは
https://teratail.com/questions/nha75hl5w7nhbk
の解決案参照願います

html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0, ,user-scalable=no" />
6</head>
7<body>
8    <button class="work" onclick="exportGPX()"><i class="fa-solid fa-print">exportGPX</i></button>
9
10    <script type="text/javascript" src="https://maps.gsi.go.jp/js.lib/leaflet-1.2.0/leaflet.js"></script>
11    <script type="text/javascript" src="https://maps.gsi.go.jp/js.lib/jquery/jquery-1.11.1.min.js"></script>
12    <script type="text/javascript" src="./elevation(client).js"></script>
13
14    <script>   
15
16var track ={
17"type": "FeatureCollection",
18"features": [
19    {
20        "type": "Feature",
21        "properties": {
22            "id": "waypoints",
23            "names":"|"
24        },
25        "geometry": {
26            "type": "MultiPoint",
27            "coordinates":[[140.834125,38.310143],[140.860454,38.222667]]
28        }
29    },
30    {
31        "type": "Feature",
32        "properties": {
33            "id": "line"
34        },
35        "geometry": {
36            "type": "LineString",
37            "coordinates":[
38[140.83413,38.31014],[140.83424,38.30989],[140.83433,38.30968],[140.83441,38.30951],[140.83442,38.30947],[140.83442,38.30947],[140.8352,38.30967],[140.83591,38.30987],[140.83602,38.3099],[140.83628,38.30999],[140.83679,38.31019],[140.83726,38.31044],[140.83735,38.31049],[140.8378,38.31079],[140.84442,38.31021],[140.84492,38.31036],[140.84518,38.31042],[140.86439,38.27893],[140.86447,38.27894],[140.86459,38.27896],[140.8656,38.2791],[140.86571,38.27911],[140.86581,38.27912],[140.86702,38.2793],[140.86717,38.27932],[140.86717,38.27932],[140.86722,38.27919],[140.86733,38.27877],[140.86747,38.27822],[140.8675,38.27809],[140.86776,38.27712],[140.86777,38.27706],[140.86782,38.27686],[140.86793,38.27646],[140.86808,38.27586],[140.8681,38.2758],[140.86811,38.27573],[140.86821,38.27536],[140.86826,38.27517],[140.86835,38.27484],[140.86838,38.27474],[140.86842,38.27459],[140.86846,38.27441],[140.86849,38.27431],[140.86857,38.27402],[140.8686,38.27391],[140.86869,38.27355],[140.86874,38.27337],[140.86901,38.27234],[140.86905,38.27221],[140.8691,38.27206],[140.8793,38.24364],[140.87947,38.24351],[140.87957,38.24346],[140.87974,38.2434],[140.87991,38.24335],[140.88026,38.24326],[140.8805,38.2432],[140.88076,38.24312],[140.88122,38.24298],[140.88148,38.24287],[140.88179,38.24273],[140.88206,38.24259],[140.88232,38.24245],[140.88274,38.24217],[140.88301,38.24195],[140.88324,38.24177],[140.88334,38.24167],[140.86463,38.22349],[140.86436,38.22334],[140.86404,38.22316],[140.86337,38.22282],[140.8627,38.22251],[140.86244,38.2224],[140.86236,38.22237],[140.86177,38.22212],[140.86118,38.2219],[140.86043,38.22166],[140.85956,38.22142],[140.85926,38.22136],[140.85852,38.22119],[140.85757,38.22104],[140.85755,38.22104],[140.85745,38.22103],[140.85745,38.22103],[140.85742,38.22114],[140.8575,38.22115],[140.85753,38.22115],[140.85811,38.22124],[140.85848,38.2213],[140.85952,38.22153],[140.86024,38.22172],[140.86038,38.22176],[140.86069,38.22186],[140.86069,38.22186],[140.86065,38.22196],[140.86066,38.22201],[140.86079,38.22227],[140.86091,38.22251],[140.86091,38.22251],[140.86045,38.22267],[140.86045,38.22267]
39            ]
40        }
41    }]
42}
43
44    let point =[];
45
46    // wait関数 https://qiita.com/lookman/items/4dfb6e76be26c5a969d2
47    async function wait(second) {
48        return new Promise(resolve => 
49            setTimeout(resolve, 100 * second)); //0.?秒(ﾐﾘ秒)
50    }
51
52    // Elevation　add >>>>>
53    async function addElevation(track) {
54        let lat; let lng; let zoom;    
55        let elev;
56
57        // trackの"LineString"配列をpoint配列とする   >>>>>
58        track.features
59            .filter(function(feature) { return feature.geometry.type == "LineString" })
60            .map(function(feature) {
61                let coordinates = feature.geometry.coordinates;
62                point = coordinates;
63            })
64        // point配列の各要素のelevationを調べて、その値を各要素末に追加   >>>>> 
65        $.each(point, function(index) {
66            lat = point[index][1];
67            lng = point[index][0];       
68            //console.log('lat: ' + lat + ' lng: ' + lng); 
69            elevLoader = new GSI.elevLoader();
70            GSI.content.execRefresh(lng, lat, zoom)
71                .then(function(result) {
72                    ///alert(result);
73                    elev = Math.round(result); 
74                    point[index].push(elev);
75                    return;
76                })
77        })
78
79        await wait(2);
80        console.log(point); 
81
82        // trackの"LineString-coordinates"配列をクリアにして、point配列要素を追加する   >>>>>
83        // https://stackoverflow.com/questions/51397890/how-to-use-polyline-decorator-in-leaflet-using-geojson-line-string
84        track.features
85            .filter(function(feature) { return feature.geometry.type == "LineString" })
86            .map(function(feature) {
87                let coordinates = feature.geometry.coordinates;
88                coordinates = [];
89                
90                var cnt = point.length
91                for (var i = 0;  i < cnt;  i++  ) {
92                    coordinates.push(point[i]);
93                }
94            })     
95        console.log(track);               
96    };
97
98// main    
99    async function exportGPX(){  
100        let outputGpxText;
101        let sp2 = '  ';
102
103        // Elevation　add >>>>>
104        addElevation(track);
105        await wait(2);
106      
107        // Gpx style change  >>>>>
108        // https://stackoverflow.com/questions/51397890/how-to-use-polyline-decorator-in-leaflet-using-geojson-line-string
109        track.features
110            .filter(function(feature) { return feature.geometry.type == "LineString" })
111            .map(function(feature) {
112
113                let textGpx = '<?xml version="1.0" encoding="UTF-8"?>' + '\n' +
114                    '<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" version="1.1" author="signpost - https://signpost.mydns.jp/">' + '\n' +
115                    '<metadata></metadata>' + '\n' +
116                    '<trk>' + '\n' +
117                    '<name>'+ 'trackName' + '</name>' + '\n' +
118                    '<desc></desc>' + '\n' +
119                    '<trkseg>' + '\n';
120
121                let coordinates = feature.geometry.coordinates;
122                coordinates.forEach(function(coordinate,i) {   
123                    textGpx = textGpx + sp2 + '<trkpt lat="' + coordinate[1] + '" lon="' + coordinate[0] + '">'; 
124            
125                    // データに標高が無い場合
126                    if(coordinate.length == 2){ 
127                        textGpx = textGpx + '<ele></ele>';                    
128                    // データに標高が有る場合
129                    }else if(coordinate.length == 3){ 
130                        textGpx = textGpx + '<ele>' + coordinate[2] + '</ele>';
131                    }
132                    textGpx = textGpx + '</trkpt>' + '\n';                     
133                })
134                textGpx = textGpx + '</trkseg></trk>' + '\n' + '</gpx>'
135
136                console.log(textGpx); 
137                outputGPXstyle = textGpx;
138            })
139        await wait(3);
140
141        // Code Export >>>>>
142        /* https://qiita.com/kerupani129/items/99fd7a768538fcd33420
143            ※ [0].click():jQuery オブジェクトの [0] は HTMLElement オブジェクト。HTMLElement.click() を呼んでいる 
144            https://www.sejuku.net/blog/67735              
145        ----------------------------------------------*/
146        $('<a>', {
147            href: window.URL.createObjectURL(new Blob([outputGPXstyle], {type : 'text/plain'})),
148            download: 'fileName' + '.gpx'
149            })[0].click();  //※ [0].click()
150    };
151
152  </script>
153</body>
154</html>
155

投稿2025/01/25 21:36

編集2025/01/25 21:41

shin2

総合スコア24

出先で、コードリーディングに見落としがあるのかもしれないけど、このコードを実行してその結果はやっぱりおかしいと思う。

js
1//------kokokara----
2                    let coordinates = feature.geometry.coordinates;
3                    console.log(coordinates); //<<<<<<< [1]ここでは3要素有る
4                    coordinates[2].push('tuikasita');
5
6                    coordinates.forEach(function(coordinate,i) {   
7                        textGpx = textGpx + sp2 + '<trkpt lat="' + coordinate[1] + '" lon="' + coordinate[0] + '">'; 
8                
9                    console.log(coordinate[0] + '  ' + coordinate[1] + '  ' + coordinate[2]);

ここがポイントだと思うんですけど、
↓これを実行した時に、
console.log(coordinates); //<<<<<<< [1]ここでは3要素有る

↓これが、既に実行されたかのような出力結果じゃない？
coordinates[2].push('tuikasita');

しかもこのpush操作が3つ目(index2)に追加された後に要素が追加されているのもおかしいと思う
(要素を追加する処理が後続にないし)

同期処理だから非同期処理のイベントループが割り込むのもありえないから。

投稿2025/01/24 12:20

utm.

総合スコア855

utm.

2025/01/24 12:31

答えが既にコメントで出てた全然知らんかった > ひとまず、 console.log(coordinates); //<<<<<<< [1]ここでは3要素有る ↑を↓としてみるといいかもしれません。 console.log(...coordinates); //<<<<<<< [1]ここでは3要素有る --- > これらのブラウザーで記録されるのはオブジェクトへの参照です。そのため、 console.log() を呼び出した時点でのオブジェクトの「値」が表示されるのではなく、内容を見るために開いた時点での値が表示されます。 https://developer.mozilla.org/ja/docs/Web/API/console/log_static#obj1

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

あなたの回答