리플릿 세트가 마우스 이벤트에서 조정 된 사각형

Question

사용자가 사각형의 한 모서리를 마우스 아래쪽 이벤트에 그릴 수 있도록 허용하고 있습니다. 마우스 위쪽 이벤트가 발생하면 반대쪽을 설정하려고합니다. 구석 좌표와 직사각형을 그립니다.

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

내 타일 여전히 마우스 다운 이벤트에 이동할 수 있습니다하지만 난 내가 원하는 적 사각형을 그릴 수 있도록하고 싶습니다 : 내 * .ASPX 자바 스크립트에 다음을 시도했다. 이걸 어떻게 한판 승부해야합니까?

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