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不会在那里工作......这个的范围是不同的。你需要做一些类似var = 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

查看Drag处理程序上的documentation，它声明它应该与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中使用了它：

GetComponent

hf gl！

Openlayers和捕捉拖动事件

4 个答案: