Mapbox静态图像Url生成的图像与DOM上的画布不同

Question

我正在一个可以自定义地图的网站上工作，他们将其导出为高清图像，以便进行打印。

我使用mapboxgl API生成了可自定义的地图。

const initMap = () => {
  const mapElement = document.getElementById('mapid');

  if (mapElement) {
    mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
    map = new mapboxgl.Map({
      container: 'mapid',
      style: 'mapbox://styles/ma-v/cjzv3hkp30svs1cp5xeexv54g',
      center: [5.380000, 43.300000],
      zoom: 11.5
    });
    let frame = document.querySelector('#mapid');
    frame.insertAdjacentHTML('beforeend', '<div class="map-title"><div class="title-map"></div><div class="info-track"></div><div>')
  }

用户可以自定义地图（基本上可以移动本地化，缩放和更改样式层）。一旦用户想要打印其地图，我就生成一个mapbox static image Url，其中包含用户个性化的所有信息（currentZoom，currentCenter，styleLayer），并将其应用于914px x 1280px的尺寸（mapbox可能达到的最大尺寸） 。

问题是渲染的图像比DOM映射覆盖更大的区域（请参见下面的示例链接）。确实，两者具有相同的中心，相同的缩放比例，但就像素而言，URL图像是dom图像的两倍。Dom imageUrl image

我想要保持相同的缩放比例（因此渲染的地图相同），但是在像素方面具有更大的图像尺寸，所以我可以高质量打印它。我尝试了几种方法，但总是会遇到同样的问题。

非常感谢您的帮助。干杯，

Answer 1

[如果有人有兴趣，我最终设法通过将地图div的初始宽度和高度更改为914 x 1280，然后在下载DOM之后调整画布的大小来解决此问题。

if (mapElement) {
    mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
    map = new mapboxgl.Map({
      container: 'mapid',
      style: 'mapbox://styles/ma-v/cjzv3hkp30svs1cp5xeexv54g',
      center: [5.380000, 43.300000],
      zoom: 11.5
    });
    mapElement.classList.toggle("small");
    const mapCanvas = document.querySelector('.mapboxgl-canvas');
    mapCanvas.style.width = "100%";
    mapCanvas.style.height = "100%";

#mapid.small {
  width: 426px;
  height: 600px;
}

这样，画布的“实际”尺寸为914 x 1280，但仍以较小的div显示给用户。