ol-rotate-feature custom style

by Vladimir Vershinin

HTML

<link rel="stylesheet" href="https://unpkg.com/openlayers@latest/dist/ol.css">
<script src="https://unpkg.com/openlayers@latest/dist/ol.js"></script>
<script src="https://unpkg.com/ol-rotate-feature@latest/dist/bundle.min.js"></script>
<div id="map"></div>

CSS

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

JavaScript

// geometry stubs
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]
  ]])
})

// map initialization
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()
select.getFeatures().extend([point, line, polygon])

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

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

// custom style factory
function createStyle () {
  var white = [255, 255, 255, 0.8]
  var blue = [0, 153, 255, 0.8]
  var red = [209, 0, 26, 0.9]
  var width = 2

  // static styles
  var styles = {
  	// provide null to hide anchor
  	anchor: null,
    arrow: [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: white,
          width: width + 3,
        }),
        text: new ol.style.Text({
          font: '14px sans-serif',
          overflow: true,
          offsetX: 25,
          offsetY: -25,
         ...