openlayers – Openlayer：双指运动(dragPan)

2019年7月28日 517次阅读

谷歌最近重新设计了地图移动行为.现在在手机上你可以用两根手指移动地图. (请参阅手机上的
map-simple示例,而不是任何浏览器模拟器！).

我想在openlayer中实现相同的功能.检测移动设备(例如WURFL),禁用dragPan不是问题,但如何用两根手指编写自己的ol.interaction.Interaction？

我查看了doku并没有找到任何示例,从哪里开始.

最佳答案 拖动交互通常带有“条件”选项.您提供了一个带有一个参数(ol.MapBrowserEvent)的函数,并返回一个布尔值,指示交互是否应该应用.

ol.MapBrowserEvent包装原始浏览器事件,这意味着您只需在其上查找touches数组并检查它是否为长度为2.

<script>
    var map = new ol.Map({
        interactions: [
            new ol.interaction.DragPan({

                // This comment marks the beginning of the code of interest.

                condition: function(olBrowserEvent) {
                    if (olBrowserEvent.originalEvent.touches)
                        return olBrowserEvent.originalEvent.touches.length === 2;
                    return false;
                }

                // This comment marks the end.

            })
        ],
        layers: [
            // Your layers.
        ],
        target: 'map',
        view: new ol.View({
            center: [-33519607, 5616436],
            rotation: -Math.PI / 8,
            zoom: 8
        })
    });
</script>
点赞