Leaflet中加载Geoserver发布的WMS服务显示地图
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中加载Geoserver发布的WMS服务显示地图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
場景
Openlayers下載與加載geoserver的wms服務(wù)顯示地圖：
Openlayers下載與加載geoserver的wms服務(wù)顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
前面記錄過使用ol加載顯示地圖的方式。
Leaflet快速入門與加載OSM顯示地圖：
Leaflet快速入門與加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
以及上面加載顯示地圖的基礎(chǔ)上，怎樣實現(xiàn)在leaflet中加載顯示wms服務(wù)顯示地圖。
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。
實現(xiàn)
1、運行g(shù)eoserver,查看其自帶的nyc地圖的wms服務(wù)是否正常。
2、添加地圖
var map = L.map('map').setView([1.9178, 8.8736], 13);注意這里的中心點一定要設(shè)置對，不然找半天，另外這里縮放等級是13，正好能保證地圖再中間可視范圍內(nèi)。
3、加載wms服務(wù)的圖層
??????? //加載wms服務(wù)的圖層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服務(wù)的圖層var wmsLayer = L.tileLayer.wms('http://127.0.0.1:8000/geoserver/nyc/wms', {layers: 'nyc_roads',});//添加圖層到地圖wmsLayer.addTo(map);</script> </body></html>?5、效果
?
總結(jié)
以上是生活随笔為你收集整理的Leaflet中加载Geoserver发布的WMS服务显示地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中添加标记、折线、圆圈、多
- 下一篇： Leaflet中自定义marker的ic