Openlayers-3：如何将缩放事件绑定到控件或文档

Question

如何将缩放事件绑定到 ol.Control 或 document？

Openlayers (3.7.0) 在 .ol-viewport 上绑定了多个缩放事件（交互、pinchzoom），但它们仅在 <canvas> 元素上触发。

在我的例子中，我对自定义控件（带有一些文本的 div）进行了缩放，浏览器正在缩放而不是 map/view。

我怎样才能改变这种行为？

document 上的解决方案会很棒，因为如果图层仍在加载并且我执行 pinchzoom 它也会触发到浏览器。

Answer 1

控件默认添加到 ol-overlaycontainer-stopevent div 中，以防止事件传播到地图。参见：http://openlayers.org/en/v3.7.0/apidoc/ol.control.Control.html，更具体地说：

A control is a visible widget with a DOM element in a fixed position on the screen. They can involve user input (buttons), or be informational only; the position is determined using CSS. By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.

还有一个 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.
 */

Openlayers-3：如何将缩放事件绑定到控件或文档

Openlayers-3: How do I bind zoom-events to Controls or document

javascript

pinchzoom

openlayers-3