2012-06-21 12 views
12

Kullanıcıların, dosyaları AJAX ile sunucuya gönderilen önceden tanımlanmış bir özellik grubuna sürükleyip bırakmasını sağlamak için OpenLayers kullanan bir uygulama yazıyorum. Dosyalar kendileri, sunucu tarafından raster katman olarak oluşturulacak olan jeofizik ekipmanından gelen ham verilerdir.OpenLayers özellik seçimini nasıl alırım ve Javascript birlikte çalışıp sürükleyip bırakabilirim?

Haritaya için çalışan sürükle ve bırak vardır:

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

Ve bu kodla çalışan Üzerine giderek vurgu var:

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

kod kalanı çoğunlukla sadece Boxes Example - Vector.

Sorun şu ki, bir dosyayı harita kanvasına sürüklerken, OpenLayers'ın vurgulu seçimi artık çalışmaz ve geri döndükleri dosyayı bıraktıklarından emin olmak için kullanıcıya verdiği geri bildirimin olmasını isterim.

Ben tuval üzerine imleç konumunu alabilirsiniz

:

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

Bu yüzden o işlevinde bir nokta-in-özelliği testi yapmak mümkün olabilir, ancak kullanmaya muktedir iyi olurdu mevcut işlevler.

Sürükleme iletisini OpenLayers katmanıma yaymanın bir yolu var mı?

cevap

3

MDN sürükle ve bırak belgelerinden [1]: «Yalnızca sürükleme olaylarının tetiklendiğini unutmayın; Sürükleme işlemi sırasında mousemove gibi fare olayları tetiklenmez »

Bu nedenle sürükleme işleyicinizi haritaya kaydettiremezsiniz. Belki her özellik için bir sürükleme işleyicisi kaydetmeyi deneyebilirsiniz. İşte bazı yarı test kodu (ve sadece SVG oluşturucuyla): can olur

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

Umut.

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

+0

sonra programlı işleyicinizde özelliği seçmek gerekir. – tonio

İlgili konular