The dragging the features on opelayers map is not very straightforward for newbies because it assumes to be familiar with the concept of interactions and there’s no good sample to start the dragging.
In fact the have a related sample translate-features but it enforces a feature to be clicked before it can be moved and it does not shows the way to be notified about the changing end.
Moreover – in the most tutorials and advices there are “modify” interaction mentioned while it is intended to modify the elements of the feature rather than move the feature as a whole. Particularly “modify” will show a circle in the some point of the feature instead of the changing the cursor hovering over the feature.
So. The first task is to start dragging. Or, in the terms of Openlayer – “to add translate interaction to the map against some fetures”.
Let’s observe the hovering over a map:
|
1 2 3 4 5 |
componentWillMount () { ... this.props.map.on('pointermove', this.onMapMouseMove); ... } |
And, if the hovering happens to be over a feature add the interaction, remove the interaction otherwise.
|
1 2 3 4 5 6 7 8 9 10 11 |
onMapMouseMove (event) { const { map } = this.props; if (map) { const features = map.getFeaturesAtPixel(event.pixel, { hitTolerance: HIT_TOLERANCE }); if (features && features.length > 0) { this.addTranslate(map, features[0]); } else { this.removeTranslate(map); } } } |
Where the adding includes the steps:
- create ol InteractionTranslate instance
- add it to the map
- add “translateend” event listener to the interaction
|
1 2 3 4 5 6 7 8 |
addTranslate (map, feature) { this.interactionTranslate = new InteractionTranslate({ features: new Collection([feature]) }); map.addInteraction(this.interactionTranslate); this.interactionTranslate.on('translateend', evt => { console.log(evt.coordinate); ... }); } |
and the removing is as easy as
|
1 2 3 4 5 6 |
removeTranslate (map) { if (this.interactionTranslate) { map.removeInteraction(this.interactionTranslate); this.interactionTranslate = null; } } |
And here we are.
