How to use the ol/layer/Tile function in ol

ngAfterContentInit() {

    this.view = new OlView({
      center: [0, 0],
      zoom: 16
    });

    this.map = new OlMap( {
      layers: [
        new OlTileLayer({
          source: new OlOSM()
        })
      ],
      target: 'map',
      view: this.view
    });

    this.geolocation = new Geolocation({
      // enableHighAccuracy must be set to true to have the heading value.
      trackingOptions: {
        enableHighAccuracy: true
      },
      projection: this.view.getProjection()
    });

    const coord = [28.232592, -25.755710]; // TUKS IT BUILDING COORDS

features: new GeoJSON().readFeatures(dc),
      })

      featuresLayer = new VectorLayer({
        source: this.featureSource,
        style: feature => {
          regionStyle.getText().setText(feature.getProperties().CNAME)
          return regionStyle
        },
      })
    }

    // create map object with feature layer
    const layers = [
      //default OSM layer
      new TileLayer({
        source: new XYZ({
          url:
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
        }),
      }),
    ]

    if (isDCDataExist) {
      layers.push(featuresLayer)
    }

    const map = new Map({
      target: this.refs.mapContainer,
      layers,
      view: new View({
        projection: 'EPSG:4326',

it('returns the layer by the given feature', () => {
      let namespace = 'BVB_NAMESPACE';
      let layerName = 'BVB';
      let qualifiedLayerName = `${namespace}:${layerName}`;

      let featId = `${layerName}.1909`;
      let feat = new OlFeature({
        geometry: new OlGeomPoint({
          coordinates: [1909, 1909]
        })
      });
      feat.setId(featId);

      let layer = new OlLayerTile({
        visible: false,
        source: new OlSourceTileWMS({
          url: 'https://ows.terrestris.de/osm/service?',
          params: {
            'LAYERS': qualifiedLayerName,
            'TILED': true
          }
        })
      });
      layer.set('key', 'prop');
      map.addLayer(layer);
      let got = MapUtil.getLayerByFeature(map, feat, [namespace]);

      expect(got).toBeInstanceOf(OlLayerTile);
      expect(got.get('key')).toBe('prop');
    });

it('returns undefined if the layer could not be found', () => {
      let namespace = 'BVB_NAMESPACE';
      let layerName = 'BVB';
      let qualifiedLayerName = `${namespace}:${layerName}`;
      let featId = `${layerName}_INVALID.1909`;
      let feat = new OlFeature({
        geometry: new OlGeomPoint({
          coordinates: [1909, 1909]
        })
      });
      feat.setId(featId);

      let layer = new OlLayerTile({
        visible: false,
        source: new OlSourceTileWMS({
          url: 'https://ows.terrestris.de/osm/service?',
          params: {
            'LAYERS': qualifiedLayerName,
            'TILED': true
          }
        })
      });
      map.addLayer(layer);
      let got = MapUtil.getLayerByFeature(map, feat, [namespace]);

      expect(got).toBeUndefined();
    });
  });

const testLayerTitle = 'OSM-WMS - by terrestris';
  const testLayer = new OlLayerTile({
    visible: false,
    title: testLayerTitle,
    source: new OlSourceTileWMS({
      url: 'https://ows.terrestris.de/osm/service?',
      params: {
        'LAYERS': testLayerName,
        'TILED': true
      }
    })
  });

  const testLayerName2 = 'OSM-WMS 2';
  const testLayerTitle2 = 'OSM-WMS - by terrestris 2';
  const testLayer2 = new OlLayerTile({
    visible: false,
    title: testLayerTitle2,
    source: new OlSourceTileWMS({
      url: 'https://ows.terrestris.de/osm/service?',
      params: {
        'LAYERS': testLayerName2,
        'TILED': true
      }
    })
  });

  const testWmsLayers = [
    testLayer,
    testLayer2
  ];

getDefaultMap(): {
    target: string;
    layers: MangolLayer[];
    view: View;
  } {
    return {
      target: 'my-map',
      layers: [
        new MangolLayer({
          name: 'OpenStreetMap Layer',
          layer: new TileLayer({
            source: new OSM()
          })
        })
      ],
      view: new View({
        projection: 'EPSG:3857',
        center: fromLonLat([19.3956393810065, 47.168464955013], 'EPSG:3857'),
        zoom: 4,
        enableRotation: true
      })
    };
  }
}

beforeEach(() => {
      const layerSource1 = new OlSourceTileWMS();
      layer1 = new OlLayerTile({
        name: 'layer1',
        source: layerSource1
      });
      const layerSource2 = new OlSourceTileWMS();
      layer2 = new OlLayerTile({
        name: 'layer2',
        visible: false,
        source: layerSource2
      });
      subLayer = new OlLayerTile({
        name: 'subLayer',
        source: new OlSourceTileWMS()
      });
      nestedLayerGroup = new OlLayerGroup({
        name: 'nestedLayerGroup',
        layers: [subLayer]
      });
      layerGroup = new OlLayerGroup({
        layers: [layer1, layer2, nestedLayerGroup]
      });
      map.setLayerGroup(layerGroup);

const { locale } = this.props;
        const caps: WmsCapabilitiesDocument = this.state.caps;
        const viewer = Runtime.getViewer();
        if (caps && viewer) {
            const params: any = {
                LAYERS: name
            };
            if (style) {
                params.STYLE = style;
            }
            if (bTiled) {
                params.TILED = true;
            }
            let layer;
            if (bTiled) {
                layer = new olTileLayer({
                    source: new olTiledWmsSource({
                        url: caps.Capability.Request.GetMap.DCPType[0].HTTP.Get.OnlineResource,
                        params: params
                    })
                });
            } else {
                layer = new olImageLayer({
                    source: new olWmsSource({
                        url: caps.Capability.Request.GetMap.DCPType[0].HTTP.Get.OnlineResource,
                        params: params
                    })
                });
            }
            layer.set("LAYER_TYPE", "WMS");
            viewer.getLayerManager().addLayer(name, layer);
            viewer.toastSuccess("icon-success", tr("ADDED_LAYER", locale, { name: name }));

name: 'OSM-WMS',
        source: new OlSourceTileWMS({
          url: 'https://ows.terrestris.de/osm-gray/service?',
          params: {'LAYERS': 'OSM-WMS', 'TILED': true},
          serverType: 'geoserver'
        })
      });
      layer2 = new OlLayerImage({
        name: 'OSM-WMS',
        source: new OlSourceImageWMS({
          url: 'https://ows.terrestris.de/osm-gray/service',
          params: {'LAYERS': 'OSM-WMS', 'TILED': true},
          serverType: 'geoserver'
        })
      });
      layer3 = new OlLayerTile({
        name: 'Food insecurity',
        source: new OlSourceTileJson({
          url: 'https://api.tiles.mapbox.com/v3/mapbox.20110804-hoa-foodinsecurity-3month.json?secure',
          crossOrigin: 'anonymous'
        })
      });
      layer4 = new OlLayerTile({
        name: 'OSM-WMS',
        source: new OlSourceTileWMS({
          urls: [
            'https://a.example.com/service?humpty=dumpty',
            'https://b.example.com/service?foo=bar'
          ],
          params: {'LAYERS': 'OSM-WMS', 'TILED': true},
          serverType: 'geoserver'
        })

export function createLayer(mapSource) {
    return new TileLayer({
        source: new XYZSource(defineSource(mapSource)),
        minResolution: mapSource.minresolution,
        maxResolution: mapSource.maxresolution,
    });
}