配置GeoServer并用Leaflet调用GeoServer中WMS地图服务（附图文教程和详细代码）

GIS Lin

已于 2022-03-27 19:06:58 修改

阅读量2k

点赞数 17

文章标签： javascript 前端

于 2022-03-26 18:23:19 首次发布

本文链接：https://blog.csdn.net/gjgfjgy/article/details/123759780

版权

配置GeoServer并用Leaflet调用GeoServer中WMS地图服务（附图文教程和详细代码）

下载安装GeoServer
- 以导入shp数据为例
- Leaflet中加载WMS服务

下载安装GeoServer

参考这个博主可对GeoServer进行安装，写的很详细：

https://blog.csdn.net/aLoudVoice_/article/details/105459531?

以导入shp数据为例

根据以上博主的操作步骤后，打开GeoServer，然后在浏览器中进入以下网址：

http://localhost:8080/geoserver/web/

登录账号密码，默认用户名为：admin，密码为：geoserver
在这里插入图片描述
登录后点击“工作区”：

点击“添加新的工作区”
在这里插入图片描述
配置一个新的工作区后点击“保存”：

点击“数据存储”后点击“添加新的数据存储”：

这里我们选择Shapefile：

新建矢量数据源，工作区要选择刚才为例创建的“spl_test”，设置好数据源名称，选择shp数据源的位置后点击保存：
在这里插入图片描述
然后点击“发布”：

然后按下图点击确定边框后点击保存：

然后就可以看到创建好的图层了：

点击“Layer Preview”后在对应的数据点击“OpenLayers”可以对刚才导入的数据进行预览：

预览效果如下：
在这里插入图片描述

Leaflet中加载WMS服务

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>leaflet Demo 2</title>

    <style>
        #map {
            height: 900px;
        }
    </style>

    <!-- css文件 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
    <!-- js文件 -->
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>

        var map = new L.Map('map', {
            center: new L.LatLng(39.86, 116.45),
            zoom: 4,
            zoomControl: false
            
        });
        L.control.zoom({zoomInTitle:"放大",zoomOutTitle:"缩小"}).addTo(map)

        var baseLayers = {
            "高德影像": L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
                maxZoom: 18
            }).addTo(map),

            "OSM": L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }),

            "高德矢量": L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {
                maxZoom: 18
            }),

            "腾讯地图": L.tileLayer('http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0', {
                maxZoom: 18
            }),
        };

        var layerControl = L.control.layers(baseLayers, {}, {
            position: 'topleft',
            collapsed: true
        }).addTo(map);
		
		// 加载WMS
        var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/spl_test/wms?", {
            layers: 'Town',// 要加载的图层名
            format: 'image/png',//返回的数据格式
            transparent: true,
            // crs: L.CRS.EPSG4326
        });
        console.log(map.getCenter());
        map.addLayer(wmsLayer);
    </script>

</body>

</html>

注：在加载WMS的url中，spl_test为创建的工作区；layers后的Town为工作区内的图层名，可在Layer Preview中可看到

运行结果图：
在这里插入图片描述

附：若想对其数据进行样式设置可在"style"中选择对应数据类型修改其颜色
在这里插入图片描述
由于导入的数据为面数据，点击上图中“polygon”后并修改颜色后运行代码结果图如下：

转载请注明出处

GIS Lin

关注

17
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
配置GeoServer并用Leaflet调用GeoServer中WMS地图服务（附图文教程和详细代码）

配置GeoServer并用Leaflet调用GeoServer中WMS地图服务（附图文教程和详细代码）下载安装GeoServer以导入shp数据为例Leaflet中加载WMS服务下载安装GeoServer参考这个博主可对GeoServer进行安装，写的很详细：https://blog.csdn.net/aLoudVoice_/article/details/105459531?以导入shp数据为例根据以上博主的操作步骤后，打开GeoServer，然后在浏览器中进入以下网址：http://l
复制链接

扫一扫