[GIS] Openlayers error: Uncaught TypeError: t.getLayerStatesArray is not a function

geoserverjavascriptopenlayers

I am getting the following error in the yellow background below. Can anyone explain why i get this?
I am not using any bundler i include the ol.js javascript file in the footer

Group.js:209 Uncaught TypeError: t.getLayerStatesArray is not a function
at Group.js:209
at e.forEach (Collection.js:137)
at e.getLayerStatesArray (Group.js:208)
at e.renderFrame_ (PluggableMap.js:1198)
at e. (PluggableMap.js:191)

        <script>
    var wmsSource = new ol.source.ImageWMS({
          url: 'http://webip/geoserver/wms',
          params: {'LAYERS': 'sweb:Streets'},
          serverType: 'geoserver',
          crossOrigin: 'anonymous'
          });

          var wmsLayer = new ol.source.Image({
            source: wmsSource
                });

                var baseLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
                });

      var map = new ol.Map({
        target: 'map',
        layers: [baseLayer,wmsLayer],
        view: new ol.View({
          center: ol.proj.fromLonLat([33.21441650390625, 35.03449433167977]),
          zoom: 10
        })
      });

    map.on('click', function(evt){
        console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
    });
    </script>

Best Answer

401 suggests authentication is needed so you will need to load using xhr with appropriate http headers (including cross origin if required) set via a customer loader. See https://github.com/openlayers/openlayers/issues/4213#issuecomment-145149625 That link refers to TileWMS, but it will be very similar for Image WMS:

function customLoader(image, src) {
  var client = new XMLHttpRequest();
  client.open('GET', src);
  client.setRequestHeader('foo', 'bar');
  client.onload(function() {
    var data = 'data:image/png;base64,' + btoa(unescape(encodeURIComponent(this.responseText));
    image.getImage().src = data;
  });
  client.send();
}

var wmsSource = new ol.source.ImageWMS({
    url: 'http://webip/geoserver/wms',
    params: {'LAYERS': 'sweb:Streets'},
    serverType: 'geoserver',
    imageLoadFunction: customLoader
});
Related Question