気になる話題

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

投稿日:

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

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

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

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

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

目次

地図を画像にする

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

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

これを使用するには

<script src=’https://api.tiles.mapbox.com/mapbox.js/v2.4.0/mapbox.js’></script>
 <script src=’https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js’></script>
 
を指定する必要があります。
 
上記の指定後に以下を
<script type=”text/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上に地図を簡単に表示できますが、表示した地図を画像として保存するのは意外と面倒でした。

 

 

-気になる話題

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

タスクスケジューラでネットワークドライブからファイルをコピーするバッチが実行できない

ネットワークドライブの割り当てで使用しているフォルダ内にあるファイルをコピーするバッチファイルを作成して、定期的に実行するためにタスクスケジューラに登録しました。 バッチを直接実行した場合は問題なく処 …

2020年10月1日は中秋の名月!各地で見れる時間と方角は?満月じゃないの?

2020年の「十五夜・中秋の名月」は10月1日です。 秋の夜のイベントといえば、やっぱり「十五夜でお月見」ですね。 今年は、関東から九州にかけて天気も良さそうできれいに見ることができそうです。 という …

no image

戸田恵梨香と松坂桃李が結婚!馴れ初め調査!

戸田恵梨香と松坂桃李が結婚で妊娠は?馴れ初めやきっかけを調査! 戸田恵梨香さんと松坂桃李さんが電撃結婚という衝撃的なニュースが飛び込んできました! 戸田恵梨香さんは最近ではムロツヨシさんと怪しいのでは …

no image

ドコモのXperia5ⅡがAndroid11にアップデート!変更内容は?

1月19日にソフトバンクでAndroid11にアップデートさたXperia 5 Ⅱですが、2021年2月3日にドコモでもアップデートが開始されました。 ちなみにauは2月4日からだそうです。 さっそく …

福岡でのネットで買った自転車の防犯登録

目次 ネットで買った自転車の防犯登録 ネットでロードバイクを買いました。昨日、届いたので近くの「サイクルベースあさひ」に防犯登録をしようと持ち込みました。ネットで調べると、「サイクルベースあさひ」のよ …