Openlayers source tileWMS? TypeError: a.addEventListener is not a function

Question

I want to add features to my tile map, the problem ocurred when I try to use

ol.source.TileWMS

The error message is:

TypeError: a.addEventListener is not a function

However it works with

ol.source.OSM

My code:

var projection = new ol.proj.Projection({
    code: 'EPSG:32719',
    extent: [441867.78, 1116915.04, 833978.56, 10000000.00]
});

var extent = [576631.5686027373,8119272.722829757,655823.9357532839,8286730.359291008];

var wmsSource = new  ol.source.TileWMS({
    url: 'http://192.168.5.94:8080/geoserver/wms',
    params: {'LAYERS': 'layer'},
    ratio: 1,
    serverType: 'geoserver'
});

var wmsLayers = [
    new ol.layer.Tile({
        extent: extent,
        source: wmsSource
    })
];

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

var source = new ol.source.Vector({wrapX: false});

var vector = new ol.layer.Vector({
    source: source
});

var view = new ol.View({
    projection: projection,
    center: [593169.72792, 8174979.55243],
    //center: ol.proj.fromLonLat([-16.5088, -68.1388], projection),
    extent: extent,
    zoom: 12
});

var map = new ol.Map({
    controls: ol.control.defaults().extend([
        new ol.control.ScaleLine()
    ]),
    layers: [wmsLayers, vector],
    target: 'map',
    view: view
});

var draw; // global so we can remove it later

function addInteraction(){
    draw = new ol.interaction.Draw({
        source: source,
        type: 'Point'
    });
    map.addInteraction(draw);
}

map.on('singleclick', function(evt) {
    var coordinate = map.getEventCoordinate(evt.originalEvent);
    console.log(coordinate);
    document.getElementById('latitud').value = coordinate[0];
    document.getElementById('longitud').value = coordinate[1];
    addInteraction();
});

addInteraction();

Just change this line to change my layer, when I use OSM, everything is ok... But when I use TileWMS the error appear

layers: [wmsLayers, vector],

Is there a conflict with TileWMS and Vector source?

Answer 1

ol.Map.layers expects an array of layers - your first object in the array is an array.

Try this:

var wmsLayer = new ol.layer.Tile({
   extent: extent,
   source: wmsSource
});

var map = new ol.Map({
   layers: [wmsLayer, vector],
   target: 'map',
   view: view
});