OpenLayers 3弹出窗口没有显示地图上的信息

Question

关于js，openlayers3插件ol3-popup的问题。由于某种原因，在map元素上使用单击方法来启动弹出元素的行为不稳定。有时它会正确显示数据，有时则不会。前提很简单，我在GeoJSON描述的地图上有点。每个点都在一个sevrice中可见并传入gjlayer。出于某种原因，有时当我点击某个点时，它会显示包含所有数据的弹出窗口，有时则不会显示。

我逐行跟踪代码，主要嫌疑人是：

var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer)   {
            console.log('Entered forEachFeature');
            console.log(feature);
            console.log(layer);
            //temp = feature;
            return feature;
        });

功能。由于某种原因，它无法检测到被点击的功能。 这是我试过的完整代码。

<script type="text/javascript">

    var map = new ol.Map({
    target: 'map',
    renderer:'canvas',
    view: new ol.View({
        center: [1779318.3729059827, 5750751.626054873],
        zoom: 3
        })
    });

    var point_style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.1)',
                opacity: 0.8
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 0.9)',
                opacity: 0.8,
                width: 3
            })
        })
    });
    var gJSONFeatures = new ol.source.GeoJSON({
        projection: map.getView().getProjection(),
        url: 'some geojson service'
    });
    var gjlayer = new ol.layer.Vector({
        title: 'Geojson points',
        source: gJSONFeatures,
        style: point_style
    });
    var baseLayer = new ol.layer.Tile({
        useInterimTilesOnError: true,
        title: 'OSM Map',
        source: new ol.source.XYZ({
            url: 'xyz tile server',
            crossOrigin: null,
            attributions: [
                        new ol.Attribution({
                            html: 'misc data'
                        })
                    ]
           })
    });
    var baseGroups = new ol.layer.Group({
        title: 'Base Layers',
        layers: [baseLayer]
    });
    var overlayGroups = new ol.layer.Group({
        title: 'Overlay',
        layers: [gjlayer]
    });
    map.addLayer(baseGroups);
    map.addLayer(overlayGroups);
    var myScaleLine = new ol.control.ScaleLine();
    map.addControl(myScaleLine);
    var myFullScreenControl = new ol.control.FullScreen();
    map.addControl(myFullScreenControl);
    var layerSwitcher = new ol.control.LayerSwitcher({
        tipLabel: 'Legende' // Optional label for button
    });
    map.addControl(layerSwitcher);
    var popup = new ol.Overlay.Popup();
    map.addOverlay(popup);
    map.on('singleclick', function(evt) {
        //registered single click
        // Hide existing popup and reset it's offset
        console.log('Single clck works');
        console.log(evt);
        popup.hide();
        popup.setOffset([0, 0]);
        // Attempt to find a feature in one of the visible vector layers
        var feature = map.forEachFeatureAtPixel(evt.pixel,     function(feature, layer) {
            console.log('Entered forEachFeature');
            console.log(feature);
            console.log(layer);
            //temp = feature;
            return feature;
        });
        if (feature) {
            var coord = feature.getGeometry().getCoordinates();
            var props = feature.getProperties();
            console.log(props);
            var info = "<h2>"+props.name+"</h2>";
            info += "<p>Lon/Lat: " + props.position + "</p>";
            info += "<p>Phone: " + props.phone + " Time: " + props.time + "</p>";
            info += "<p>Speed: " + props.speed.toString() + "</p>";
            // Offset the popup so it points at the middle of the marker not the tip
            popup.setOffset([0, -22]);
            popup.show(coord, info);
        } else {
            console.log('No feature.');
        }
    });
    var vectorSource = new ol.source.Vector({});
    var vectorLayer = new ol.layer.Vector({
        // New unnamed vector layer used to display points that are     `enter code here`//agregated by websocket.
        source: vectorSource,
        style: point_style
    });
    map.addLayer(vectorLayer);
    function positioningUpdate() {
           // web socket logic implemented and working
    };
    positioningUpdate();
</script>

使用的库是：

OpenLayers 3.3.0
ol3-popup for version 3.3.0
ol3-layers used for openlayers 3.3.0
jquery-1.11.0.min.js
jquery-migrate-1.2.1.min.js
bootstrap.min.js

您是否有任何机会对如何解决现状提出一些建议？