Изображение, сгенерированное статическим изображением Mapbox, URL-адрес отличается от холста в DOM - PullRequest
Новая
       71

Изображение, сгенерированное статическим изображением Mapbox, URL-адрес отличается от холста в DOM

1 голос
/ 26 сентября 2019

Я работаю над сайтом, где я могу настроить карту, и они экспортируют ее как изображение высокой четкости, чтобы я мог распечатать ее.

Я сгенерировал настраиваемую карту с помощью 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 Url со всей информацией о персонализации пользователя (currentZoom, currentCenter, styleLayer) и применяю к нему размеры 914px x 1280px(максимальный размер возможен с mapbox).

Проблема заключается в том, что отображаемое изображение покрывает гораздо большую область, чем карта DOM (см. Примеры ссылок ниже).Действительно, оба имеют один и тот же центр, один и тот же масштаб, но изображение URL в два раза превосходит изображение в пикселях. Dom image Url image

Мне бы хотелось сохранить тот же масштаб увеличения (чтобы карта отображалась одинаково), но иметь больший размеризображение в пикселях, поэтому я могу напечатать его в хорошем качестве.Я пробовал несколько способов, но всегда сталкивался с этой же проблемой.

Большое спасибо за вашу помощь.Ура

1 Ответ

0 голосов
/ 27 сентября 2019

В случае, если кому-то будет интересно, мне наконец удалось решить эту проблему, изменив начальную ширину и высоту карты 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 для пользователя.

...