Выровняйте негеографическую карту листовки maxBounds в нижней части контейнера

Question

Я создаю негеографическую карту с листовкой, на которой изображен горнолыжный курорт.

JSFiddle: https://jsfiddle.net/exophunk/ruzgeqL4/

Я использую map.fitBounds(bounds), чтобы подогнать карту к контейнеру, и map.setMaxBounds(bounds), чтобы убедиться, что вы не можете перемещаться вне map.

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

Я добился этого, добавив смещение к maxBounds, как вы можете видеть в этом примере (синяя рамка = max bounds):

https://jsfiddle.net/exophunk/05cq3rzt/

Проблема этого подхода заключается в том, что теперь вы можете перемещаться по «пустому небу» при увеличении, в то время как я на самом деле хотел бы сохранить maxBounds, как в первом примере. так что это также ограничивает движение вверх.

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

Как я могу убедиться, что карта всегда придерживается дна контейнера, сохраняя при этом исходные максимальные границы, если это возможно?

Answer 1

Вы можете перезаписать стандартное масштабирование колесика и проверить, находится ли точка масштабирования в границах, иначе увеличьте масштаб до центра границ / карты:

map.scrollWheelZoom._performZoomOrg = map.scrollWheelZoom._performZoom;
map.scrollWheelZoom._performZoom = function(e){
     var mouse = map.scrollWheelZoom._lastMousePos;
     var llpixel = map.containerPointToLatLng(mouse)
     if(!bounds.contains(llpixel)){
        map.scrollWheelZoom._lastMousePos = map.unproject([container.clientWidth/2,  mapHeight]);
     }
     map.scrollWheelZoom._performZoomOrg();
}

https://jsfiddle.net/falkedesign/c04ngftj/