Use hit detection in vector-layer example

The hit detection code doesn't correctly play well with the skiping of geometries using the renderGeometryFunction. Features/geometries that are not rendered by the replay API are not detected by the hit detection mechanism. For that reason, until we find a solution, we don't use renderGeometryFunction in the vector-layer example.

examples/vector-layer.js

@@ -56,38 +56,38 @@ $.getJSON('data/countries.geojson', function(data) {
 });
 
 var highlight;
-var displayFeatureInfo = function(coordinate) {
+var displayFeatureInfo = function(pixel) {
   var oldHighlight = highlight;
-  var features = vectorSource.getAllFeaturesAtCoordinate(coordinate);
+
+  var feature;
+  map.forEachFeatureAtPixel(pixel, function(f) {
+    if (!feature) {
+      feature = f;
+    }
+  });
+
   var info = document.getElementById('info');
-  if (features.length > 0) {
+  if (feature) {
-    var feature = features[0];
+    info.innerHTML = feature.getId() + ': ' + feature.get('name');
-    info.innerHTML = feature.getId() + ': ' + features[0].get('name');
-    highlight = feature;
   } else {
     info.innerHTML = ' ';
-    highlight = undefined;
   }
+
+  highlight = feature;
+
   if (highlight !== oldHighlight) {
     map.requestRenderFrame();
-    if (highlight) {
-      vectorLayer.setRenderGeometryFunction(function(geometry) {
-        return geometry !== highlight.getGeometry();
-      });
-    } else {
-      vectorLayer.setRenderGeometryFunction(undefined);
-    }
   }
 };
 
 $(map.getViewport()).on('mousemove', function(evt) {
-  var coordinate = map.getEventCoordinate(evt.originalEvent);
+  var pixel = map.getEventPixel(evt.originalEvent);
-  displayFeatureInfo(coordinate);
+  displayFeatureInfo(pixel);
 });
 
 map.on('singleclick', function(evt) {
-  var coordinate = evt.getCoordinate();
+  var pixel = evt.getPixel();
-  displayFeatureInfo(coordinate);
+  displayFeatureInfo(pixel);
 });
 
 var highlightStyle = new ol.style.Style({