vue+Geoserver+Openlayers6使用ImageWms

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

ImageWms参数

名称 类型 定义
attributions module:ol/source/Source~AttributionLike 属性值
crossOrigin null | string 加载图像时的属性,如果要使用 Canvas 渲染器访问像素数据,则必须提供crossOrigin的值。
hidpi boolean(默认值是true) 当从远程服务器获取图像时使用此值。
serverType string 远程WMS服务器类型:mapserver、qgis、geoserver。当hidpi为true时需要设置。
imageLoadFunction module:ol/Image~LoadFunction 可选函数用于加载给定URL的图像
imageSmoothing boolean(默认值是true) ‎启用图像平滑‎
params Object.<string, *> WMS请求参数,至少存在有一个图层参数。STYLES默认值是'',VERSION默认值是1.3.0。WIDTH、HEIGHT、BBOX和CRS(SRS适用于WMS版本小于1.3.0)会动态设置。
projection
module:ol/proj~ProjectionLike
投影。默认为视图投影。
ratio number (默认值 1.5) ratio值为1表示图像请求的范围是地图的视图大小,值为2表示是地图视图高和宽的俩倍等等。ratio值必须大于1。
resolutions Array.<number> 如果指定resolutions,将仅请求设置的值。
url string WMS的URL地址。

相关函数

  • 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):地图生成后,直接以一个整体返回到前端显示,没有动态效果,时间略长。优点是不会出现标注重复出现的问题,确定是对网络状况不佳的环境,可能出现请求失败的问题。

版权声明:
作者:苍狗长风
链接:https://www.develophm.com/index.php/vueopenlayers6geoserver%e7%9a%84imagewms/1274/
来源:开发之家
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>