Leaflet中使用Leaflet-MiniMap插件实现小地图效果

深藏阁楼爱情的钟 2023-10-01 12:41 11阅读 0赞

## 场景 ##

Leaflet快速入门与加载OSM显示地图：

[Leaflet快速入门与加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]

在上面的基础上，怎样使用插件实现小地图效果如下

![d77b24044a2b4e9d838534530019f5dc.gif][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、插件地址

[https://github.com/Norkart/Leaflet-MiniMap][https_github.com_Norkart_Leaflet-MiniMap]

2、注意这里的官方说明

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

不要将小地图组件添加到主地图的图层上，需要单独声明一个图层。

3、下载源码引入所需的js、css、image文件

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

4、修改css中图片的路径

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

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 controls
      var 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_OSM_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
[d77b24044a2b4e9d838534530019f5dc.gif]: https://img-blog.csdnimg.cn/d77b24044a2b4e9d838534530019f5dc.gif
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[https_github.com_Norkart_Leaflet-MiniMap]: https://github.com/Norkart/Leaflet-MiniMap
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/91579ac397624dac85e6e2315127ac89.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/25e0a0dc064a455ea09afe81f32a8046.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/f951b5c8aad245738b67c2c994ba13a6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16