Come posso ottenere la selezione delle funzioni OpenLayers e il trascinamento della selezione Javascript?

Question

Sto scrivendo un'applicazione che utilizza OpenLayers per consentire agli utenti di trascinare e rilasciare i file su un set predefinito di funzionalità che vengono inviate a un server con AJAX. I file stessi sono dati grezzi provenienti da apparecchiature geofisiche che verranno renderizzate come layer raster dal server.

ho drag-and-drop di lavoro per la mappa:

var mapelem = $id("map"); 
mapelem.addEventListener("dragover", FileDragHover, false); 
mapelem.addEventListener("dragleave", FileDragHover, false); 
mapelem.addEventListener("drop", FileSelectHandler, false); 

E devo evidenziazione al passaggio del mouse lavorare con questo codice:

var sf = new OpenLayers.Control.SelectFeature(boxes, { 
    hover: true, 
    multiple: false, 
    highlightOnly: true 
}); 
map.addControl(sf); 
sf.activate(); 

Il resto del codice è in gran parte solo il Boxes Example - Vector.

Il problema è che quando si trascina un file sull'area di disegno della mappa, la selezione del passaggio del mouse di OpenLayers non funziona più e desidero il feedback che fornisce all'utente per assicurarsi che il file venga rilasciato dove previsto.

posso ottenere la posizione del cursore sulla tela:

map.events.register("mousemove", map, function(e) { 
    lonlat = map.getLonLatFromPixel(e.xy); 
}); 

così che io possa essere in grado di fare un test point-in-funzione in quella funzione, ma sarebbe bello essere in grado di utilizzare il funzionalità esistente.

C'è un modo per propagare il messaggio di trascinamento al livello OpenLayers?

Answer 1

Dalla documentazione di trascinamento della selezione MDN [1]: "Notare che vengono attivati ​​solo gli eventi di trascinamento; eventi del mouse come mousemove non vengono attivati ​​durante un'operazione di trascinamento. »

Quindi non sarà possibile registrare il gestore di trascinamento sulla mappa div. Forse potresti provare a registrare un gestore di trascinamento su ogni funzione. Qui un codice parzialmente testato (e solo con il renderer SVG):

boxes.features.forEach(function(f){ 
    elem = $(f.geometry.id); 
    elem.addEventListener("dragover", FileDragHover, false); 
    elem.addEventListener("dragleave", FileDragHover, false); 
    elem.addEventListener("drop", FileSelectHandler, false); 
}) 

Speranza che può essere d'aiuto.

1 - https://developer.mozilla.org/En/DragDrop/Drag_and_Drop