Zoom to feature in WMS layer - openlayer 6

Question

I know there are many similar questions but I can't find the answer to my problem. I want zoom to feature in my layer when click but I don't know why my code not working.

This my layer:

var view = new ol.View({
        projection: 'EPSG:4326',
        center: [11875495.42643146,1212033.3298334656],
    });
    var source = new ol.source.ImageWMS({
        url: 'http://localhost:8081/geoserver/vietnam/wms',
        params: {LAYERS: 'mycountry:mylayer', 'TILED': true},
        serverType: 'geoserver',
        ratio: 1,
    });
     myLayer = new ol.layer.Image({
        view: view,
        source: source,
        visible: true,
        title: 'myLayerMap',
    });
    map.addLayer(myLayer);

This my code:

var select = new ol.interaction.Select({
    condition: ol.events.condition.click
});
var feature = myLayer.getFeatures();
map.addInteraction(select);
select.on('select', function () {
    var extent = feature.getGeometry().getExtent();
    mapView.fit(extent, map.getSize());
    console.log(extent);
})

I'm try with console.log(extent); but nothing to show in browser console log. Where did I wrong?

Update: I try another option:

var features = myLayer.getSource().getFeatures();
var myFeature = features[0];
var ext = myFeature.getGeometry().getExtent();
var center = ol.extent.getCenter(ext);
map.setView( new ol.View({
    projection: 'EPSG:3857',
    center: [center[0] , center[1]],
    zoom: 14
}));

and an error appeared myLayer.getSource(...).getFeatures is not a function though I did the same before

I do it with suggestion of @TomazicM but it do not work and nothing show in browser console log

        map.on('click', function (evt) {
        var viewResolution = mapView.getResolution();
        var url = source.getFeatureInfoUrl(
          evt.coordinate,
          viewResolution,
          'EPSG:4326',
          {'INFO_FORMAT': 'text/html'},
        );
        if (url) {
            fetch(url, function(data){
                var feature = data.features[0];
                // var props = feature.properties;
                var extent = feature.getGeometry().getExtent()
                view.fit(extent, map.getSize(),{duration:250})
                console.log(extent);
            })
        }
    }); 

Answer 1

It looks like you are trying to query the features from a WMS image, rather than the features of a Vector layer. If it's possible, I would recommend using a WFS for this specific task, even if its styled to be invisible on the map.

If this isn't possible, you should look into GetFeatureInfo on Geoserver which you can find an example of here

Answer 2

I'm solved my problem as suggested by previous comments...

var parser = new ol.format.WMSGetFeatureInfo();
map.on('click', function(evt) {
var view = map.getView();
var url = myLayer.getSource().getFeatureInfoUrl(
    evt.coordinate,
    view.getResolution(),
    view.getProjection(),
    {'INFO_FORMAT': 'application/vnd.ogc.gml'}
);
$.ajax(url).then(function(response) {
    var features = parser.readFeatures(response);
    var extent = features[0].getGeometry().getExtent();
    // console.log(extent);
    view.fit(extent,{duration:350})
});
});