vue+Geoserver+Openlayers6使用ImageWms

地图服务器为geoserver发布的图层组，用于对比ol6中ImageWms与TileWms的优劣势，再加载不同地图进行不同的选择。

ImageWms参数

相关函数

• changed()：‎通用更改事件‎。‎增加修订计数器时触发。‎
• dispatchEvent(event):‎调度事件‎并且‎调用侦听此类型事件的所有侦听器。‎‎事件参数可以是字符串，也可以是具有属性的对象。‎
• getFeatureInfoUrl(coordinate, resolution, projection, params):返回值为coordinate、resolution、projection。如果无法构造函数则返回undefined。
• get(key)：根据键名返回键值。
• getImageLoadFunction()：返回图像加载的源函数。
• getKeys()：‎获取对象属性名称的列表。‎
• getLegendUrl(resolution, params)：返回 GetLegendGraphic的地址,‎可选针对通过的分辨率进行优化‎，可能包括任何通过的特定参数。如果GetLegendGraphic URL无法构造返回undefined。
• getParams()：‎获取用户提供的参数，‎‎即通过"参数"选项传递给构造函数的，并可能使用 updateParams 方法进行更新。‎
• getProjection()：‎获取数据源的投影。‎
• getProperties()：‎获取所有属性名称和值的对象。‎
• getRevision()：‎获取此对象的版本号。‎ ‎每次修改对象时，其版本号都会递增。
• getState()：‎获取数据源的状态，‎‎查看可能状态。‎
• getUrl()：‎返回用于此 WMS 源的 URL。‎
• on(type, listener)：‎侦听某种类型的事件。‎
• once(type, listener)：‎侦听一次某种类型的事件。‎
• refresh()：‎刷新数据源。‎‎将清除数据源，并重新加载来自服务器的数据。‎
• set():‎设置值。‎
• setAttributions(attributions) :设置数据源属性。
• setImageLoadFunction(imageLoadFunction):设置数据图图像加载函数。
• setProperties(values, opt_silent):‎设置键值对的集合。‎ ‎请注意，这将更改任何现有属性并添加新属性（它不会删除任何现有属性）
• setUrl(url):‎将 URL 设置为用于请求。‎
• un(type, listener) :‎取消为特定类型的事件。‎
• unset(key, opt_silent):‎取消设置属性。‎
• updateParams(params):‎更新用户提供的参数。‎

引入模块

//导入基本模块
import "ol/ol.css"
import Map from "ol/Map"
import View from "ol/View"
//导入相关模块
import ImageWMS from "ol/source/ImageWMS"
import Image from "ol/layer/Image"

url相关参数

            var image=
                        new Image({
                            source: new ImageWMS({
                            //不能设置为0，否则地图不展示。
                                ratio:1,
                 url:'http://ip:8080/geoserver/basemap/wms',
                                params: {
                                    'LAYERS': 'basemap:basemap',
                                    'STYLES': '',
                                    'VERSION': '1.1.1',
                                    'CRS': 'EPSG:2435', 
                                    'FORMAT': 'image/png',                                   
                                },
                                serverType: "geoserver"
                            }),
                        })

加载地图

      this.map = new Map({
            //地图容器ID
            target: "mapDivRef",
             //引入地图
            layers: [image],
            view: new View({
                //地图中心点
                center: [41613.14338386732, 27390.501934476404], 
                zoom:12,
                // minZoom:1, // 地图缩放最小级别
            }),
        })

地图展示

对比TileWms

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

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