Ol-rotate-feature NPM

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<ol.Feature>	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)
})