传单设置矩形从鼠标事件协调

leaflet set rectangle coordinated from mouse events

本文关键字：鼠标 事件 协调 单设置 设置      更新时间：2023-09-26

我试图允许用户能够设置矩形的一个角以在鼠标按下事件上绘制，当鼠标向上事件触发时，我想设置相反的角坐标并绘制矩形。我已经在我的*中尝试了以下内容。ASPX javascript：

var oneCorner;
var TwoCroner;
map.on('mousedown', setOneCorner);
map.on('mouseup', setTwoCorner);
function setOneCorner(e)
{
    oneCorner = e.latlng;
}
function setTwoCorner(e)
{
    twoCorner = e.latlng;
    var bounds = [oneCorner.latlng, twoCorner.latlng];
    L.rectangle(bounds, {color:"#ff7800", weight:1}).addTo(map);
}

我的磁贴仍然可以在鼠标按下事件上平移，但我希望能够在我想要的任何位置绘制一个矩形。 我应该怎么回合这样做？

如果您不希望地图平移，则可以添加 map.dragging.disable()到你的代码。此外，您的数组应var bounds = [oneCorner, twoCorner];因为角变量已经是 LatLng 对象。

完整代码将是：

var oneCorner;
var TwoCroner; 
map.on('mousedown', setOneCorner);
map.on('mouseup', setTwoCorner);
map.dragging.disable();
function setOneCorner(e)
{
oneCorner = e.latlng;
} 
function setTwoCorner(e)
{
twoCorner = e.latlng;    
var bounds = [oneCorner, twoCorner];
L.rectangle(bounds, {color:"#ff7800", weight:1}).addTo(map);
}

但我不认为防止地图平移是个好主意。如何将其与Ctrl一起使用，或者您可以使用此插件进行绘图：https://github.com/Leaflet/Leaflet.draw

//编辑：

仅按 Ctrl 的版本：

var oneCorner;
var TwoCroner; 
map.on('mousedown', setOneCorner);
map.on('mouseup', setTwoCorner);
function setOneCorner(e)
{
    if (e.originalEvent.ctrlKey) {
        map.dragging.disable();
        oneCorner = e.latlng;   
    }    
} 
function setTwoCorner(e)
{
    if (e.originalEvent.ctrlKey) {
        twoCorner = e.latlng;    
        var bounds = [oneCorner, twoCorner];
        L.rectangle(bounds, {color:"#ff7800", weight:1}).addTo(map);        
    }
    map.dragging.enable();
}
相关文章：