场景

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、完整示例代码

"en">


    "UTF-8">
    
    "stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    



    
"map">
    
    

5、效果