Openlayer加载geoserver的WMS地图服务的两种方式
1、ImageWMS官网例子
var format = 'image/png'; var layerclassindex = new ol.layer.Image({ //extent: [-13884991, 2870341, -7455066, 6338219], //opacity:0.1, source: new ol.source.ImageWMS({ url: 'https://ahocevar.com/geoserver/wms', params: { 'FORMAT': format, 'VERSION': '1.1.1', 'LAYERS': 'topp:states', "exceptions": 'application/vnd.ogc.se_inimage' }, ratio: 1, serverType: 'geoserver' }) }); map.addLayer(layerclassindex);2、TileWMS官网例子
var format = 'image/png'; var layerclassindex = new ol.layer.Tile({ extent: [-13884991, 2870341, -7455066, 6338219], source: new ol.source.TileWMS({ url: 'https://ahocevar.com/geoserver/wms', params: { 'FORMAT': format, 'VERSION': '1.1.1', 'LAYERS': 'topp:states', 'TILED': true }, serverType: 'geoserver', // Countries have transparency, so do not fade tiles: transition: 0 }) }); map.addLayer(layerclassindex);使用记录：
一般情况下，ImageWMS、TileWMS在使用上基本差不多，但在网络请求上，ImageWMS为一次请求（一张图片），TileWMS多次请求（分为多个小图片请求）。
TileWMS问题1、可能会造成标注多次出现的问题。2、如果同时加载的图层大多，切片数量将巨大，浏览器大量请求可能造成阻塞(因浏览器并发请求只有6个的限制)，影响用户体验。
ImageWMS问题1、每次请求都要重新生成地图，在数据量巨大时响应时间长，会有明显卡顿；且网络传输量大，网络状况不佳的环境，可能出现请求失败的问题。
因此根据每个图层的数据量选择合适的加载方式。我一般底图用TileWMS方式；业务图层用ImageWMS方式，业务图层数据量大到用ImageWMS加载时用户体验很不好的情况下会换用TileWMS方式。以上记录为个人观点，仅供参考。
参考资源:
openlayers中ImageWMS、TileWMS的区别
OpenLayers中TileWMS和ImageWMS的使用说明
Openlayer使用WMS、WFS、WMTS加载Geoserver发布矢量数据