Leaflet中使用leaflet.easyPrint插件实现打印效果
场景
Leaflet快速入门与加载OSM显示地图:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
在上面的基础上,怎样使用插件实现打印效果如下
注:
博客:
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
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实现打印效果</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>
Leaflet中使用leaflet.easyPrint插件实现打印效果相关推荐
- Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
- Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
- Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图 在上面的基础上怎样实现要素轨迹移动效果. 插 ...
- Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
- Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流模拟效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图 在上面的基础上怎样实现水流模拟效果. 水流模 ...
- Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
- Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用Leaflet.co ...
- Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样实现地图全屏效果. ...
- Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
最新文章
- 在ASP.NET MVC下实现树形导航菜单
- 我的WCF之旅(6):在Winform Application中调用Duplex Service出现TimeoutException的原因和解决方案...
- ftp服务器在linux中安装
- C#LeetCode刷题-拓扑排序
- Mysql根据顺序合并数据
- 家长又放心了一些!教育类App不能再干这些事了
- “21天好习惯”第一期-8
- ROW_NUMBER() OVER()函数用法;(分组,排序),partition by (转)
- Android中app的请求抓包工具 Fiddler 详解
- ICCV 2021 | FACIAL :动态谈话人脸视频生成,姿态,眨眼皆可控!
- 紫光输入法终于有新版本了--紫光华宇拼音输入法V5P
- [SV]SystemVerilog Structured Procedures --- always_comb、always_ff、always_latch
- DDR4内存大小等信息计算
- MySQL——SQLyog如何导出、导入数据库
- ubuntu docker dm_task_run failed error
- JAVA IO操作笔记
- 【课程作业|图论】第一章课后习题
- PPT设置多级项目符号和标号
- Google搜索从入门到精通【转】
- 脉冲多普勒雷达_训练模型以使用多普勒脉冲雷达进行目标分类
热门文章
- Codeforces Round #713 (Div. 3)
- python mapreduce函数_Map-reduce在Python高阶函数中的应用,python,用法,之,mapreduce
- JS中for循环的两种写法
- zookeeper集群配置与配置文件详解
- bdphp在线订购是真的么_《瑞评》330i会是宝马粉最后的希望么?
- vim循环下表复制_Vim求生手册,让你离“Vim党”更近一步!
- php cms使用视频教程,PHPCMS v9视频模块使用教程二
- ogg 11.2 for mysql_配置ogg异构mysql-oracle 单向同步
- php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
- 前端传中文文件名_前端工程师需要掌握哪些知识,web前端开发规范总结