прямоугольник с лифтом, скоординированный с событиями мыши

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

// EDIT:

версия только с 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(); 
}