javascript - 在隐藏传单地图时使用传单图像

Question

有没有办法在不显示的情况下将传单地图绘制和渲染成图像？

我目前正在使用传单图像，每次我需要渲染时，我发现唯一可行的方法是在渲染之前附加画布并在之后将其移除。但它使地图可见几秒钟，我不希望这样。

我有时也会随机收到此错误：

Element could not be drawn on canvas 
<canvas class="leaflet-zoom-animated" style="transform: translate3d(0…idth: 0px; height: 0px;" width="0" height="0">

这是我当前的代码：

import L from 'leaflet';
import leafletImage from 'leaflet-image';


var map = null;
var hiddenMap = document.createElement('div');

function getMap(){
  document.body.appendChild(hiddenMap);

  if(map)
    return map;

  hiddenMap.setAttribute('style', 'width: 790px; height: 250px;');

  map = L.map(hiddenMap, { renderer: L.canvas() });
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: process.env.VUE_APP_MAP_BOX_TOKEN
  }).addTo(map);
  map.invalidateSize();
  return map;
}

function cleanMap(){
  document.body.removeChild(hiddenMap);
}


export function render(lats, longs){
  if(lats.length == 0 || longs.length == 0)
    return null;

  var m;

  try{
    m = getMap();

    var coords = new Array(lats.length);
    for(var i=0; i<lats.length; i++){
      coords[i] = new L.LatLng(lats[i], longs[i]);
    }
    m.fitBounds(coords);

    var path = new L.Polyline(coords, {
      color: 'red',
      weight: 3,
      opacity: 0.5,
      smoothFactor: 1
    }).addTo(m);

  }catch(err){
    console.error(err);
    return null;
  }

  return new Promise((resolve, reject) => {
    leafletImage(m, function(err, canvas) {
      path.remove(m);
      cleanMap();
      if(err)
        reject(err);
      resolve(canvas.toDataURL().replace(/^data:image\/png;base64,/, ""));
    });
  });
}

标签： javascriptleaflet