Làm cách nào để tôi chọn tính năng OpenLayers và tính năng kéo và thả Javascript hoạt động cùng nhau?

Question

Tôi đang viết một ứng dụng sử dụng OpenLayers để cho phép người dùng kéo và thả tệp vào một tập hợp các tính năng được xác định trước được gửi đến máy chủ có AJAX. Bản thân các tập tin là dữ liệu thô từ các thiết bị địa vật lý sẽ được kết xuất dưới dạng lớp raster của máy chủ.

Tôi có drag-and-drop làm việc cho bản đồ:

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

Và tôi có nổi bật trên di chuột làm việc với mã này:

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

Phần còn lại của mã này là chủ yếu chỉ cần Boxes Example - Vector.

Vấn đề là khi kéo một tệp lên vải bản đồ, lựa chọn di chuột OpenLayers không còn hoạt động nữa và tôi muốn phản hồi cung cấp cho người dùng để đảm bảo họ đang xóa tệp mà họ mong đợi.

Tôi có thể lấy vị trí của con trỏ trên vải:

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

Vì vậy, tôi có thể làm một bài kiểm tra point-in-tính năng trong chức năng đó, nhưng nó sẽ được tốt đẹp để có thể sử dụng chức năng hiện có.

Có cách nào để tôi có thể truyền thông báo kéo đến lớp OpenLayers của mình không?

Answer 1

Từ tài liệu kéo và thả MDN [1]: «Lưu ý rằng chỉ các sự kiện kéo được kích hoạt; các sự kiện chuột như mousemove không được kích hoạt trong quá trình kéo. »

Vì vậy, bạn sẽ không thể đăng ký trình xử lý kéo của bạn vào div bản đồ. Có lẽ bạn có thể thử đăng ký trình xử lý kéo trên mỗi đối tượng địa lý. Dưới đây là một số mã được thử nghiệm một nửa (và chỉ với trình kết xuất 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); 
}) 

Hy vọng điều đó có thể hữu ích.

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