[英]Replicate event pinch from a div to openlayer map
下午好,
我在ol3地圖上有一個div,其中包含一個標記列表。 當用戶點擊一個標記時,中心的地圖將使用該標記的坐標進行更新。 我試圖讓用戶在“捏”頂部的圖層時可以放大地圖。
我成功攔截了“ layerOnTop”上的事件,並將其復制到地圖層。 使用console.log,我看到工作已正確完成,但是地圖上沒有任何反應。
您可以看到以下代碼: http : //jsfiddle.net/2ek4j3a4/
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手機進行了測試。
有人有主意嗎?
我終於找到了:)我的代碼中有2個錯誤:1)目標應該是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);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.