javascript - Openlayers3 - 使用捏合手势在触摸设备上进行分数缩放？

Question

Openlayers3 可以通过在 setZoom() 中指定小数，以编程方式以小数缩放级别显示 map 。

但是，我希望我的用户能够在移动触摸驱动设备(即智能手机)上获得分数缩放级别。当手指从屏幕上移开时，捏合或反向捏合可跳转到最近的整体缩放级别来缩小/放大。

触摸/移动用户如何让 Openlayers3 保持在用户捏合的精确范围(分数缩放级别)？

是否可以向我的 Openlayers3 map 或 View 的 JavaScript 添加一些内容，以使其按预期工作？

特别是，我注意到 Openlayers3 有一个 ol.interaction.PinchZoom() 类 ( https://openlayers.org/en/latest/apidoc/ol.interaction.PinchZoom.html )。这是 ol.interaction.Pointer 的子类，它有一个 handleUpEvent 和一个 handleEvent (应该是一个函数)。因此从理论上讲，我应该能够替换 PinchZoom 中的 handleUpEvent 或将默认的 PinchZoom 交互替换为具有自定义事件处理程序的交互功能。但是使用这两种方法，我都无法调用新的handleUpEvent 函数。

(在搜索 PinchZoom 的 OL 代码时，我发现如果一根手指先于另一根手指从触摸屏上抬起，默认的 PinchZoom 就会执行我想要的操作，但我仍然希望在同时抬起两个手指时使其正常工作。)

这是我迄今为止尝试过的...

第一次尝试 - 这只是尝试用自定义的 PinchZoom 的 handleUpEvent 替换标准的 PinchZoom ，并将其设置为唯一的交互对于 map 。但是，事件函数永远不会被调用(永远不会记录任何内容)。

function handleUpEvent(evt) {
    console.log("Up event handler");
    return true; //  Stop drag
}

map = new ol.Map({
    layers: [],
    target: 'map',
    controls: controls,
    interactions: [new ol.interaction.PinchZoom({handleEvent: handleUpEvent})],
    view: new ol.View({projection: projCode})
});

第二次尝试 - 此尝试基于用于创建标准 PinchZoom 交互的实际 OL 代码。在这种情况下，我的所有事件处理函数都会被调用，触摸次数( targetPointers )始终为零(如记录的那样)。我不是 javascript 专家，但我怀疑这是因为 ol.js 中的符号与我所基于的 ol-debug.js 中的符号不​​同。事实上，我必须自己声明 targetPointers 才能让它运行，即使它已经由 OL 本身声明了(但可能在非调试版本中使用了不同的符号名称)。

function handleDownEvent(mapBrowserEvent) {
    console.log("DOWN event handler");
    this.anchor_ = null;
    this.lastDistance_ = undefined;
    this.lastScaleDelta_ = 1;
    mapBrowserEvent.map.render();
    return true;  //  Start drag
}

function handleDragEvent(mapBrowserEvent) {
    if ( this.targetPointers.length < 2 ) {
        console.log("DRAG event ignored - touches ", this.targetPointers.length);
    } else {
        console.log("DRAG event handled");
        var scaleDelta = 1.0;
        var touch0 = this.targetPointers[0];
        var touch1 = this.targetPointers[1];
        var dx = touch0.clientX - touch1.clientX;
        var dy = touch0.clientY - touch1.clientY;

        // distance between touches
        var distance = Math.sqrt(dx * dx + dy * dy);

        if (this.lastDistance_ !== undefined) {
            scaleDelta = this.lastDistance_ / distance;
        }
        this.lastDistance_ = distance;
        if (scaleDelta != 1.0) {
            this.lastScaleDelta_ = scaleDelta;
        }

        var map = mapBrowserEvent.map;
        var view = map.getView();
        var resolution = view.getResolution();

        // scale anchor point.
        var viewportPosition = map.getViewport().getBoundingClientRect();
        var centroid = ol.interaction.Pointer.centroid(this.targetPointers);
        centroid[0] -= viewportPosition.left;
        centroid[1] -= viewportPosition.top;
        this.anchor_ = map.getCoordinateFromPixel(centroid);

        // scale, bypass the resolution constraint
        map.render();
        ol.interaction.Interaction.zoomWithoutConstraints(
            map, view, resolution * scaleDelta, this.anchor_);
    }
}

function handleUpEvent(mapBrowserEvent) {
    console.log("UP event handler");
    return true;  //  Stop drag
}

var pinchZoom = new ol.interaction.Pointer({
        handleDownEvent: handleDownEvent,
        handleDragEvent: handleDragEvent,
        handleUpEvent: handleUpEvent
        });

pinchZoom.targetPointers = [];

map = new ol.Map({
    interactions: ol.interaction.defaults().extend([pinchZoom]),
    layers: [
             new ol.layer.Tile({
                               source: new ol.source.TileJSON({url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'})
                               })
             ],
    target: 'map',
    view: new ol.View({center: [0, 0], zoom: 3})
});

Answer 1

您的尝试存在的问题:

第一次尝试

ol.interaction.PinchZoom 的选项 handleEvent 不存在。这就是为什么你的回调没有被执行。

第二次尝试

正如您已经指出的，您尝试使用 openlayers 内部结构。这可能适用于调试版本，但不适用于发布版本，因为名称不同。

解决方案

添加选项以在 openlayers 源中的捏合缩放端保持分数分辨率。

问题:https://github.com/openlayers/ol3/issues/6223

拉取请求:https://github.com/openlayers/ol3/issues/6224

默认情况下，捏合缩放将保持用户选择的分数缩放级别..从 OpenLayers 3.20 开始

<小时/>

早期的想法:

作为示例，我将选项 keepFractionalZoomLevel 添加到 ol.interaction.PinchZoom:https://github.com/aAXEe/ol3/commit/7639cb20d17858492652896bcd4a6ff7992a9bb0

请参阅此 fiddle 的工作示例:https://jsfiddle.net/wm78prro/5/

注意: fiddle 使用自定义 openlayers 版本:https://github.com/aAXEe/ol3/pull/1
部署网址为:https://deploy-preview-1--pump-attendant-rhinoceros-42285.netlify.com/ol-debug.js

这个例子的行为符合你的要求吗？
由于这对其他人可能有用，我们可以尝试将其集成到 openlayers 中。