Openlayers-3: Как мне привязать масштабные события к элементам управления или документу

Question

Как привязать zoom-события к ol.Control или к document?

Openlayers (3.7.0) привязывает несколько масштабных событий (взаимодействий, пинчзум) на .ol-viewport, но они срабатывают только на <canvas>-Элемент.

В моем случае я делаю pinchzoom на пользовательском элементе управления (div с некоторым текстом) и браузер изменяет масштаб вместо карты / вида.

Как я могу изменить это поведение?

Решение по document было бы здорово, потому что если слой все еще загружается, и я делаю pinchzoom он также запускается в браузере.

Answer 1

Элементы управления добавляются внутри ol-overlaycontainer-stopevent div по умолчанию, что предотвращает распространение событий на карту. Смотрите в: http://openlayers.org/en/v3.7.0/apidoc/ol.control.Control.html, более конкретно:

Элемент управления - это видимый виджет с элементом DOM в фиксированной позиции на экране. Они могут включать пользовательский ввод (кнопки) или быть только информационными; позиция определяется с помощью CSS. По умолчанию они помещаются в контейнер с именем класса CSS ol-overlaycontainer-stopevent, но могут использовать любой внешний элемент DOM.

Есть другой div, который не делает: ol-overlaycontainer, который можно получить с помощью map.getOverlayContainer(), К сожалению, этот метод не имеет @api флаг, т.е. он не экспортируется. Вы все еще можете получить его, используя map.getViewport() и используйте (скажем) jQuery, чтобы найти его в окне просмотра карты.

Дайте этот div в качестве цели вашего контроля, и события должны быть распространены вниз на карту. От map.js, getOverlayContainer:

/**
 * Get the element that serves as the container for overlays.  Elements added to
 * this container will let mousedown and touchstart events through to the map,
 * so clicks and gestures on an overlay will trigger {@link ol.MapBrowserEvent}
 * events.
 * @return {Element} The map's overlay container.
 */