気になる話題

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はバーチャルで!バーチャル渋谷ハロウィンフェスの参加方法や日程時間も調査!

最近の秋の最大のイベントと言ったらハロウィーンですね! 本当にここ数年は、特に渋谷のハロウィーンはすごい人出で盛り上ってます。 ただし、2020年は新型コロナウイルスの影響で3密を避ける目的の為に、渋 …

no image

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

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

no image

月見バーガーが発売!今年2020年の十五夜はいつ?

今年もマクドナルドから月見バーガーが発売されます。 しかも今年は、新メニューが3つあるみたいですね! ところで今年の十五夜っていつなんでしょう? 気になったので調べてみました。     目次 今年20 …

no image

「だから…ハリセンボンじゃねーよ!!」春奈にそっくりの候補が市会議員当選!

ハリセンボンの近藤春菜さんにそっくりの選挙ポスターが話題になっています。 この選挙ポスターは、兵庫県尼崎市議選(5月30日告示、6月6日投開票)に立候補した「須田和(むつみ)」さんと言う方らしいです。 …