将事件收缩从 div 复制到 openlayer 地图

Question

下午好，

我在 ol3 地图上有一个 div，其中有一个标记列表。当用户点击一个标记时，中心的地图将更新为该标记的坐标。我尝试让用户在 "pinch" 位于顶部的图层时可以缩放地图。

我成功拦截了"layerOnTop"上的事件并将其复制到地图层。使用 console.log，我看到作业已正确完成，但地图上没有任何反应。

var center = ol.proj.transform([4.90756, 45.5172], 'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
    target: 'map',
    controls: ol.control.defaults({attributionOptions:  ({ collapsible: false})}),
    view: new ol.View({center: center,zoom: 12})
});
$('#layerOnTop').on("touchmove", function(event) {
    var scale = event.originalEvent.touches;
    if (scale.length==2) {
        event.preventDefault();
        var bottomEvent = new $.Event("touchmove");
        bottomEvent.pageX = event.pageX;
        bottomEvent.pageY = event.pageY;
        $("#map").trigger(bottomEvent);
      }
});
$('#map').on("touchmove", function(event) {console.log('ok')})

我用 Android phone.

进行了测试

有人有想法吗？

Answer 1

我终于找到了 :) 我的代码中有 2 个错误： 1) target 应该是 div#map 中的 canvas 元素而不是 #map 本身 2) 我通过 Date.now() 修复了触摸标识符并为第二个添加 +1，它确实太大了

如果有一天有人搜索 ...

，请参阅下面的代码

$('#layerOnTop').on("touchstart touchmove touchend", function(event) {
  view = document.getElementById('map').ownerDocument.defaultView;
  if (event.originalEvent.touches.length==2) {
    var target = document.getElementById('map').getElementsByTagName('canvas')[0];
    var pageX1 = event.originalEvent.touches[0].pageX;
    var pageY1 = event.originalEvent.touches[0].pageY;
    var pageX2 = event.originalEvent.touches[1].pageX;
    var pageY2 = event.originalEvent.touches[1].pageY;

    var touch1 = document.createTouch(view, target, 0, pageX1, pageY1, 0, 0);
    var touch2 = document.createTouch(view, target, 1, pageX2, pageY2, 0, 0);
    var touchList = document.createTouchList(touch1, touch2);
    var touchEvent = new TouchEvent(event.type, {cancelable: true, bubbles: true, touches: touchList, targetTouches: touchList, changedTouches: touchList})
    target.dispatchEvent(touchEvent);
  }
});

http://jsfiddle.net/2ek4j3a4/7/

将事件收缩从 div 复制到 openlayer 地图

Replicate event pinch from a div to openlayer map

events

replicate

openlayers-3