const geojsonObject = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            properties: {},
            geometry: {
                type: 'Polygon',
                coordinates: [
                    [ [10.0, 40.0], [15.0, 40.0], [15.0, 50.0], [10.0, 50.0], [10.0, 40.0] ]
                ]
            }
        },
        {
            type: 'Feature',
            properties: {},
            geometry: {
                type: 'Polygon',
                coordinates: [
                    [ [16.0, 40.0], [20.0, 40.0], [20.0, 50.0], [16.0, 50.0], [16.0, 40.0] ]
                ]
            }
        }
    ]
};

const greenStyle = new Style({
    stroke: new Stroke({color: 'green', width: 3}),
    fill: new Fill({color: 'rgba(0, 255, 0, 0.1)'})
});

const redStyle = new Style({
    stroke: new Stroke({color: 'red',width: 3}),
    fill: new Fill({color: 'rgba(255, 0, 0, 0.1)'})
});

const blueStyle = new Style({
    stroke: new Stroke({color: 'blue', width: 3}),
    fill: new Fill({color: 'rgba(0, 0, 255, 0.1)'})
});

const vector = new VectorLayer({
    source: new VectorSource({
        features: (new GeoJSON()).readFeatures(geojsonObject, {featureProjection: 'EPSG:3857'})
    }),
    style: greenStyle
});

const select = new Select({
    condition: function(mapBrowserEvent) {
        return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
    },
    style: redStyle
});

map.addInteraction(select);
select.on('select', (e) => {
    console.log('selected:', e);
});

const firstFeature = vector.getSource().getFeatures()[0];
firstFeature.setStyle(blueStyle);