Openlayers 和捕獲拖動事件

Question

我正在使用 OpenLayers，我需要能夠區分地圖何時被我自己的腳本或用戶移動。 是的，我知道我可以使用 moveend。 但它也會在同一腳本根據來自 ajax 調用的傳入數據移動或重新定位地圖時觸發。 所以 moveend 或其他地圖事件將不起作用。

我做了一些谷歌搜索並找到了 OpenLayers.Hander.Drag。 但我用它所做的一切就是阻止用戶拖動地圖。

我的腳本：

this.dragger = new OpenLayers.Handler.Drag('',{
        'dragStart': function(evt){
            this.userdragged = true;
            console.log('drag');
        }},{
        'map':this.mymap
        });
this.dragger.activate();

如您所見，我嘗試將 userdragged 變量設置為 true，以便稍后在 moveend 事件中使用相同的變量。 不幸的是，所有這一切都是為了阻止我的地圖被拖動。

有人可以幫我嗎？

艾倫

Answer 1

知道了！

它起作用的原因是：

dragcontrol = new OpenLayers.Control.DragPan({'map':this.mymap, 'panMapDone':function(evt){
    this.userdragged  = true;
    console.log('drag');
}});
dragcontrol.draw();
this.mymap.addControl(dragcontrol);
dragcontrol.activate();

布亞卡！

編輯：實際上 this.userdragged 不會在那里工作......那里的范圍不同。 你需要做類似 var that = this; 的事情。 在該對象初始化之前使用 that.userdragged = true....

Edit2：我后來發現，這個 panMapDone 函數覆蓋了 DragPans 自己的同名方法。 就我之前的示例而言，當用戶拖動地圖時，您可能會得到導致矢量要素與地圖不同步的地圖。 為了阻止這種情況發生，您也應該將原始功能也復制到該函數中……使其看起來像這樣：

dragcontrol = new OpenLayers.Control.DragPan({'map':this.mymap, 'panMapDone':function(xy){
        if(this.panned) {
            var res = null;
            if (this.kinetic) {
                res = this.kinetic.end(xy);
            }
            this.map.pan(
                this.handler.last.x - xy.x,
                this.handler.last.y - xy.y,
                {dragging: !!res, animate: false}
            );
            if (res) {
                var self = this;
                this.kinetic.move(res, function(x, y, end) {
                    self.map.pan(x, y, {dragging: !end, animate: false});
                });
            }
            this.panned = false;
        }
        that.userdragged  = true;
            // do whatever you want here
    }});
    dragcontrol.draw();
    this.mymap.addControl(dragcontrol);
    dragcontrol.activate();

艾倫

Answer 2

查看有關拖動處理程序的文檔，它指出它應該與 Control 對象一起使用。 你是這樣用的嗎？ 也許代碼片段沒有顯示出來？

“如果在沒有控件的情況下使用處理程序，則必須重寫處理程序 setMap 方法才能正確處理地圖。”

我沒試過，但看起來你應該去做這樣的事情：

var myControl = new OpenLayers.Control();

var dragger = new OpenLayers.Handler.Drag{
    control: myControl,
    callbacks: { 'done': function() { // do something }},
    options: {}
}

myMap.addControl(myControl);
myControl.activate();

Answer 3

只是在這里發布一個示例，當用戶拖動地圖時執行任意函數，而不會干擾用於平移地圖的正常點擊拖動，因為在我搜索如何執行此操作時，此頁面是最常見的結果。

var CustomDragControl = OpenLayers.Class(OpenLayers.Control, {

    defaultHandlerOptions: {
        'stopDown': false
        /* important, otherwise it prevent the click-drag event from 
           triggering the normal click-drag behavior on the map to pan it */
    },

    initialize: function(options) {
        this.handlerOptions = OpenLayers.Util.extend(
            {}, this.defaultHandlerOptions
        );
        OpenLayers.Control.prototype.initialize.apply(
            this, arguments
        ); 
        this.handler = new OpenLayers.Handler.Drag(
            this, {
                'down': this.onDown //could be also 'move', 'up' or 'out'
            }, this.handlerOptions
        );
    }, 

    onDown: function(evt) {
        // do something when the user clic on the map (so on drag start)
        console.log('user clicked down on the map');
    }
});

然后在創建地圖實例時將控件添加到地圖的控件列表中，或者使用 map.addControl()，使用

new CustomDragControl ({'autoActivate': true})

Answer 4

我在 OpenLayers 6 中使用過它：

map.on('pointerdrag', function (event) {
    is_map_center = false;
})

高頻 gl！