Openlayers3 -使用捏手势对触摸设备进行部分缩放？

Question

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

然而，我希望我的用户能够在移动触摸驱动设备(即智能手机)上获得一个分数缩放级别。当手指从屏幕上移开时，通过跳到离屏幕最近的整个变焦水平，捏或反向捏可以放大/放大。

触摸/移动用户如何才能使Openlayers3保持在用户所控制的精确范围(分数缩放级别)？

我是否可以在Openlayers3映射或视图的javascript中添加一些东西，使其按需要工作？

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

(在搜索PinchZoom的OL代码时，我发现，如果一个手指在另一个手指之前从触摸屏上被提起，那么默认的PinchZoom会做我想做的事情，但是当两个手指同时被提起时，我仍然想让它正常工作。)

到目前为止我试过的是..。

第一次尝试--这只是尝试用自定义的handleUpEvent替换标准的PinchZoom的handleUpEvent，并将其设置为映射的唯一交互。然而，事件函数从未被调用(从不记录任何内容)。

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})
});

第二次尝试-这个尝试是基于实际的OL代码来创建标准的PinchZoom交互。在这种情况下，我所有的事件处理程序函数都会被调用，接触次数( targetPointers )总是为零(如日志记录的那样)。我不是javascript专家，但我怀疑这是因为ol.js中的符号与我所基于的ol-调试器中的符号不同。事实上，我必须自己声明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

你的尝试的问题是：

首次尝试

不存在用于handleEvent的ol.interaction.PinchZoom选项。这就是不执行回调的原因。

第二次尝试

正如您已经注意到的，您尝试使用打开层内部。这可能适用于调试版本，但在发行版版本中不起作用，因为名称与版本不同。

解决方案

添加选项，以保持一个小数分辨率在夹点，缩放结束，在开放层的来源。

发行：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中

有关工作示例，请参阅此小提琴：https://jsfiddle.net/wm78prro/5/

注意:小提琴使用自定义的开始层构建：https://github.com/aAXEe/ol3/pull/1

部署url是：https://deploy-preview-1--pump-attendant-rhinoceros-42285.netlify.com/ol-debug.js

这个例子是否像你想要的那样？

因为这可能对其他人有用，所以我们可以尝试将它集成到开放层中。