Leaflet中加载Geoserver发布的WMS服务显示地图

场景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531

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

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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;
             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、效果

博客园： https://www.cnblogs.com/badaoliumangqizhi/ 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。