気になる話題

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

GoogleのAPI以外でExcelのvbaで住所から緯度経度を取得する方法

今回は、Excelのvbaを使用して、セルに入力した住所から緯度経度を取得する方法を紹介します。 この方法についてですが、以前はGoogleのGeocodingサービスを使って、住所から緯度経度情報を …

no image

本家のワンパンマンが更新!フラッシュとソニックがパワーアップでガロウも再登場?

2020年10月6日、7日と連続で本家のワンパンマンが更新されていました。 現在132話です。 なんか閃光のフラッシュと音速のソニックが「あの御方」の秘伝書でパワーアップしているし、ネオヒーローズもな …

no image

まるで本物?Amazon詐欺メールのクオリティがヤバい

毎日数件送られてきて、一向に減らない詐欺メールですが、本日のAmazonを騙ったメールがいかにも本物っぽいものでした。 記載している内容についても変な日本語などではなく、ちゃんとした注文の内容が書かれ …

no image

「スラムダンク」がアニメ映画化!内容はアニメの続き?声優はどうなる?

スラムダンク作者の井上雄彦先生が、2021年1月7日にTwitterで「【スラムダンク】映画になります!」とツイートしました。 【スラムダンク】映画になります!#slamdunkmovie pic.t …

no image

au新料金プランもドコモ【ahamo】が圧勝?内容は?

2020年12月3日に発表されたNTTドコモの新料金プラン【ahamo】が20GBで月額2980円ということで話題になっていますね! そんな中、auも新プランを発表してきました。 そのうちソフトバンク …