Q&A
現在LeafletでOpenStreetMapを表示し、マップ上にピンなどを表示し、作成した地図を画像ファイルとして保存したいと考えています。
そこで質問なのですが、作成した地図を画像として保存するには以下のプログラムにどのような記述をすれば、画像として保存することができるでしょうか。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日本地図</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script> <script> function init() { var map = L.map('mapcontainer'); map.setView([35.40, 136], 6); L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }).addTo(map); } </script> </head> <body onload="init()"> <div id="mapcontainer" style="width:600px;height:600px"></div> </body> </html>
Leafletを触ったばかりで、知識が不足している部分が多々あるとは思うのですが、何卒お力添えをして頂けると幸いです。
回答2件
0
ベストアンサー
Leaflet-imageというプラグインがおそらく一番要望に近いかと思われます
[GitHub-mapbox/leaflet-image]
https://github.com/mapbox/leaflet-image
画面上のLeafletで作成された地図を見たまま画像として保存します.
私が使ったときはピンを含めた画面に表示されている地図画像がそのまま保存されました。
参考になれば幸いです。
投稿2020/07/29 05:05
総合スコア8
0
公式で紹介されているものならできるかもしれませんが、地図画像配信サーバ側の設定によるようです。もし「CORS」と聞いて意味がわからないのであれば、難しいと思います。
【Plugins - Leaflet - a JavaScript library for interactive maps】
https://leafletjs.com/plugins.html#printexport
【GitHub - mapbox/leaflet-image: leaflet maps to images】
https://github.com/mapbox/leaflet-image
投稿2020/06/03 17:48
総合スコア69583
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。