vue中openlayers图层添加

1、首先需要在geoserver或者arcgisserver发布服务，获取url

http://xxx.xxx.xxx.xxx:xxxx/geoserver/.../...

2、定义图层

var tc = new Image({
      source: new ImageWMS({
      url: "http://xxx.xxx.xxx.xxx:xxxx/geoserver/.../...",
      params: {
           FORMAT: "image/png",
           VERSION: "1.1.1",
           SRS: "EPSG:4326",
           tiled: true,
           LAYERS: "xxxx",  // 图层名称（从geoserver获取）
        },
        serverType: "geoserver",
        projection: "EPSG:4326",
        crossOrigin: "Anonymous",
        ratio: 1,
     }),
     type: "wms",
     visible: true,
     zIndex: 21,
});

3、给地图加上图层

this.map = new Map({
    target: 'map',
    layers: [tc],  // 这里将图层加入
    view: new View({
       projection: "EPSG:4326",
       center: [103.864454, 35.531057],
       zoom: 10,
       maxZoom: 19,
    })
})