0

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);
            })
        }
    }); 
0

2 Answers 2

0

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

3
  • I'm tried with this but I don't know how to do that, I'm newbie. Please help me, I'm stuck
    – Jayzz
    Aug 4, 2022 at 9:08
  • Where is your WMS getting its data from? I assume from a database/ shapefile/ geopackage?
    – Eoin
    Aug 5, 2022 at 7:05
  • sorry for delay, I import my shapefile to PostgreSQL, then public them in Geoserver and show layer on map with WMS image
    – Jayzz
    Aug 6, 2022 at 2:14
0

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})
});
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.