Leaflet中实现添加比例尺控件与自定义版权控件与链接
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中实现添加比例尺控件与自定义版权控件与链接
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?
上面加載顯示后默認會帶Attrbution控件。
注：
博客：
霸道流氓氣質的博客_CSDN博客-C#,架構之路,SpringBoot領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、設置默認自帶Attribution控件不顯示
? var map = L.map('map',{ attributionControl:false, zoomControl:false }).setView([36.09, 120.35], 13);2、自定義Attribution控件的圖標和內容
//獲取Attribution控件attribution = map.attributionControl;//替換默認的leaflet前綴改為自定義的logo和文字attribution.setPrefix('<img src="./images/pin.png">');attribution.addAttribution("https://blog.csdn.net/BADAO_LIUMANG_QIZHI");自定義效果
?
3、添加比例尺控件
??????? //定義一個比例尺控件var scale = L.control.scale();//將比例尺控件加載到地圖容器中map.addControl(scale);效果
?
4、完整代碼
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet比例尺和版權控件</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([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);//定義一個比例尺控件var scale = L.control.scale();//將比例尺控件加載到地圖容器中map.addControl(scale);//獲取Attribution控件attribution = map.attributionControl;//替換默認的leaflet前綴改為自定義的logo和文字attribution.setPrefix('<img src="./images/pin.png">');attribution.addAttribution("https://blog.csdn.net/BADAO_LIUMANG_QIZHI");</script> </body></html>總結
以上是生活随笔為你收集整理的Leaflet中实现添加比例尺控件与自定义版权控件与链接的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用NavBar插件实现
- 下一篇： Leaflet中使用Leaflet.Gr