tutorial - ¿Cómo obtendría la selección de funciones de OpenLayers y JavaScript arrastrar y soltar trabajando juntos?
openlayers tutorial español (1)
Estoy escribiendo una aplicación que usa OpenLayers para permitir a los usuarios arrastrar y soltar archivos en un conjunto predefinido de características que se envían a un servidor con AJAX. Los archivos en sí son datos brutos de equipos geofísicos que el servidor representará como una capa ráster.
He arrastrado y soltado trabajando para el mapa:
var mapelem = $id("map");
mapelem.addEventListener("dragover", FileDragHover, false);
mapelem.addEventListener("dragleave", FileDragHover, false);
mapelem.addEventListener("drop", FileSelectHandler, false);
Y tengo que destacar sobre el vuelo estacionario con este código:
var sf = new OpenLayers.Control.SelectFeature(boxes, {
hover: true,
multiple: false,
highlightOnly: true
});
map.addControl(sf);
sf.activate();
El resto del código es principalmente el Ejemplo de cajas - Vector .
El problema es que al arrastrar un archivo al lienzo del mapa, la selección del elemento emergente OpenLayers ya no funciona, y me gustaría recibir los comentarios que le da al usuario para asegurarse de que están soltando el archivo donde lo esperan.
Puedo obtener la posición del cursor en el lienzo:
map.events.register("mousemove", map, function(e) {
lonlat = map.getLonLatFromPixel(e.xy);
});
Así que puedo hacer una prueba de punto en función en esa función, pero sería bueno poder usar la funcionalidad existente.
¿Existe alguna forma de propagar el mensaje de arrastre a mi capa OpenLayers?
Desde la documentación de arrastrar y soltar de MDN [1]: «Tenga en cuenta que solo se disparan los eventos de arrastre; eventos de mouse como mousemove no se disparan durante una operación de arrastre. »
Por lo tanto, no podrá registrar su controlador de arrastre en el div del mapa. Tal vez podría intentar registrar un controlador de arrastre en cada característica. Aquí un código a prueba a medias (y solo con el renderizador 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);
})
Espero que pueda puede ayudar.