12

私は、OpenLayersを使用して、ユーザーがAJAXを使用してサーバーに送信される事前定義された機能のセットにファイルをドラッグアンドドロップできるようにするアプリケーションを作成しています。ファイル自体は、サーバーによってラスターレイヤーとしてレンダリングされる地球物理学機器からの生データです。

マップのドラッグアンドドロップが機能しています。

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

そして、私はこのコードでのホバー作業に焦点を当てています：

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

残りのコードは、ほとんどがBoxesExample-Vectorです。

問題は、ファイルをマップキャンバスにドラッグすると、OpenLayersのホバー選択が機能しなくなることです。ユーザーが期待する場所にファイルをドロップしていることを確認するために、ユーザーにフィードバックを提供したいと思います。

キャンバス上のカーソルの位置を取得できます。

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

そのため、その機能でポイントイン機能テストを実行できる可能性がありますが、既存の機能を使用できると便利です。

ドラッグメッセージをOpenLayersレイヤーに伝播する方法はありますか？

4

1 に答える 1

3

MDNドラッグアンドドロップのドキュメント[1]から：«ドラッグイベントのみが発生することに注意してください。mousemoveドラッグ操作中に発生しないなどのマウスイベント。»

そのため、ドラッグハンドラーをマップdivに登録することはできません。たぶん、各機能にドラッグハンドラーを登録してみることができます。ここにいくつかの半分テストされたコード（そして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);
})

それがお役に立てば幸いです。

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

于 2012-07-19T08:44:16.797 に答える