2016-08-19 4 views
1

나는 ol.overlay를 드래그 할 수있게하려고 노력하고 있지만 그것을 할 수는 없습니다. 나는이 예제 (http://openlayers.org/en/v3.2.1/examples/drag-features.html?q=drag)를 찾았지만 ol.Features를 사용하여 완성되었다. 내가 필요로하는 것을 보여주기 위해 custom -html div-를 사용할 수 있기 때문에 내가 필요한 것은 오버레이이다. 나는 또한 내가 원하는 것을 할 수있는 매우 흥미로운 예를 발견했다. 그러나 그것은 구글지도 v3을 사용하여 완성되었으며 ol3을 위해 필요하다.
미리 감사드립니다.OpenLayers 3에서 ol.Overlay를 드래그 할 수 있습니까?

답변

0

UPDATE :이 ol.Map.prototype.forEachOverlayAtPixel 방법의 필요가 없습니다

(https://github.com/openlayers/ol3/issues/5760 참조).

DOM 오버레이 요소에 mousedown 청취자를 등록하기 만하면됩니다. Fiddle updated.


ol.Overlay는 OL3에서 가난한 유형을하지만, 몇 가지 작업으로, 그래, 당신은 그것을 얻을 수 있습니다. ol.Feature은 모두 강력합니다. 만약 당신이 정말로 필요하다면 ol.Overlay 나는 이것을 내놓았습니다 demo fiddle.

아이디어는 다음과 같습니다

  • pointerdown지도 이벤트를 수신하고 클릭 한 픽셀에 오버레이이 있는지 확인;

    • ol.Map.prototype.forEachOverlayAtPixel - 단지 질문
  • 비활성화 ol.interaction.DragPan 생성 -지도 패닝;

  • pointermove을 (를) 듣고 오버레이 위치를 설정하십시오.

  • pointerup을 청취하고 ol.interaction.DragPan을 복원하십시오.

+0

안녕하세요, 감사합니다. 정말 도움이되었습니다.
감사합니다 :) – Alberto

1

오버레이의 div에 'mousedown'이벤트 리스너를 등록하기 만하면됩니다. 그 청취자 안에 'mousemove'및 'mouseup'이벤트를 창에 등록하십시오. 'mousemove'에서 위치를 업데이트하려면 'mousemove'이벤트를 인수로 취하는 ol.Map#getEventPixel() 메소드를 사용하십시오. 'mouseup'에서는 윈도우 리스너 등록을 취소하면됩니다.

marker_el.addEventListener('mousedown', function(evt) { 
    function move(evt) { 
    marker.setPosition(map.getEventCoordinate(evt)); 
    } 
    function end(evt) { 
    window.removeEventListener('mousemove', move); 
    window.removeEventListener('mouseup', end); 
    } 
    window.addEventListener('mousemove', move); 
    window.addEventListener('mouseup', end); 
}); 

작동 예제는 http://jsfiddle.net/rnzgfg89/6/을 참조하십시오.