Leaflet中使用leaflet.easyPrint插件实现打印效果
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用leaflet.easyPrint插件实现打印效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?
在上面的基礎(chǔ)上，怎樣使用插件實(shí)現(xiàn)打印效果如下
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
1、插件地址
GitHub - rowanwins/leaflet-easyPrint: A leaflet plugin which adds an icon to print the map - Demo @ http://rowanwins.github.io/leaflet-easyPrint/
2、下載源碼，引入所需的bundle.js文件，完整示例代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet實(shí)現(xiàn)打印效果</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" src="./js/bundle.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);var tiles =L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''});tiles.addTo(map);L.marker([36.09, 120.35]).addTo(map).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();var printer = L.easyPrint({tileLayer: tiles,sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],filename: 'myMap',exportOnly: true,hideControlContainer: true}).addTo(map);function manualPrint() {printer.printMap('CurrentSize', 'MyManualPrint')}</script> </body></html>?總結(jié)
以上是生活随笔為你收集整理的Leaflet中使用leaflet.easyPrint插件实现打印效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用Leaflet.Ma
- 下一篇： Leaflet中使用Leaflet.Pi