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