[GIS] Zoom to the extent of the WMS layer in GeoServer by OpenLayers 3

boundless-suitegeoserveropenlayerswms

I would like to use OpenLayers 3 (I saw similar question for OpenLayers 2) to display a GeoServer layer using WMS, and zoom to the extent of the layer automatically by getting the extent information from this layer. Just like when preview the layer on GeoServer, it displays the layer within the layer's extent and no matter what the CRS of the layer is.

I have installed Opengeo suite 4.5 and created a viewer with the suite-sdk viewer template. I debug with suite-sdk debug -g http/to/geoserver path/to/app

The viewer uses OpenLayers 3 library. I have added OSM layer and my GeoServer layer with ol.source.TileWMS source and display them successfully.

I get the capabilities of my local GeoServer WMS service (ol3 example). With the results, by checking the name of each layer, I would like to zoom to my target layer. 

//
// the codes add layers to ol.map and intial the ol.view
//

// TODO: zoom to layer
var featurePrefix = '***';
var featureType = '***';
var url = 'http://localhost:port/geoserver/wms?request=GetCapabilities&service=WMS&version=1.1.1';
var parser = new ol.format.WMSCapabilities();
$.ajax(url).then(function(response) {
   var result = parser.read(response);
   var Layers = result.Capability.Layer.Layer; 
   var extent;
   for (var i=0, len = Layers.length; i<len; i++) {
     var layerobj = Layers[i];
     if (layerobj.Name == featurePrefix + ':' + featureType) {
         extent = layerobj.BoundingBox[0].extent;
         break;
     }
     console.log(layerobj.Name);
   }

   // THIS DOES NOT WORK
   map.getView().fitExtent(extent, map.getSize());
});

With the code above, I can get the BBOX of the layer in its own coordinate system other than ESPG::3857. But the map did not zoom to that layer. I think it is a coordination system problem.

How can I solve it, or another approach to get the extent?

(I found the current code is not nice)

Best Answer

Just use ol.proj.transformExtent in between to transform your extent. You can also use layer.latlonBBOX from the GetCapabilities parser output so you always know the source bounding box is in EPSG:4326.

Related Question