はじめに
mapbox-glで表示した地図を印刷用に画像ファイルにする必要がありました
let image = map.getCanvas().toDataURL();
上記コードでcanvasからdataurlを取得できるかと思いました
が、結果は失敗 。。。
白紙の画像が出来ただけでした
preserveDrawingBuffer
地図初期化時にpreserveDrawingBuffer:true
を指定すれば正常に画像が作成されます
公式サイトの一番簡単な例を編集し、下記のようにします
Display a map | Mapbox GL JS | Mapbox
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
preserveDrawingBuffer: true // <--これを追加
});