OpenLayers中TileWMS和ImageWMS的使用说明

         GeoServer中发布的WMS服务，使用OpenLayers显示后，发现加载的地图是切片的，这让我很疑惑：是GeoServer中发布的WMS服务有问题，还是OpenLayers中加载WMS的方式有问题？带着这样的疑问，我开始查看OpenLayers API中关于WMS的说明。

        1、以TileWMS方式加载WMS服务

var wmsParam = {      
            'LAYERS': layer,//此处可以是单个图层名称，也可以是图层组名称，或多个图层名称  
            'TILED':false,
            'VERSION': '1.1.0',
            'BBOX': [89.17, 3.37, 135.31, 53.81],
            'SRS': proj   
        };
var layer = new ol.layer.Tile({      
                    source:new ol.source.TileWMS({ //切片WMS服务，多个标注    
                        url: url,
                        //crossOrigin: 'anonymous',      
                        params: wmsParam,      
                        serverType:'geoserver'    //服务器类型  
                    })     
            });

        上述加载方式，WMS地图服务正常叠加在天地图底图上，但是有一个问题：WMS服务中自定义的标注随着地图的方法会出现多次，这让我看到问题，发现加载的地图是切片的。

        在数据源的参数params中，将TILED设置为false（意为不切片），这种设置对不加载切片没有效果，因为在layer中已经设置为Tiled，数据源也是TileWMS类型，他们结合起来以切片的形式加载WMS地图服务。

    2、以ImageWMS方式加载WMS服务

var wmsParam = {      
            'LAYERS': layer,//此处可以是单个图层名称，也可以是图层组名称，或多个图层名称  
            'TILED':false,
            'VERSION': '1.1.0',
            'BBOX': [89.17, 3.37, 135.31, 53.81],
            'SRS': proj   
        };
wms.layer = new ol.layer.Image({      
                source:new ol.source.ImageWMS({      
                        url: url,
                        //crossOrigin: 'anonymous',      
                        params: wmsParam,      
                        serverType:'geoserver'    //服务器类型  
                    })     
                });

        发现上述WMS地图服务是以切片方式加载的问题后，我再API中找到了WMS的另一种数据源：ol.source.ImageWMS，它对应的图层类型是ol.source.Image。以这种方式加载，解决了标注因切片出现多次的问题，这才是真正意义上的WMS服务。

        3. 关于两者使用的说明

        从上面的代码说明，对于WMS服务，OpenLayers有两种加载方式：

       （1）切片方式（TileWMS）：动态地图在GIS Server生成后，以切片的方式返回到前端，优点是将地图切分，每个切片的数据量很小，便于数据的传输，适用于网络状况不佳的环境；缺点是在地图切片的过程中，可能会造成我遇到的 标注多次出现的问题。

       （2）图像方式（ImageWMS）：地图生成后，直接以一个整体返回到前端显示，优点是不会出现标注重复出现的问题，确定是对网络状况不佳的环境，可能出现请求失败的问题。

        具体使用哪种加载方式，应结合具体情况分析。

转载自：https://blog.csdn.net/shaxiaozilove/article/details/80372776