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;
}