openlayers 加载geoserve发布的WMS数据

一、导入相关的包

import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';import {XYZ,TileWMS,Vector as VectorSource,ImageWMS,Cluster} from 'ol/source.js';

二、函数的封装

// 加载geoserver发布的WMS数据export function geoServeWMS(map,url,params){var wms = new TileLayer({source: new TileWMS({url: url,params: params,})});map.addLayer(wms)return wms;}

三、调用封装的函数加载WMS服务

var layer = geoServeWMS(this.map,"http://192.168.112.30:8077/geoserver/erguna/wms",{'VERSION': '1.1.1',tiled: true,"LAYERS": 'erguna:WATA',})

注意：这个关键在于url与参数的获取

获取步骤

（1）登录geoserve管理端

（2）点击图层预览（layer preview）, 找到自己发布的服务

(3) 点击openlayers ，

将浏览器中的地址复制下来获取对应的参数以及url

四、另外的写法

/*** 说明：加载geoserver发布的数据* @param map 地图对象* @param url 服务基础地址* @param params 服务参数* @param layerId 将加载的图层数据设置一个图层id,方便以后查询数据* @returns {*}*/function geoServeWMS(map,url,params,layerId){var source = new ol.source.TileWMS({url: url,params: params,})if(layerId)source.layerId = layerId;var wms = new ol.layer.Tile({name: "天地图影像图层",source: source});map.addLayer(wms)return wms;}