Можем ли мы сделать ol.Overlay перетаскиваемым на OpenLayers 3?

Question

Я пытаюсь сделать, что ol.overlay перетаскивается, но я не могу этого сделать. Я нашел этот пример (http://openlayers.org/en/v3.2.1/examples/drag-features.html?q=drag), но это делается с использованием ol.Features, и мне нужно оверлей, так как я могу использовать собственный -html div-для показа, который мне нужен. Я также нашел очень интересный пример, который способен делать то, что я хочу, но это делается с помощью google maps v3, и мне это нужно для ol3.
Спасибо заранее.

Answer 1

UPDATE:

Там нет необходимости этого ol.Map.prototype.forEachOverlayAtPixel метода (см https://github.com/openlayers/ol3/issues/5760).

Просто зарегистрируйте прослушиватель mousedown на оверлейном элементе DOM, и вы хорошо пойдете. Fiddle updated.

---

ol.Overlay является плохим типом в OL3, но с некоторой работой, да, вы можете достичь его. ol.Feature - всемогущий, и если вам действительно нужно ol.Overlay Я подошел к этому demo fiddle.

Идея такова:

• Прислушайтесь pointerdown события карты и проверить, есть ли наложение на выбранном пикселе;

  • ol.Map.prototype.forEachOverlayAtPixel - просто создан для вопроса

• Деактивировать ol.interaction.DragPan - карта панорамирование;

• Прослушать pointermove и установить положение наложения;

• Слушать pointerup и восстанавливать ol.interaction.DragPan;

Answer 2

Вы можете просто зарегистрировать прослушиватель событий «mousedown» на div оверлея. Внутри этого слушателя зарегистрируйте события «mousemove» и «mouseup» в окне. Чтобы обновить позицию в 'mousemove', используйте метод ol.Map#getEventPixel(), который принимает событие mousemove в качестве аргумента. В «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/ для примера.