This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Vector Layer Hit Detection

vector 86 geojson 11 click 1 hover 2 hitdetection 1

#####

Example of hit detection on an ecoregions vector layer with protection status.

The ecoregions are loaded from a GeoJSON file. Information about features is retrieved using the layer's `getFeatures()` method on hover and click. For vector layers, this function resolves with an array of only the topmost feature. It uses an efficient hit detection algorithm, at the cost of accuracy. For pixel exact hit detection, when performance is not a concern, use the map's `getFeaturesAtPixel()` or `forEachFeatureAtPixel()` methods.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import GeoJSON from 'ol/format/GeoJSON.js';
    import VectorLayer from 'ol/layer/Vector.js';
    import VectorSource from 'ol/source/Vector.js';

    const vectorLayer = new VectorLayer({
      background: '#1a2b39',
      source: new VectorSource({
        url: 'https://openlayers.org/data/vector/ecoregions.json',
        format: new GeoJSON(),
      }),
      style: {
        'fill-color': ['string', ['get', 'COLOR_NNH'], '#eee'],
      },
    });

    const map = new Map({
      layers: [vectorLayer],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 1,
      }),
    });

    const featureOverlay = new VectorLayer({
      source: new VectorSource(),
      map: map,
      style: {
        'stroke-color': 'rgba(255, 255, 255, 0.7)',
        'stroke-width': 2,
      },
    });

    let highlight;
    const displayFeatureInfo = function (pixel) {
      vectorLayer.getFeatures(pixel).then(function (features) {
        const feature = features.length ? features[0] : undefined;
        const info = document.getElementById('info');
        if (features.length) {
          info.innerHTML = feature.get('ECO_NAME') + ': ' + feature.get('NNH_NAME');
        } else {
          info.innerHTML = '&nbsp;';
        }

        if (feature !== highlight) {
          if (highlight) {
            featureOverlay.getSource().removeFeature(highlight);
          }
          if (feature) {
            featureOverlay.getSource().addFeature(feature);
          }
          highlight = feature;
        }
      });
    };

    map.on('pointermove', function (evt) {
      if (evt.dragging) {
        return;
      }
      displayFeatureInfo(evt.pixel);
    });

    map.on('click', function (evt) {
      displayFeatureInfo(evt.pixel);
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Vector Layer Hit Detection</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div id="info">&nbsp;</div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "hitdetect-vector",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }