【WebGIS初学到入职】（六）用OpenLayers加载GeoServer发布的WMS服务

最新推荐文章于 2024-08-11 16:38:35 发布

ReBeX

最新推荐文章于 2024-08-11 16:38:35 发布

阅读量935

点赞数

分类专栏：【WebGIS初学到入职】文章标签： javascript

本文链接：https://blog.csdn.net/ReBeX/article/details/120653371

版权

【WebGIS初学到入职】专栏收录该内容

21 篇文章 83 订阅

订阅专栏

本文介绍了如何在Ubuntu上配置PostGIS和GeoServer，并通过OpenLayers展示WMS图层。作者提供了新建影像图层和瓦片图层的代码示例，并展示了不同类型的图层加载效果。此外，还提及了原始数据处理，如从OSM获取数据并用QGIS转换。

摘要由CSDN通过智能技术生成

一、前言

我在学习过程中，是租了一台服务器在上面搭建配置相关的服务，然后通过QGIS向PostgreSQL数据库添加数据，然后有向GeoServer中添加图层，之后用OpenLayers加载GeoServer根据WMS规范发布的图层。

大家可以自己在本地搭建GeoServer，然后直接向里面添加图层数据，也可以自己租一台服务器来弄。

可选准备：
【配置PostGIS】Ubuntu20.04+PostgreSQL+pgAdmin4+PostGIS
【配置Geoserver】Ubuntu 20.04+JDK 8+Tomcat 9+Geoserver
大概流程

二、新建WMS图层

//新建影像图层
var wmsLayer = new ol.layer.Image({
  visible: true,
  source: new ol.source.ImageWMS({
  	ratio: 1,
  	url: "http://www.csw.ink:8080/geoserver/webgis/wms",
	params: {
	   'FORMAT': 'image/png',
	   'VERSION': '1.1.0',		//WMS服务版本号
	   'LAYERS': 'webgis:gdut',	//图层的名称
	   'STYLES': '',
	   }
   })
});

或者：

//新建瓦片图层
var wmsLayer = new ol.layer.Tile({
    visible: true,
    source: new ol.source.TileWMS({
        url: "http://www.csw.ink:8080/geoserver/webgis/wms",
        params: {
            'FORMAT': 'image/png',
            'VERSION': '1.1.0',			//WMS服务版本号
            'tiled': true,
            'LAYERS': 'webgis:gdut',	//图层的名称
            'STYLES': '',
          }
    })
});

两者的区别，可以在放大缩小地图时，其加载过程得到动画，或是查看后台请求服务中可以看出端倪：

影像数据：

瓦片数据：

三、完整代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGIS平台</title>
    <link rel="stylesheet" href="/css/ol.css">
    <script src="/ol.js"></script>
    <script src="/map.js"></script>
    <script type="text/javascript">
        window.onload = function () {map();}
    </script>
    <style>
    #map{
        position: fixed;
        width: 100%;
        height: 100%;
      }
    </style>
</head>
<body>
    <!-- 这里是Map容器，放地图的 -->
    <div id="map"></div>
</body>
</html>

/*  
*   map.js
*/

var map1;
//===============================调用wms
var wmsLayer = new ol.layer.Image({
  visible: true,
  source: new ol.source.ImageWMS({
  ratio: 1,
  url: "http://www.csw.ink:8080/geoserver/webgis/wms",   //这里填的是我自己服务器的地址
  params: {
   'FORMAT': 'image/png',
   'VERSION': '1.1.0',
   'LAYERS': 'webgis:gdut',
   'STYLES': '',
}
})
});

// var wmsLayer = new ol.layer.Tile({
//     visible: true,
//     source: new ol.source.TileWMS({
//         url: "http://www.csw.ink:8080/geoserver/webgis/wms",
//         params: {
//             'FORMAT': 'image/png',
//             'VERSION': '1.1.0',
//             'tiled': true,
//             'LAYERS': 'webgis:gdut',
//             'STYLES': '',
          
//         }
//     })
// });


function map(){
map1 = new ol.Map({
    target: 'map', //地图容器div的id
    loadTilesWhileInteracting: true,
    layers: [],
    view: new ol.View({
        center: [12622513, 2636878], //地图初始中心点
        zoom: 15,  //地图初始显示级别
        // minZoom: 1,
        maxZoom: 18
    }),
    controls: ol.control.defaults({}).extend([])
});

// 开始加入图层啦！
map1.addLayer(wmsLayer);
};