Как исправить размер холста в Mapbox GL?

для версии: "mapbox-gl": "^ 1.2.1" установите высоту для класса контейнера карты холста:

.mapboxgl-canvas-container {

    height: 100vh;

}

затем в событии загрузки карты:

onMapLoaded(event) {

    event.map.resize();

}

map.on('idle',function(){
map.resize()
})

Попробуй это. он отлично работает для меня. (только для пользователей mapbox)

Наилучшим подходом было бы сделать недействительным размер карты перед ее загрузкой, заставив ее изменить размер.

В Angular / Ionic

import { AfterViewInit, Component, OnInit } from '@angular/core'
import * as  mapboxgl from 'mapbox-gl'

@Component({
  selector: 'app-map',
  templateUrl: 'map.page.html',
  styleUrls: ['map.page.scss']
})
export class MapPage implements AfterViewInit, OnInit {
  private map: mapboxgl.Map  

  constructor() {
    mapboxgl.accessToken = "<YOUR_TOKEN>"
  }

  ngOnInit() {
    setTimeout(() => this.buildMap(), 0);
  }

  ngAfterViewInit() {
    setTimeout(() => this.map.invalidateSize(), 0);
  }

  buildMap() {
    let conf = {
      container: 'map',
      style: '<YOUR_CUSTOM_STYLE>'
      zoom: 13,
      center: [lng, lat]
    }
    this.map = new mapboxgl.Map(conf)  
    // Add map controls
    this.map.addControl(new mapboxgl.NavigationControl())
  }
}

Если я вас правильно понял, вы хотите, чтобы на карте всегда отображалась географическая область, независимо от того, насколько велик или мал контейнер карты? Это противоположно стандартному поведению большинства веб-карт, которые сохраняют тот же масштаб и увеличивают или уменьшают зону покрытия.

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

Согласно ответу @davejoem, я смог отобразить полную высоту карты без растяжения, поместив setTimeout вне функции buildMap(). Мне не пришлось использовать invalidateSize(), так как он выдает эту ошибку:

ошибка TS2339: свойство «invalidateSize» не существует для типа «Map».

Тем не менее, мне пришлось поместить setTimeout из buildMap() в функцию ngAfterViewInit() и поставить 2000 на второй параметр setTimeout, потому что иногда при жестком обновлении карта не была полной высотой.

Надеюсь, это поможет полностью решить проблему.

Я работаю с angular 9, и у меня это сработало так: ngAfterViewInit() { setTimeout(() => this.buildMap(), 2000); }

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

Если вы пытаетесь сделать свою карту отзывчивой, а при переходе на мобильную связь она не работает, это связано с тем, что соотношение пикселей вашего устройства отличается от одной платформы к другой.

попробуйте получить соотношение пикселей вашего устройства, используя:

window.devicePixelRatio

И работать с этим.

В моем случае я работал с фрагментными шейдерами, пытаясь нарисовать круги, используя комбинацию положения на карте и масштабирования. Но поскольку фрагментные шейдеры работают с использованием canvas.width (а не canvas.clientWidth), когда я переключился на мобильный, количество пикселей, представляющих 100 метров, изменилось, я использовал соотношение пикселей устройства, чтобы затем преобразовать это большее количество пикселей в метры с помощью пикселя устройства. соотношение...

На случай, если у кого-то возникнут проблемы с шейдерами фрагментов MapboxGL-JS и преобразованием пикселей в метры:

uniform float u_dpr; // the window.devicePixelRatio

//v_rad is radius in meters
//40075017.0 circunference of earth
//cos(-0.296) is based on my latitude
//etc.. 
//multiply the final value by the pixel ratio to get responsiveness working 

float maxDist = (v_rad / (40075017.0*cos(-0.296)/pow(2.0, (u_zoom+9.0)))*u_dpr);

Решение

<div
    ref={el => this.mapContainer = el}
    style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            width: '100%',
            height: '100vh',
     }}
 />