OpenLayer 3: Map pointer up event can not be triggered when the map created on overlay

Question

I created a overlay on OSM, and I created a vector map on the overlay(stopEvent=true), but when I drag the vector map on the overlay, the vector map pointer up event can not be triggered, so cause the vector map always move follow by mouse even if the mouse click the vector map. But if I click the OSM outside the overlay, the vector map pointer up event will be triggered. Whether is it the ol3 bug? or is there any other method to avoid the issue? Thanks.

Below is the sample code for the issue:

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

I resolved the issue by disabled the map default dragPan interaction, and register the mousedown/up/move event on map viewport div element refer to the ol3 dragpan interaction source code.

Below is the sample code:

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