#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