how can i add event for poi in OpenLayers？

Question

I saw an example on the official website of OpenLayers. Can I add events to these stars? By clicking on the star, a box will pop up, and the box can list specific information about this point.

vector = new ol.layer.Vector({
source: new ol.source.Cluster({
    distance: 40,
    source: new ol.source.Vector({                  
        url:'https://openlayers.org/en/v4.6.5/examples/data/kml/2012_Earthquakes_Mag5.kml',     
        format : new ol.format.KML()
    })
}),
style: styleFunction});


var bglayer = new ol.layer.Tile({
source: new ol.source.XYZ({
    url:'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})});

Answer 1

Yes you can. As you are using a cluster layer you may get more features on one click so you have to handle that in your code. You can use this example https://openlayers.org/en/latest/examples/popup.html from open layers website and modify your code like below :

    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>

    <script>
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');

         /**
       * Create an overlay to anchor the popup to the map.
       */
      var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      });


      /**
       * Add a click handler to hide the popup.
       * @return {boolean} Don't follow the href.
       */
      closer.onclick = function() {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
      };


    var raster = new ol.layer.Tile({
        source: new ol.source.OSM(),
        visible: true,
    });


    vector = new ol.layer.Vector({
    source: new ol.source.Cluster({
        distance: 40,
        source: new ol.source.Vector({                  
            url:'https://openlayers.org/en/v4.6.5/examples/data/kml/2012_Earthquakes_Mag5.kml',     
            format : new ol.format.KML()
            })
        }),
        zIndex: 1000,
    });


    var m_map = new ol.Map({
         layers : [vector,raster],
         overlays: [overlay],
         target: document.getElementById('map'),
         view: new ol.View({
           center: [0,0],
           zoom: 2,
            })
        });

    m_map.on('click', function (evt) {

        var coordinate = evt.coordinate;
        var features = m_map.getFeaturesAtPixel(evt.pixel, { hitTolerance: 5 });

        //Display feature info on a popup           
        //Write your logic to handle multiple feaatures here 
        for(var i=0;i<features[0].get('features').length;i++){
            console.log(features[0].get('features')[i]);
            console.log(features[0].get('features')[i].get('name'));
        }
        ///

        content.innerHTML = '<p>Total points detected :'+features[0].get('features').length  +' </p><p>First points Name:</p><code>'+features[0].get('features')[0].get('name')+'</code>';

        overlay.setPosition(coordinate);

    });
    </script>