Rotate feature interaction for OpenLayers

Plugin adds interaction that allows rotating vector features around some anchor.

Demo

Installation

Install it with NPM (recommended):

# ES6 version for bundling with Webpack, Rollup or etc.
npm install ol ol-rotate-feature

Or add from CDN:

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.0/build/ol.js"></script>
<script src="https://unpkg.com/ol-rotate-feature@latest/dist/ol-rotate-feature.umd.js"></script>
<script>
  // plugin exports global variable RotateFeatureInteraction
  // in addition it also exported to `ol.interaction.RotateFeature` field (for backward compatibility).
</script>

Options

Option	Type	Description
features	_ol.Collection_	The features the interaction works on. Required.
style	ol.style.Style | Array<ol.style.Style> | ol.style.StyleFunction | undefined	Style of the overlay with interaction helper features.
angle	number | undefined	Initial angle in radians (positive is counter-clockwise), applied for features already added to collection. Default is 0.
anchor	number[] | ol.Coordinate | undefined	Initial anchor coordinate. Default is center of features extent.
condition	module:ol/events/condition~Condition	A function that takes an module:ol/MapBrowserEvent~MapBrowserEvent and returns a boolean to indicate whether that event should be handled. Default is module:ol/events/condition~always

Methods

// Set current angle of interaction features.
RotateFeatureInteraction.prototype.setAngle(angle : number)

// Returns current angle of interaction features.
RotateFeatureInteraction.prototype.getAngle() : number

// Set current anchor position.
RotateFeatureInteraction.prototype.setAnchor(anchor? : number[] | ol.Coordinate)

// Returns current anchor position.
RotateFeatureInteraction.prototype.getAnchor() : number[] | ol.Coordinate | undefined 

Events

All events triggered by the interaction are instances of RotateFeatureEvent.

Members

• features ol.Collection The features being rotated.
• angle number Current angle in radians.
• anchor ol.Coordinate Current anchor position.

Event	Arguments	Description
rotatestart	RotateFeatureEvent	Triggered upon feature rotate start.
rotating	RotateFeatureEvent	Triggered upon feature rotating.
rotateend	RotateFeatureEvent	Triggered upon feature rotation end.

Example usage:

import { Map, View, Feature } from 'ol'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { OSM as OSMSource, Vector as VectorSource } from 'ol/source'
import { Point, LineString, Polygon } from 'ol/geom'
import { Select as SelectInteraction } from 'ol/interaction'
import RotateFeatureInteraction from 'ol-rotate-feature'

const point = new Feature({
  name: 'point',
  geometry: new Point([ 2384267.0573564973, 7557371.884852641 ])
})
const line = new Feature({
  name: 'line',
  geometry: new LineString([ [ -603697.2100018249, -239432.60826165066 ], [ 4190433.20404443, 2930563.8287811787 ] ])
})
const polygon = new Feature({
  name: 'polygon',
  geometry: new Polygon([ [
    [ -14482348.171434438, 6661491.741627443 ],
    [ -9541458.663080638, 6221214.458704827 ],
    [ -11473786.738129886, 3300708.4819848104 ],
    [ -14482348.171434438, 6661491.741627443 ]
  ] ])
})

const map = new Map({
  view: new View({
    center: [ 0, 0 ],
    zoom: 2
  }),
  layers: [
    new TileLayer({
      source: new OSMSource()
    }),
    new VectorLayer({
      source: new VectorSource({
        projection: 'EPSG:33857',
        features: [ point, line, polygon ]
      })
    })
  ],
  target: 'map',
  projection: 'EPSG:3857'
})

const select = new SelectInteraction()
select.getFeatures().extend([ point, line, polygon ])

const rotate = new RotateFeatureInteraction({
  features: select.getFeatures(),
  anchor: [ 0, 0 ],
  angle: -90 * Math.PI / 180
})

rotate.on('rotatestart', evt => console.log('rotate start', evt))
rotate.on('rotating', evt => console.log('rotating', evt))
rotate.on('rotateend', evt => console.log('rotate end', evt))

map.addInteraction(select)
map.addInteraction(rotate)

Example of usage in Browser environment in test/umd.html.

Getting total angle or last anchor coordinates after rotation:

rotate.on('rotateend', evt => {
    // get total angle in degrees
    console.log(evt.angle + ' is '+ (-1 * evt.angle * 180 / Math.PI ) + '°')
    // get last anchor coordinates
    console.log(evt.anchor)
})

License

MIT (c) 2016-2024, Vladimir Vershinin