0

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>
  • 1
    var wmsLayer = new ol.source.Image({ should be var wmsLayer = new ol.layer.Image({ – Mike Mar 13 at 11:58
  • @mike yes that did the trick but now i get 401 unauthorized response – csandreas1 Mar 13 at 12:10
  • An Authentication object was not found in the SecurityContext. This request requires HTTP authentication. – csandreas1 Mar 13 at 12:30
0

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
});
  • i am working with geoserver 5. I get client.on is not a function. Also you are missing one parenthesis – csandreas1 Mar 13 at 12:50
  • 1
    I removed the line crossOrigin: 'anonymous', and the layers render normally (without executing your function) – csandreas1 Mar 13 at 14:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.