気になる話題

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

iPhoneSE発表!価格とスペックは?iPhone8との違いは?買いなの?

以前から待たれていた2020年版新型「iPhoneSE」がやっと発表されました。 今までの情報通り「iPhone SE」ではなく「iPhone8」の後継機種といった内容ですね。 予約開始:4月17日2 …

no image

十日恵比須(福岡)正月大祭の日程は?アクセスや混雑状況は?

福岡で商売をやっている人は、必ずと言っていいほど訪れている十日恵比須神社の正月大祭 商売繁盛の神様で、ぜひ抑えておきたいイベントです!縁起物があたる福引での「大当たりー!」という声が特に有名ですね!! …

no image

iOS14でドコモメールが送信できないときの対応方法は?

自分ではXperia5Ⅱを使用しているため関係ないのですが、奥さんが使用しているiPhpne でドコモメールが送信できない状況になりました。 実は、ちょっと前から送信できなくなっていたのですが、ほとん …

no image

「a-nation online 2020」見逃し配信動画はdTVで!視聴方法は?無料で見れる?

8月29日に開催された総勢26組による「a-nation」史上初のオンラインフェス 「a-nation online 2020」 がdTVで配信されます! 計6時間にも及んだステージのうち、なんと4時 …

no image

高菜、食べてしまったんですか?で有名な看板のないラーメン屋「博多元気一杯」のカップラーメン発売

何年か前に「高菜、食べてしまったんですか?」というのが話題になり、いまだにコピペで以下の文章をみかける 「高菜、食べてしまったんですか!!!!????」。多分、僕の口の周りに微妙に唐辛子の味噌がついて …