Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Tiled WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

      ol.proj.setProj4(proj4);
      proj4.defs('EPSG:27700','+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs');
      const proj27700 = ol.proj.get('EPSG:27700');
      const center_point = [394108.6719, 331807.5317];

      var parser = new ol.format.WMSCapabilities();
      var extentbox = []

      fetch('http://localhost:8080/geoserver/cite/wms?request=getCapabilities&version=1.3.0').then(function(response) {
        return response.text();
      }).then(function(text) {

        var result = parser.read(text);
        extentbox = result.Capability.Layer.Layer[2].BoundingBox[1].extent;
        tilesorigin = extentbox.slice(0,2);
        tilesorigin_string = tilesorigin.toString();
        proj27700.setExtent(extentbox);
        var projectionExtent = proj27700.getExtent();

        var layers = [
          new ol.layer.Tile({
            opacity: 1,
            source: new ol.source.XYZ({
              attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
              'rest/services/World_Imagery/MapServer">ArcGIS</a> 2018',
            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
              'World_Imagery/MapServer/tile/{z}/{y}/{x}'
            })
          }),
          new ol.layer.Tile({
            source: new ol.source.TileWMS({
              url: 'http://localhost:8080/geoserver/cite/wms',
              params: {'LAYERS': 'Flood 3', 'TILED': true, tilesorigin: tilesorigin_string},
              serverType: 'geoserver'
            })
          })
        ];

        var map = new ol.Map({
          layers: layers,
          target: 'map',
          view: new ol.View({
            center: center_point,
            extent: projectionExtent,
            projection: proj27700,
            zoom: 3
          })
        });
      });
    </script>
  </body>
</html>