Type alias MapMouseEventType

MapMouseEvent의 이벤트 유형입니다.

mousedown

지도 내에서 포인팅 장치(일반적으로 마우스)를 누르면 시작됩니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 이벤트 리스너 설정
map.on("mousedown", function() {
  console.log("A mousedown event has occurred.");
});

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 특정 레이어에 대한 이벤트 리스너 설정
map.onLayer("mousedown", "point", function() {
  console.log("A mousedown event has occurred on a visible portion of the point layer.");
});

See

드래그 가능한 point 만들기

mouseup

지도 내에서 포인팅 장치(일반적으로 마우스)를 놓으면 시작됩니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 이벤트 리스너 설정
map.on("mouseup", function() {
  console.log("A mouseup event has occurred.");
});

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 특정 레이어에 대한 이벤트 리스너 설정
map.onLayer("mouseup", "point", function() {
  console.log("A mouseup event has occurred on a visible portion of the point layer.");
});

드래그 가능한 지점 만들기

click

지도의 같은 지점에서 포인팅 장치(일반적으로 마우스)를 눌렀다가 놓으면 시작됩니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// Set an event listener
map.on("click", function(e) {
  console.log("A click event has occurred at " + e.lngLat);
});

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// Set an event listener for a specific layer
map.onLayer("click", "point", function(e) {
  console.log("A click event has occurred on a visible portion of the point layer at " + e.lngLat);
});

dbclick

포인팅 장치(일반적으로 마우스)가 지도의 같은 지점에서 빠르게 연속해서 두 번 눌렸다가 놓이면(더블클릭 시) 발생합니다.

참고: 정상적인 조건에서 이 이벤트는 두 개의 click 이벤트가 선행됩니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 이벤트 리스너 설정
map.on("dblclick", function(e) {
  console.log("A dblclick event has occurred at " + e.lngLat);
});

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 특정 레이어에 대한 이벤트 리스너 설정
map.onLayer("dblclick", "point", function(e) {
  console.log("A dblclick event has occurred on a visible portion of the point layer at " + e.lngLat);
});

Map Zoom Event

mousemove

커서가 지도 안에 있는 동안 포인팅 장치(일반적으로 마우스)를 움직일 때 발생합니다. 지도에서 커서를 움직이면 지도 내에서 커서의 위치가 바뀔 때마다 이벤트가 실행됩니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 이벤트 리스너 설정
map.on("mousemove", function() {
  console.log("A mousemove event has occurred.");
});

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 특정 레이어에 대한 이벤트 리스너 설정
map.onLayer("mousemove", "point", function() {
  console.log("A mousemove event has occurred on a visible portion of the point layer.");
});

mouseover

포인팅 장치(일반적으로 마우스)가 지도 내에서 움직일 때 발생합니다. 지도가 포함된 웹 페이지에서 커서를 이동하면 지도 또는 하위 요소에 들어갈 때마다 이벤트가 실행됩니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 이벤트 리스너 설정
map.on("mouseover", function() {
  console.log("A mouseover event has occurred.");
});

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 특정 레이어에 대한 이벤트 리스너 설정
map.onLayer("mouseover", "point", function() {
  console.log("A mouseover event has occurred on a visible portion of the point layer.");
});

mouseenter

포인팅 장치(일반적으로 마우스)가 해당 레이어 외부 또는 지도 캔버스 외부에서 지정된 레이어의 보이는 부분으로 들어갈 때 발생합니다.

중요: 이 이벤트는 onLayer에서만 수신할 수 있습니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 이벤트 리스너 설정
map.onLayer("mouseenter", "water", function() {
  console.log("A mouseenter event occurred on a visible portion of the water layer.");
});

Display a InfoWindow on Click

mouseleave

포인팅 장치(일반적으로 마우스)가 지정된 레이어의 보이는 부분을 벗어나거나 지도 캔버스를 떠날 때 발생합니다.

중요: 이 이벤트는 onLayer에서만 수신할 수 있습니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 포인팅 장치가 지정된 레이어의 보이는 부분을 벗어날 때 발생하는 이벤트 리스너를 설정합니다.
map.onLayer("mouseleave", "water", function() {
  console.log("A mouseleave event occurred.");
});

Create a hover effect

mouseout

포인트 장치(일반적으로 마우스)가 지도의 캔버스를 벗어나면 시작됩니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 포인팅 장치가 지도의 캔버스를 떠날 때 실행되는 이벤트 리스너를 설정합니다.
map.on("mouseout", function() {
  console.log("A mouseout event occurred.");
});

contextmenu

지도 내에서 마우스 오른쪽 버튼을 클릭하거나 컨텍스트 메뉴 키를 누르면 발생합니다.

// 지도 초기화
let map = new ktGms.Map({  }); // map options
// 마우스 오른쪽 버튼을 눌렀을 때 발생하는 이벤트 리스너를 설정합니다.
지도 내에서 눌렀습니다.
map.on("contextmenu", function() {
  console.log("A contextmenu event occurred.");
});