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

Question

Я использую Mapbox GL, чтобы показать карту и обрезать изображение фиксированного размера из его центра. Он отлично подходит для конкретной резолюции, которую я разработал (1920x1080), но когда я начал делать отзывчивую страницу, где изменяются стили карты width и height, размер холста также начал меняться!

Итак, когда я обрезаю изображение, размер должен всегда отличаться, потому что 300px на холсте 900px это не та же самая область карты, что и 300px на холсте 2000px. Размер холста даже сильно меняется, если я изменю тип устройства с рабочего стола на мобильный в Chrome.

Есть ли способ сделать размер размера DOM холста фиксированным при масштабировании всей карты с помощью атрибутов CSS, как это делается на обычном canvas? Я пробовал делать trackResize: false, а размер DOM холста остается фиксированным, но карта не масштабируется, чтобы соответствовать контейнеру.

Answer 1

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

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