leafletの地図を画像で保存する（その後Excelに張り付けて出力）

投稿日：2024年8月28日

Webシステム上に地図を表示して、処理を行うためのJavasctriptライブラリとして「Leaflet」というものがあります。

今までこのライブラリを使用して色々な処理を実装してきましたが、今回言われたのが

「表示している地図をエクセルの様式に出力する」というものでした。

簡単に言うとエクセルのテンプレート上の決まった位置に表示されている地図の画像（マーカーなども含む）を

張り付けるということです。

地図を画像にする

まず最初に地図を画像にします。

この処理には「Leaflet-image」というJavascriptライブラリを使用しました。

これを使用するには

を指定する必要があります。

上記の指定後に以下を

//ボタンクリック等で処理実行

functhon 処理(){

//地図に表示されている情報をイメージに変換

leafletImage(map, doImage);

var img = document.createElement(‘img’);

function doImage(err, canvas) {

var dimensions = map.getSize();

img.width = dimensions.x;

img.height = dimensions.y;

img.src = canvas.toDataURL();

imgtxt = img.src;

//作成したbase64のイメージをサーバにPOST

$.ajax({

url : ‘http://imgsave.php’,

type: ‘POST’,

data: { “mapimg” : imgtxt }

});

}

</script>

※Leaflet で地図を表示する部分は割愛しています。

受け取り側（PHP）でサーバに保存する

AjaxでPOSTされたデータを受け取る（ここではPHPを使用している）

$mapimg = $_POST[“mapimg”];

//画像はpng形式になるらしい

　　//base64の頭にデコードに必要がない文字（というかこれがあったらデコードできない）を削除

$str_rep = ‘data:image/png;base64,’;

$filedata = base64_decode(str_replace($str_rep, ”, $mapimg));

//サーバに保存

$fileName = ‘tmp/mapimg.png’;

file_put_contents($fileName, $filedata);

　　これで指定したディレクトリにpng画像が保存されるので、あとは保存された画像を普通に使用することができる。

まとめ

Excelに出力する処理については「phpspreadsheet」などを使用します。

サーバに保存されている画像を出力する方法については、「phpspreadsheet」などを使用する場合は特に問題ないと思われるのでここでは記載しません。

今回は、「Leaflet.js」で表示した地図を画像でサーバに保存する方法でした。

leafletを使用すれWeb上に地図を簡単に表示できますが、表示した地図を画像として保存するのは意外と面倒でした。

執筆者：rn820b