Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果

最新推荐文章于 2023-05-13 21:06:10 发布

霸道流氓气质

最新推荐文章于 2023-05-13 21:06:10 发布

阅读量447

点赞数

分类专栏： GIS相关文章标签： leaflet

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122451882

版权

GIS相关专栏收录该内容

130 篇文章 49 订阅

订阅专栏

场景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

在上面的基础上，怎样使用插件实现放大镜效果如下

注：

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

实现

1、插件地址

GitHub - bbecquet/Leaflet.MagnifyingGlass: A plugin to add a customizable magnifying glass tool to a Leaflet map.

2、下载源码，引入所需要的leaflet.magnifyingglass.js文件，将css文件直接写在html中，完整html代码


<!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;
        }

        .leaflet-magnifying-glass {
            border-radius: 50%;
            border: 1px solid gray;
            box-shadow: 0 0 5px gray;
            position: absolute;
            overflow: hidden;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .leaflet-magnifying-glass>.leaflet-container {
            height: 100%;
            width: 100%;
        }

        /* Webkit-only workaround for the border-radius clipping bug,
applied to the map container */
        .leaflet-magnifying-glass-webkit {
            border-radius: 50%;
            -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
        }
    </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/leaflet.magnifyingglass.js"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([36.09, 120.35], 13);
        var tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
        L.tileLayer(tileUrl, {
            attribution: ''
        }).addTo(map);

        var magnifyingGlass = L.magnifyingGlass({
            zoomOffset: 3,
            layers: [
                L.tileLayer(tileUrl)
            ]
        });

        map.addLayer(magnifyingGlass);

        // make the glass disappear on click...
        magnifyingGlass.on('click', function () {
            map.removeLayer(magnifyingGlass);
        })

        // ...and reappear on right click
        map.on('contextmenu', function (mouseEvt) {
            if (map.hasLayer(magnifyingGlass)) {
                return;
            }
            map.addLayer(magnifyingGlass);
            magnifyingGlass.setLatLng(mouseEvt.latlng);
        });
    </script>
</body>

</html>

霸道流氓气质

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果

场景Leaflet快速入门与加载OSM显示地图：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880在上面的基础上，怎样使用插件实现放大镜效果如下注：博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现1、插件地址GitHub - bbecqu.
复制链接

扫一扫