Openlayers来源tileWMS? TypeError:a.addEventListener不是函数

时间:2017-07-25 13:53:42

标签: javascript openlayers-3 jstilemap

我想在我的瓷砖地图中添加功能,当我尝试使用

时会出现问题
ol.source.TileWMS

错误消息是:

  

TypeError:a.addEventListener不是函数

但是它适用于

ol.source.OSM

我的代码:

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();

只需更改此行以更改我的图层,当我使用OSM时,一切正常......但是当我使用TileWMS时出现错误

  

图层:[wmsLayers,vector],

是否与TileWMS和Vector源存在冲突?

1 个答案:

答案 0 :(得分:2)

ol.Map.layers需要一个图层数组 - 数组中的第一个对象是数组。

试试这个:

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

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