コンテンツにスキップ

Leaflet 地図を画像としてキャプチャするライブラリ leaflet-image

Topic

  • 地図を画像としてキャプチャするプラグイン
  • Leaflet.markerclusterと併用はできない（画像として出力されない）

Usage

  • leafletImageのコールバック関数にて、画像を生成してHTMLとして追加する
  • circleMarkerを表示する場合、mapにpreferCanvas: trueが必要

const map = L.mapbox.map('map', 'YOUR.MAPID').setView([38.9, -77.03], 14);

leafletImage(map, function(err, canvas) {
    // now you have canvas
    // example thing to do with that canvas:
    const img = document.createElement('img');
    const dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = canvas.toDataURL();
    document.getElementById('images').innerHTML = '';
    document.getElementById('images').appendChild(img);
});
画像はimgのsrcにBase64形式で保存される

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAJYCAYAAA....

canvasなのでblobオブジェクトを扱うこともできる

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.src = url;
  document.body.appendChild(newImg);
});

FormDataに入れてPOSTすれば、サーバーサイドでバイナリをファイルとして保存できる

const formData = new FormData();
formData.append("image", canvas.toDataURL());

Reference