Question

我试图让用户能够设置矩形的一个角来绘制鼠标按下事件，当鼠标向上事件触发时我想设置相对的角坐标并绘制矩形。我在* .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);
}

我的瓷砖仍然可以平移鼠标按下事件，但我希望能够在任何我想要的地方绘制一个矩形。我该怎么回事？

Answer 1

如果您不希望地图平移，则可以添加 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();
}

小册子从鼠标事件设置矩形坐标

1 个答案: