场景

Openlayers下载与加载geoserver的wms服务显示地图：

Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

前面记录过使用ol加载显示地图的方式。

Leaflet快速入门与加载OSM显示地图：

Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

以及上面加载显示地图的基础上，怎样实现在leaflet中加载显示wms服务显示地图。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、运行geoserver,查看其自带的nyc地图的wms服务是否正常。

2、添加地图

var map = L.map('map').setView([1.9178, 8.8736], 13);

注意这里的中心点一定要设置对，不然找半天，另外这里缩放等级是13，正好能保证地图再中间可视范围内。

3、加载wms服务的图层

        //加载wms服务的图层
        var wmsLayer = L.tileLayer.wms(
            'http://127.0.0.1:8000/geoserver/nyc/wms', {
                layers: 'nyc_roads',
            }
        );
        //添加图层到地图
        wmsLayer.addTo(map);

4、完整示例代码


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet加载osm</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([1.9178, 8.8736], 13);
        //加载wms服务的图层
        var wmsLayer = L.tileLayer.wms(
            'http://127.0.0.1:8000/geoserver/nyc/wms', {
                layers: 'nyc_roads',
            }
        );
        //添加图层到地图
        wmsLayer.addTo(map);
    </script>
</body>

</html>

5、效果