block by ThomasG77 5f9e62d3adeb5602d230a6eacbb9c443

Using WMS Capabilities to get layer center (OK only if layer center is not the CRS center but really the layer data center...)

Full Screen

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>WMS Capabilities Parsing</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var parser = new ol.format.WMSCapabilities();

      fetch('https://ahocevar.com/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities').then(function(response) {
        return response.text();
      }).then(function(text) {
        var result = parser.read(text);
        var extent = result.Capability.Layer.Layer.find(l => l.Name === 'topp:states').EX_GeographicBoundingBox;
        debugger;
        var extent_3857 = ol.proj.transform(extent, 'EPSG:4326', 'EPSG:3857')
        var layers = [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Image({
            source: new ol.source.ImageWMS({
              url: 'https://ahocevar.com/geoserver/wms',
              params: {'LAYERS': 'topp:states'},
              ratio: 1,
              serverType: 'geoserver'
            })
          })
        ];
        var map = new ol.Map({
          layers: layers,
          target: 'map',
          view: new ol.View({
            center: ol.extent.getCenter(extent_3857),
            zoom: 4
          })
        });
      });
    </script>
  </body>
</html>