Plugin adds interaction that allows rotating vector features around some anchor.
Install it with NPM (recommended):
# ES6 version for bundling with Webpack, Rollup or etc.
npm install ol ol-rotate-featureOr 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>| 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 |
// 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 All events triggered by the interaction are instances of RotateFeatureEvent.
- 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. |
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)
})MIT (c) 2016-2024, Vladimir Vershinin
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent