Leaflet中使用Leaflet-MiniMap插件实现小地图效果
场景
Leaflet快速入门与加载OSM显示地图:
Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基础上,怎样使用插件实现小地图效果如下
注:
博客:
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、插件地址
https://github.com/Norkart/Leaflet-MiniMap
2、注意这里的官方说明
不要将小地图组件添加到主地图的图层上,需要单独声明一个图层。
3、下载源码引入所需的js、css、image文件
4、修改css中图片的路径
5、完整示例代码
<!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" /><link rel="stylesheet" href="./css/Control.MiniMap.min.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/Control.MiniMap.min.js"></script><script type="text/javascript">var map = L.map('map');var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';var osmAttrib='Map data © OpenStreetMap contributors';var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18, attribution: osmAttrib});map.addLayer(osm);map.setView(new L.LatLng(36.09, 120.35),10);//Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controlsvar osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);</script>
</body></html>
Leaflet中使用Leaflet-MiniMap插件实现小地图效果相关推荐
- 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.easyPrint插件实现打印效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
- 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博客 在上面的基础上,怎样实现地图全屏效果. ...
最新文章
- 在windows程序中嵌入Lua脚本引擎--使用VS IDE编译Luajit脚本引擎
- 两个摄像头是如何将照片拼接在一起的
- Redis 从入门到起飞(下)
- 如何从XMLHttpRequest创建自定义获取API
- php使用phantomjs
- 删除数据所有的表和存储过程
- Oracle truncate table 与 delete tabel的区别
- pdf屏幕取词 android,金山词霸Android版更是独家实现了手机屏幕取词和摄像头取词功能...
- 一道金蝶校园招聘试题数据库笔试题
- 为什么Stc-isp一直在检测单片机
- 基于sa866的电磁搅拌器计算机控制系统,一种新型电磁搅拌器计算机控制系统
- python体测成绩数据分析_Python+Excel数据分析实战:军事体能考核成绩评定(二)基本框架和年龄计算...
- win7系统打开打印机服务器,Win7如何开启打印机服务?
- 【精品软件】鼠标右键菜单设置管理工具
- Ubuntu深度学习环境配置(2):Ubuntu18.04安装N卡驱动+anaconda3
- 双足机器人课设报告_小型舞蹈双足机器人的设计及实现
- 单片机应用系统设计技术——智能温控器
- magic winmail邮件服务器,使用Magic Winmail Server轻松架设邮件服务器(一)-网管专栏,邮件服务...
- 单片机应用系统之最小系统
- 云计算技术基础【13】
热门文章
- python numpy.linspace() 使用介绍
- tf里面InteractivateSession()与Session()的区别
- ValueError: This model has not yet been built. Build the model first by calling build() or calling f
- RHCS套件实现高可用负载均衡集群(二)——Fence设备
- Resource interpreted as Stylesheet but transferred with MIME type text/html: “**.jsp“,主要因为拦截器将所有资源拦截
- shiro基于url权限认证时doGetAuthorizationInfo方法不运行的解决办法
- JVM 垃圾回收机制和常见算法
- matlab画三维图电磁场,利用matlab实现矩形波导电磁场分布图的绘制.doc
- 圆的半径java_css中的圆形边界半径工件
- 安装es怎么在后台运行_ES备份索引数据到阿里云OSS