気になる話題

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

聞いたことがないメーカーのM.2SSDのPCIe 4.0の7450MB/Sが激安なので2枚買ってみた

約3年半ぶりに自作PCを作ろうと思い、Amazonでパーツを物色していたところ聞いたことのないメーカーのM.2SSDを見つけました。 HIKSEMIというメーターのSSDで価格は2TBで17880円で …

no image

Windows10でテキストエディタのカーソルが消えた!原因と対応方法は?

最近ずっと気になっていたんですが、普段よく使うテキストエディタのカーソルが消えていました。 カーソルが消えたということは、現在どこを編集しているかわからず非常に使いにくくなってしまいました。 ただちょ …

no image

HYDE植樹のアジサイ盗まれた!いつ?和歌山市の公園はどこ?

人気ロックグループ「L’Arc-en-Ciel(ラルクアンシエル)」のボーカルHYDEさんが植樹したアジサイが、何者かによって掘り返されていたそうです。 ファンの一人がツイッターに投稿した …

no image

瀬戸大也と馬淵優佳(嫁・妻)との離婚はある?

競泳の瀬戸大也選手に不倫報道が出ました。 その奥さんは元飛び込みの馬淵優佳さんです。 今年の3月に、次女が生まれたばかりなのに不倫ということで、今後離婚などあるのでしょうか? 関連記事 →瀬戸大也が格 …

no image

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

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