Openlayers和捕获拖动事件

Openlayers and catching drag event

本文关键字：拖动 事件 Openlayers      更新时间：2023-09-26

我使用OpenLayers，我需要能够分辨地图何时被我自己的脚本或用户移动。是的，我知道我可以使用moveend。但是，当同一脚本根据来自ajax调用的传入数据移动或重新定位地图时，也会触发该脚本。所以moveend或其他map事件不起作用。

我搜索了一下，找到了openlayers . handler . drag。但我所做的就是阻止用户拖动地图。

我的脚本:

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

可以看到，我试图将userdrag变量设置为true，以便在moveend事件中使用相同的变量。不幸的是，所有这些都阻止了我的地图被拖动。

有人能帮我一下吗?艾伦

明白了!

让它工作的是:

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 !

编辑:实际上这个问题。userdrag在那里不起作用…这里的范围是不同的。你需要这样写var that = this;在对象初始化之前使用它。userdrag = true....

Edit2:我后来发现，这个panMapDone函数覆盖了dragpan自己的同名方法。在我前面的例子中，当用户拖拽地图时，可能会导致矢量特征与地图不同步。为了防止这种情况发生，您应该将原始功能也复制到该函数中。让它看起来像这样:

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

查看关于拖动处理程序的文档，它声明它应该与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();

只是在这里发布一个示例，当用户拖动地图时执行任意函数，而不干扰用于平移地图的正常点击-拖动，因为这个页面是我搜索过程中最常见的结果。

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

我在OpenLayers 6中使用了它:

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

高频gl !

相关文章：