Feature rotating

by Vladimir Vershinin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/9.1.0/dist/ol.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/9.1.0/ol.css">
<script src="https://unpkg.com/ol-rotate-feature@latest/dist/ol-rotate-feature.umd.min.js"></script>
<div id="map" class="map"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

JavaScript

console.log(ol); 
var point = new ol.Feature({
   name: 'point',
   geometry: new ol.geom.Point([2384267.0573564973, 7557371.884852641])
 })
 var line = new ol.Feature({
   name: 'line',
   geometry: new ol.geom.LineString([
     [-603697.2100018249, -239432.60826165066],
     [4190433.20404443, 2930563.8287811787]
   ])
 })
 var 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]
     ]
   ])
 })

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

 var select = new ol.interaction.Select()

 var rotate = new RotateFeatureInteraction({
   features: select.getFeatures(),
   angle: -1.5708,
   style: createStyle()
 })
 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))

var translate = new ol.interaction.Translate({
 	features: select.getFeatures(),
 })
translate.on('translatestart', evt => {
	console.log('translate start', evt)
	// rotate.active = false
})
translate.on('translating', evt => {
	console.log('translating', evt)
  rotate.anchor = getFeaturesCentroid(evt.features)
})
translate.on('translateend', evt => {
	console.log('translate end', evt)
  rotate.anchor = getFeaturesCentroid(evt.features)
	// rotate.active = true
})

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

 // custom style factory
 function createStyle() {
   var...