「本記事は、技術的な視点から情報を提供することを目的としております。内容については可能な限り正確性を期しておりますが、記事内の見解は執筆者の意見や理解に基づいており、すべての方にとって普遍的な結論を示すものではありません。技術の分野は常に進化し、新たな知見が追加されることもあります。ご意見がある場合には、建設的な対話を歓迎いたしますが、批判的な意見を展開する際も、お互いの尊重を大切にしたコミュニケーションを心がけていただけると幸いです。」
コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>衛星画像表示</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<script src="https://unpkg.com/html-to-image"></script>
<style>
#map {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script>
// 地図の初期設定
const map = L.map('map').setView([35.6812, 139.7671], 10); // 日本（東京）の緯度経度を使用
// 衛星画像タイルレイヤーを追加
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// スペースキーを押すと地図を画像としてダウンロード
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
event.preventDefault();
htmlToImage.toPng(document.getElementById('map'))
.then(function(dataUrl) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = 'satellite_image.png';
link.click();
})
.catch(function(error) {
console.error('画像のダウンロードに失敗しました:', error);
});
}
});
</script>
</body>
</html>