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();

Booyaka！

编辑：
实际上 this.userdragged 在那里不起作用...... this 的范围在那里是不同的。你需要做类似 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();

Alan

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;
})

hf gl！