Openlayers 3 OpenLayers 3弹出窗口未在地图上显示信息

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

我逐行追踪一个代码，主要嫌疑犯是：

---

---

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

<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>

---

你有什么建议可以解决目前的问题吗？

我也有类似的问题。ol.source.GeoJSON没有“getClosestFeatureToCoordinate”方法，该方法是ol.source.Vector（）的方法。您是否有时发现由ol.source.Vector功能集中的某个功能创建的弹出窗口操作正确，而由ol.source.GeoJSON创建的弹出窗口操作不正确？

<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