openlayers 加载geoserve发布的WMS数据

最新推荐文章于 2025-10-09 10:58:29 发布

原创最新推荐文章于 2025-10-09 10:58:29 发布 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

GIS 同时被 2 个专栏收录

15 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

本文详细介绍如何使用OpenLayers库封装函数加载GeoServer发布的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;
}