1.2.3 • Published 8 years ago
ol3-rotate-feature v1.2.3
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);
});
License
MIT (c) 2016, Vladimir Vershinin