Ol3-rotate-feature NPM

Rotate feature interaction for OpenLayers 3

Plugin adds interaction that allows to rotate vector features around some anchor.

Installation

Install it thought NPM:

npm install ol3-rotate-feature

Or download the latest version archive and add it with script tag:

<script src="ol3-rotate-feature/dist/bundle.min.js"></script>

Usage

Plugin is packed into UMD wrapper, import it with CommonJS or ES6:

import RotateFeatureInteraction from 'ol3-rotate-feature';
const RotateFeatureInteraction = require('ol3-rotate-feature');

In Browser environment it is available as ol.interaction.RotateFeature.

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.

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 ol from 'openlayers';
import * as ol3RotateFeature from 'ol3-rotate-feature';

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

const map = new ol.Map({
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    }),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({ layer: 'osm' })
        }),
        new ol.layer.Vector({
            source: new ol.source.Vector({
                projection: 'EPSG:33857',
                features: [point, line, polygon]
            })
        })
    ],
    target: 'map',
    projection: 'EPSG:3857'
});

const features = new ol.Collection();
const select = new ol.interaction.Select();
const rotate = new ol.interaction.RotateFeature({
    features: select.getFeatures()
});

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 index.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);
});