var format = 'image/png';
var bounds = [40454494.66562566, 3936507.0527703143,
    40530793.66562566, 4002807.0527703143];
var layers = [
    new ol.layer.Image({
        source: new ol.source.ImageWMS({
            ratio: 1,
            url: 'http://localhost:8081/geoserver/test/wms',
            crossOrigin: 'anonymous',           //跨域声明
            params: {
                'FORMAT': format,
                'VERSION': '1.1.1',             //很重要！！！！！！
                "exceptions": 'application/vnd.ogc.se_inimage',
                "LAYERS": 'test:3702110101'
            }
        })
    })
];

openlayers加载WMS格式总的来说有两种方式：ol.layer.Image+ol.source.ImageWMS和ol.layer.Tile+ol.source+TileWMS

这两种方式加载都需要设定bounds（bbox）和projection。

 var layer = [
   new ol.layer.Tile({
    extent:[
     73.49896240234375,
     3.833843469619751,
     135.08738708496094,
     53.55849838256836
    ],
    source: new ol.source.TileWMS({
     url:'http://localhost:8080/geoserver/chinamap/wms',
     params:{
      LAYERS:'chinamap:china',
      TILED:true
     },
     serverType:'geoserver',
     transition: 0
    })
   })
    ]
 

加载ImageWMS之WorldImage

这里使用的是geoserver上发布存储类型为WorldImage，样式为raster

// 调用geoserver的服务http://localhost:8080/geoserver/nurc/wms
 
 
new Map({
  target: 'map-container',
  layers: [
    new Image({
      source: new ImageWMS({
        url: 'http://localhost:8080/geoserver/nurc/wms',
        params: {
          'layers': 'nurc:Img_Sample'
        }
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 3,
    projection: 'EPSG:4326'
  })
});
 


 layers: [
    new Image({
      source: new ImageWMS({
        url: 'http://localhost:8080/geoserver/nurc/wms',
        params: {
          'layers': 'nurc:Arc_Sample'
        }
      })
    })
  ], 

TileWMS

 layers: [
    new Tile({
      source: new TileWMS({
        url: 'http://localhost:8080/geoserver/tiger/wms',
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          tiled: true,
          STYLES: '',
          LAYERS: 'tiger:poi'
        }
      })
    })
  ],

叠加图层

const lowmap = new Tile({
  source: new TileWMS({
    url: 'http://localhost:8080/geoserver/tiger/wms',
    params: {
      'FORMAT': 'image/png',
      'VERSION': '1.1.1',
      tiled: true,
      STYLES: '',
      LAYERS: 'tiger:poly_landmarks'
    }
  })
})
const upmap = new Tile({
  source: new TileWMS({
    url: 'http://localhost:8080/geoserver/tiger/wms',
    params: {
      'FORMAT': 'image/png',
      'VERSION': '1.1.1',
      tiled: true,
      STYLES: '',
      LAYERS: 'tiger:tiger_roads'
    }
  })
}) 

关于WMS有两种加载方式

方式一、ol.layer.Image+ol.source.ImageWMS

方式二、ol.layer.Tile+ol.source+TileWMS

通用的模式都是：至于使用ImageWMS，还是TileWMS，对应换掉layer和source就行。

const bounds = [最小 X,最小 Y,最大 X,最大 Y];
const projection = new Projection({
  code: 'EPSG:4326',/*  坐标系*/
  units: 'm',
  axisOrientation: 'neu',
  global: false
});
const map = new Map({
  target: 'map-container',
  layers: [
    new Tile({
      source: new TileWMS({
        url: 'http://localhost:8080/geoserver/nurc/wms',//服务发布的地址
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          tiled: true,
          STYLES: '',
          LAYERS: 'nurc:Img_Sample' //服务发布的图层名称
        }
      })
    })
  ],
  view: new View({
    projection: projection
  })
});
map.getView().fit(bounds, map.getSize());//加入边界值，计算中心点
 

加载TIFF

import GeoTIFF from 'ol/source/GeoTIFF.js';
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import View from 'ol/View.js';
 

const layer = new TileLayer({
  style: {
    variables: getVariables(),
    color: [
      'array',
      ['/', ['band', ['var', 'red']], ['var', 'redMax']],
      ['/', ['band', ['var', 'green']], ['var', 'greenMax']],
      ['/', ['band', ['var', 'blue']], ['var', 'blueMax']],
      1,
    ],
  },
  source: new GeoTIFF({
    normalize: false,
    sources: [
      {
        url: 'https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif',
      },
    ],
  }),
});