Wie Leinwandgröße in Mapbox GL zu beheben?

Question

Ich verwende Mapbox GL, um eine Karte anzuzeigen und ein Bild mit fester Größe aus der Mitte zuzuschneiden. Es funktioniert gut für eine bestimmte Auflösung, die ich entworfen habe (1920x1080), aber als ich anfing, die Seite reaktionsfähig zu machen, wo sich die Kartenstile width und height ändern, begann sich auch die Leinwandgröße zu ändern!

Also, wenn ich das Bild zuschneiden, sollte die Größe immer anders sein, weil 300px auf einem 900px Canvas es nicht den gleichen Kartenbereich wie 300px auf einem 2000px Canvas ist. Die Leinwandgröße ändert sich sogar drastisch, wenn ich den Gerätetyp in Chrome von Desktop auf Mobile umstelle.

Gibt es eine Möglichkeit, die Canvas-DOM-Größe zu korrigieren, während die gesamte Map mit CSS-Attributen skaliert wird, wie es auf einem normalen canvas getan wird? Ich habe versucht, trackResize: false tun und die Leinwand DOM Größe bleibt fixiert, aber die Karte ist nicht skaliert, um die Container weder.

Answer 1

Wenn ich Sie richtig verstehe, möchten Sie, dass die Karte immer das geografische Gebiet zeigt, egal wie groß oder klein der Kartencontainer ist? Das entspricht dem Standardverhalten der meisten Webkarten, die die Skalierung beibehalten und den Abdeckungsbereich erweitern oder reduzieren.

Wenn es das ist, was Sie wollen, können Sie es wahrscheinlich erreichen, indem Sie map.fitBounds() immer aufrufen, wenn Ihr Fenster die Größe ändert.