Дробное масштабирование (плавное масштабирование) в OL3

#javascript #openlayers-3 #wms

#javascript #openlayers-3 #wms

Вопрос:

Я хочу обновить свой Web-Mapping-Application с OL2 до OL3 , и теперь меня остановила проблема плавного масштабирования. В OL2 я использовал эту map.fractionalZoom функцию, потому что мое приложение использует WMS с одной плиткой, и мне необходимо точно увеличить масштаб до любого масштаба с помощью ползунка или зумб-бокса (DragZoom в OL3).

Кто-нибудь может мне помочь и показать, как получить ту же функциональность в OL3?

Спасибо и наилучшие пожелания из Германии

Евгений Т.

Ответ №1:

OpenLayers 3 работает противоположным образом: он поддерживает любой уровень дробного масштабирования из коробки, но его элементы управления и взаимодействия ограничивают масштаб, который они устанавливают, целочисленными уровнями масштабирования. Это означает, что вы можете программно установить уровень дробного масштабирования:

 map.getView().setZoom(9.3);
map.getView().fit(extent, size, {constrainResolution: false});
  

Это также означает, что вы можете создавать пользовательские элементы управления и взаимодействия, которые не ограничивают уровень масштабирования целыми числами. Если, например, вы хотите точно соответствовать виду, который вы создали ol.interaction.DragBox , ваше пользовательское взаимодействие с полем масштабирования может выглядеть следующим образом:

 var zoomBox = new ol.interaction.DragBox();
zoomBox.on('boxend', function() {
  map.getView().fit(zoomBox.getGeometry(), map.getSize(),
      {constrainResolution: false});
});
  

Обновление: последние версии OpenLayers (версии v3.20.0 и выше) больше не ограничивают уровни масштабирования при использовании колесного или точечного масштабирования.

Комментарии:

1. Большое спасибо! Это работает. 🙂 Увеличить масштаб очень просто с помощью zoomBox.getGeometry(). Но для простого уменьшения масштаба требуется еще несколько математических операций над геометрией zoomBox.

2. И вот передовое решение с увеличением, уменьшением масштаба и некоторыми исключениями для минимального размера поля, границ и так далее. jsfiddle.net/nkytma7k