场景
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="/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="/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、效果
