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

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();
}