How to fix canvas size in Mapbox GL?

问题

I'm using Mapbox GL to show a map and crop a fixed size image from the center of it. It works great for a particular resolution I designed it (1920x1080) but when I started to make the page responsive where the map styles width and height changes, the canvas size also started to change!

So, when I crop the image the size should be always different because 300px on a 900px canvas it's not the same map area as 300px on a 2000px canvas. The canvas size even changes drastically if I change the device type from Desktop to Mobile in Chrome.

Is there any way to make the canvas DOM size fixed while scaling the entire map with CSS attributes as it's done on a normal canvas? I tried doing trackResize: false and the canvas DOM size stays fixed but the map is not scaled to fit the container neither.

回答1:

for version: "mapbox-gl": "^1.2.1", set height for canvas map container class:

.mapboxgl-canvas-container {

    height: 100vh;

}

then on map load event:

onMapLoaded(event) {

    event.map.resize();

}

回答2:

If I understand you correctly, you want the map to always show the geographical area, no matter how big or small the map container is? That's opposite to the standard behaviour of most web maps, which keep the scale the same, and expand or reduce the coverage area.

If that's what you want, you can probably achieve it by calling map.fitBounds() whenever your window resizes.

回答3:

I this the best approach would be to invalidate the map's size before it's loaded, forcing it to resize itself.

In 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())
  }
}

回答4:

According to @davejoem answer, I was able to display the full map height without stretching by putting a setTimeout outside the buildMap() function. I didn't had to use invalidateSize(), as it throws this error:

error TS2339: Property 'invalidateSize' does not exist on type 'Map'.

Tho, I had to put the setTimeout of buildMap() in the ngAfterViewInit() function and put 2000 on second parameter of setTimeout, because some times with hard refreshing, the map was not full height.

Hope this could help to fully resolve the problem.

回答5:

Im working with angular 9 and this worked for me this way: ngAfterViewInit() { setTimeout(() => this.buildMap(), 2000); }

回答6:

The solution

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

来源：https://stackoverflow.com/questions/42150367/how-to-fix-canvas-size-in-mapbox-gl