Leaflet中对鼠标按下、移动事件监听实现移动单个图形

最新推荐文章于 2024-05-14 00:00:00 发布

霸道流氓气质

最新推荐文章于 2024-05-14 00:00:00 发布

阅读量2.6k

点赞数 3

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

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

版权

GIS相关专栏收录该内容

130 篇文章 49 订阅

订阅专栏

场景

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

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

在上面的基础上，实现对单个图形进行移动。

Leaflet提供了重设图形位置的方法，通过调用图层刷新接口redraw，即可实现图形的移动功能。

注：

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

实现

1、加载底图并添加一个矩形

       var map = L.map('map',{
            //不允许地图拖拽
            dragging: false,
        }).setView([36.09, 120.35], 13);
        var tiles =
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: ''
            });
        tiles.addTo(map); 

        //绘制矩形
        rectangle = L.rectangle([[36.09, 120.35], [36.12, 120.55]], {
            //颜色
            color: "#ff7800",
            //线宽
            weight: 1,
            //填充色透明度
            fillOpacity: 0.5
        }).addTo(map);

2、监听矩形的鼠标单击事件，当在矩形上单击时，再利用map.on监听鼠标移动事件

        rectangle.once('mousedown', function (e) {
            debugger
            //获取鼠标按下位置的纬经度坐标
            var coordinate1 = e.latlng;
            //监听地图移动事件，实时改变图形位置
            map.on('mousemove ', function (e) {
                //移动位置处的坐标
                var coordinate2 = e.latlng;
                //计算坐标偏移
                var dx = coordinate2.lat - coordinate1.lat;
                var dy = coordinate2.lng - coordinate1.lng;
                //重新设置矩形位置
                var latlngs = [[36.09 + dx, 120.35 + dy], [36.12 + dx, 120.55 + dy]];
                rectangle.setBounds(latlngs);
            });
        });

3、当释放鼠标时，移除鼠标移动事件的监听，并弹窗提示移动矩形成功。

        rectangle.once('mouseup', function (e) {
            //鼠标释放后，注销鼠标移动事件
            map.off('mousemove');
            alert("移动完成！");
        });

4、完整代码


<!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">
        //定义矢量线
        var polyline;
        //定义矢量矩形
        var rectangle;

        var map = L.map('map',{
            //不允许地图拖拽
            dragging: false,
        }).setView([36.09, 120.35], 13);
        var tiles =
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: ''
            });
        tiles.addTo(map);

        //绘制矩形
        rectangle = L.rectangle([[36.09, 120.35], [36.12, 120.55]], {
            //颜色
            color: "#ff7800",
            //线宽
            weight: 1,
            //填充色透明度
            fillOpacity: 0.5
        }).addTo(map);

        /**矢量图层鼠标按压事件
        *  @param {string} type 事件类型（鼠标按下）
        *  @param {function} fn 事件触发后的响应函数
        */
        rectangle.once('mousedown', function (e) {
            debugger
            //获取鼠标按下位置的纬经度坐标
            var coordinate1 = e.latlng;
            //监听地图移动事件，实时改变图形位置
            map.on('mousemove ', function (e) {
                //移动位置处的坐标
                var coordinate2 = e.latlng;
                //计算坐标偏移
                var dx = coordinate2.lat - coordinate1.lat;
                var dy = coordinate2.lng - coordinate1.lng;
                //重新设置矩形位置
                var latlngs = [[36.09 + dx, 120.35 + dy], [36.12 + dx, 120.55 + dy]];
                rectangle.setBounds(latlngs);
            });
        });

        /**矢量图层鼠标释放事件
        *  @param {string} type 事件类型（鼠标释放）
        *  @param {function} fn 事件触发后的响应函数
        */
        rectangle.once('mouseup', function (e) {
            //鼠标释放后，注销鼠标移动事件
            map.off('mousemove');
            alert("移动完成！");
        });

    </script>
</body>

</html>

霸道流氓气质

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Leaflet中对鼠标按下、移动事件监听实现移动单个图形

场景Leaflet快速入门与加载OSM显示地图：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880在上面的基础上，实现对单个图形进行移动。Leaflet提供了重设图形位置的方法，通过调用图层刷新接口redraw，即可实现图形的移动功能。注：博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。.
复制链接

扫一扫