以前に作成したRID受信機のマップを、自分なりの詳細地図に変更する方法を説明します。
国土地理院のマップをダウンロードする
国土地理院のマップページに移動します。
まずブラウザの表示倍率のズームを100％にします。
作りたい地図の位置と倍率で、マップを表示させます。
次に、下図のように[共有]と[山]アイコンをクリックしてください。
大きさを固定にチェック。
大きさを、例えば[ 1000 x 1000 ]にします。
江の島周辺なら下図のような表示なります。赤枠の部分がダウンロードの対象となります。
この時の緯度と経度をメモって置いて下さい。プログラムで使用します。
位置が決まったらOKボタンを押してください。「画像を保存」をクリックします。
名前を[map.png]にします。
これで地図画像がダウンロードされました。
[map.png]を[data]フォルダに、ドラッグ＆ドロップしてコピーします。
プログラムを書き換えます
index.html の下記の部分でwidthとheightの大きさをダウンロードしたmap.pngの大きさに合わせます。
＜img＞と＜canvas＞の両方です。
<div style="position:relative;">
<img src="map" width="1000" height="1000" alt="map.png">
<div style="position:absolute; left: 0px; top:0px;">
<canvas id="cvs" width="1000" height="1000"></canvas>
</div>
<div id="mark" style="position:absolute;">
<img src="mark" alt="mark.png">
</div>
</div>
</body>
index.html内のスクリプトの部分を下記のように書き替えて下さい。
幅と高さをマップの大きさに合わせ、緯度と経度は先ほど記録した値を代入して下さい。
(lng0,lat0)が左下で、(lng1,lat1)が右上です。
<script>
//:
//:
document.getElementById('pw').innerHTML = JSONobj.pw;
var w = 1000;
var h = 1000;
var lng0 = 139.430666;
var lat0 = 35.284934;
var lng1 = 139.516497;
var lat1 = 35.354966;
let x = Math.trunc((parseFloat(JSONobj.lng) - lng0) * w/(lng1-lng0) ); // 経度をx座標に変換
let y = h - (Math.trunc((parseFloat(JSONobj.lat) - lat0) * h/(lat1-lat0))); // 緯度をy座標に変換
mk.style.left = x - 13 + 'px'; // マークの位置を変更(マークの左上角座標)
mk.style.top = y - 42 + 'px';
drawLine(x, y); // 軌跡を描画(マークの先端)
}
}
</script>
</html>
あとは、index.htmlとmap.pngをSPIFFS領域にアップロードして下さい。
これで、自分だけのマップが表示されるはずです。
注意事項
[data]フォルダ内の合計容量は2Mバイト以下になる様にして下さい。それ以上になるとエラーで書き込めなくなります。
マップデータをあまり大きくすると、書き込めなく恐れがあるので注意して下さい。
pngデータをjpgに変換し、圧縮率を高くすれば、データサイズを小さくすることが出来ます。
jpgに変換した場合は、プログラムの方もちょっと変更する必要があります。
server.on("/map", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "map.jpg", "image/jpg");
});