OpenLayer 3: Карта Указателя на событие не может быть запущенно, когда карта создается на накладке

Question

Я создал накладку на OSM, и я создал векторную карту на накладке (stopEvent = истина), но когда я тащу векторная карта на наложении, событие указателя вектора векторного события не может быть запущено, поэтому поворот векторной карты всегда перемещается следующим образом мыши, даже если щелчок мышью по векторной карте. Но если я нажму на OSM за пределами наложения, будет активировано событие указателя векторной карты. Является ли это ошибкой ol3? или есть ли другой метод, чтобы избежать проблемы? Благодарю.

Ниже приведен пример кода для выпуска:

var geojsonObject = { 
     "features": [ 
     { 
      "geometry": { 
       "coordinates": [ 
        [ 
         [ 
          -7357522.593593802, 
          -1134936.9958202997 
         ], 
         [ 
          -7357522.593593802, 
          5361598.9112891 
         ], 
         [ 
          7435794.110546899, 
          5361598.9112891015 
         ], 
         [ 
          7435794.110546903, 
          -1134936.9958202997 
         ], 
         [ 
          -7357522.593593802, 
          -1134936.9958202997 
         ] 
        ] 
       ], 
       "type": "Polygon" 
      }, 
      "type": "Feature" 
     } 
    ], 
    "type": "FeatureCollection" 
}; 
//Create OSM 
var map = new ol.Map({ 
    layers: [ 
     new ol.layer.Tile({ 
      source: new ol.source.OSM() 
     }) 
    ], 
    controls: [], 
    target: 'map', 
    view: new ol.View({ 
     center: [0, 0], 
     zoom: 2 
    }) 
}); 
//Create overlay 
var $element = $("<div id='vectorMap' class='vectorMap'></div>"); 
var vectorMap = new ol.Overlay({ 
    element: $element[0], 
    position: [0, 0], 
    positioning: "center-center" 
}); 
map.addOverlay(vectorMap); 
//Create vector map on overlay 
var vmap = new ol.Map({ 
    target: "vectorMap", 
    layers: [ 
     new ol.layer.Vector({ 
      source: new ol.source.Vector({ 
       features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) 
      }) 
     }) 
    ], 
    controls: [], 
    view: new ol.View({ 
     center: [0, 0], 
     zoom: 1 
    }) 
}); 
//Listen the pointer event on vector map 
vmap.on('pointerdown', function(evt) { 
    console.log("pointerdown"); 
}); 
vmap.on('pointerup', function(evt) { 
    console.log('pointerup'); 
}); 

JSFiddle: http://jsfiddle.net/6dcoesd2/

Answer 1

Я решил проблему за счет инвалидов взаимодействия dragPan карты по умолчанию, и зарегистрировать mousedown/up/move событие на карте видового экрана сНу элемента см к исходному коду взаимодействия источника ol3.

Ниже приведен пример кода:

var vmap = new ol.Map({ 
    target: "vectorMap", 
    layers: [ 
     new ol.layer.Vector({ 
      source: new ol.source.Vector({ 
       features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) 
      }) 
     }) 
    ], 
    controls: [], 
    interactions: ol.interaction.defaults({ 
     dragPan: false 
    }), 
    view: new ol.View({ 
     center: [0, 0], 
     zoom: 1 
    }) 
}); 
//Register the dragpan event on the viewport div 
var drag = false; 
var lastCentroid = null; 
$(vmap.getViewport()).on({ 
    mousedown: function(evt) { 
     drag = true; 
     lastCentroid = null; 
     vmap.render(); 
    }, 
    mouseup: function(evt) { 
     drag = false; 
     vmap.render(); 
    }, 
    mousemove: function(evt) { 
     if (drag) { 
      var centroid = [evt.clientX, evt.clientY]; 
      if (lastCentroid != null) { 
       var deltaX = lastCentroid[0] - centroid[0]; 
       var deltaY = centroid[1] - lastCentroid[1]; 
       var view = vmap.getView(); 
       var viewState = view.getState(); 
       var center = [deltaX, deltaY]; 

       ol.coordinate.scale(center, viewState.resolution); 
       ol.coordinate.rotate(center, viewState.rotation); 
       ol.coordinate.add(center, viewState.center); 
       center = view.constrainCenter(center); 
       vmap.render(); 
       view.setCenter(center); 
      } 
      lastCentroid = centroid; 
     } 
    }, 
    mouseleave: function(evt) { 
     drag = false; 
    } 
});