[GIS] Openlayers3 Add click/hover action on ol.layer.Vector

eventsjavascriptopenlayersvector-layer

With drawService function, I add on my map dome circle vectorLayer.

How can I set a click (or hover) event on the added vectors for displaying their long lat coordinates?

function drawService(wktRegion, name, colourValue,strokeColourValue, radiusDim){
    if(radiusDim==0)
        radiusDim=20;

    var format = new ol.format.WKT();
    var feature = format.readFeature(wktRegion);
    feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');

    var style=new ol.style.Style({
                    image: new ol.style.Circle({
                        fill: new ol.style.Fill({ color: colourValue }),
                        stroke: new ol.style.Stroke({ color: strokeColourValue }),
                        radius: radiusDim
                    })
                  });
    feature.setStyle(style);

    var layerVector = new ol.layer.Vector({
            source: new ol.source.Vector({
            features: [feature]
        })
    });
    layerVector.set('name',name);
    map.addLayer(layerVector);
}

Best Answer

for the hover interaction you can use this code:

hoverInteraction = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    layers:[yourLayer]  //Setting layers to be hovered
});
map.addInteraction(hoverInteraction);

the features in yourLayer will be highlighted when hovered, now for the select interaction you can either add a:

 var select= new ol.interaction.select({layers : [yourLayer]});
 var selectedFeature=select.getFeatures().item(0); //the selected feature

or you can add a single click listenner to your map : ( preferred one )

map.on('singleclick', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        //you can add a condition on layer to restrict the listener
        return feature;
        });
    if (feature) {
        //here you can add you code to display the coordinates or whatever you want to do
    }
});
Related Question