javascript - OpenLayers 3: "movestart" event on map - Stack Overflow

admin管理员组

文章数量:1287942

OpenLayers3 API has a map.on("moveend") , however I cannot find a movestart. Any one know how I can achieve this? Is there a equivalent event?

OpenLayers 2 had a movestart event on map. I am looking an exact parallel in OpenLayers3

Here's a basic jsFiddle. If someone want's to play around. I did add a movestart event there, to show what I want, but it doesn't actually exist I think.

Use Case! one might ask: I have stops on maps that have nearly fullscreen infowindows. Users can switch to next marker from infowindow. I make the windows translucent to show the map panning underneath, so users get a context of where next location is. This work's great in OpenLayers2 with movestart and moveend events. But in the new OL3 version of the map, I can't get the movestart event.

Update: I did answer the question my self, but I am still offering bounty if anyone would like to propose a better solution.

OpenLayers3 API has a map.on("moveend") , however I cannot find a movestart. Any one know how I can achieve this? Is there a equivalent event?

OpenLayers 2 had a movestart event on map. I am looking an exact parallel in OpenLayers3

Here's a basic jsFiddle. If someone want's to play around. I did add a movestart event there, to show what I want, but it doesn't actually exist I think.

Use Case! one might ask: I have stops on maps that have nearly fullscreen infowindows. Users can switch to next marker from infowindow. I make the windows translucent to show the map panning underneath, so users get a context of where next location is. This work's great in OpenLayers2 with movestart and moveend events. But in the new OL3 version of the map, I can't get the movestart event.

Update: I did answer the question my self, but I am still offering bounty if anyone would like to propose a better solution.

• javascript
• gis
• openlayers-3

Share Improve this question Follow edited Aug 11, 2015 at 16:15 Shaunak asked Aug 8, 2015 at 16:48 ShaunakShaunak 18k55 gold badges5656 silver badges8686 bronze badges 6

• What's wrong with your own solution? – Jonatas Walker Commented Aug 11, 2015 at 16:21
• The code just smells. This could be something much simple if the callback was supported. Any easy way to inject such a callback in the OL3 library would be nice answer to have. Either that, or I am just looking for some different view points here i guess. – Shaunak Commented Aug 11, 2015 at 16:23
• I guess you need to use the prepose event. See my jsFiddle: jsfiddle/j2cP4/116 – GuyT Commented Aug 18, 2015 at 10:59
• can't you just pretend to treat that as a canvas and detect the mousedown event? Like this? (check console): jsfiddle/j2cP4/117 – briosheje Commented Aug 18, 2015 at 15:20
• @GuyT, can't use prepose as it is not specifically targeted for move action. It will get triggered for any kind of map render, like for eg. a layer change. – Shaunak Commented Aug 20, 2015 at 5:07

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

UPDATE v4.2.0 now supports native movestart and moveend events

map.on('movestart', function(event) {

    //To Remove after first use: ol.Observable.unByKey(event);
});

map.on('moveend', function(event) {

    //To Remove after first use:  ol.Observable.unByKey(event);
});

For OpenLayers 3 versions before release of v4.2.0

Okay so in the mean while without the movestart event, and with the moveend only triggering if there is a actual movement in map, here's how I was able to achive movestart and moveend behavior.

jsFiddle:

var pan = ol.animation.pan({
    duration: 700,
    source: this.map.getView().getCenter()
});
map.beforeRender(function(map, frameState) {
    var stillPanning = pan(map, frameState); // returns false panning is done
    if (stillPanning) {
        // do movestart stuff here
        if (!everDone) {
            doSomething();
            everDone = true;
        }
    } else {
        // do move end stuff here
        undoSomething();
        everDone = false;
    }
    return stillPanning;
});
map.getView().setCenter(geom);

So why this works?

1. ol.animation.pan returns a ol.PreRenderFunction, which returns false if animation is not plete

2. Writing custom function and providing it to map.renderBefore can be now used to write a wrapper around pan animation as shown above

3. The whole business with everDone is because, stillPanning section will get called multiple times. This is okay if what you want to do there can take repeated calls, but if you want to toggle something then you want to do it only once.

behavior of 'moveend' moveend callback is only triggered if map actually moves. This is fine, but it prevents us from doing pre-animation activities, by just doing them before animation done. If you had a scenario where map doesn't actually move, then what ever you did before animation will never undo because that behavior is in moveend which never gets called!

Hope this helps someone. I had to spend good two hours to get it to work for me, because a movestart callback is absent :(

UPDATE

Upon more discussion on this thread there is another solution as suggested by @ahocevar. That is to use the propertychange event on the view like so:

function onpropertychange() {
  map.dispatchEvent('movestart');
  var view = map.getView();
  view.un('propertychange', onpropertychange);
  map.on('moveend', function() {
    view.on('propertychange', onpropertychange);
  });
};
map.getView().on('propertychange', onpropertychange);

Here's a working example of this approach: jsFiddle

you could use the pointerdrag or pointermove event, but you will want to debounce them. I did so here with a variable called dragStarted

http://jsfiddle/sean9999/j2cP4/115/

http://openlayers/en/v3.8.2/apidoc/ol.MapBrowserEvent.html

本文标签： javascriptOpenLayers 3 quotmovestartquot event on mapStack Overflow