Skip to content

ol-rotate-control

A Rotate control for OpenLayers.

Usage

vue
<template>
  <button class="btn-default" type="button" @click="rotateRight">
    Rotate right
  </button>
  <ol-map style="height: 400px" :controls="[]">
    <ol-view ref="viewRef" :center="center" :zoom="zoom" :rotation="rotation" />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>
    <ol-rotate-control />
  </ol-map>
</template>

<script setup>
import { ref } from "vue";
const center = ref([14200000, 4130000]);
const zoom = ref(6);
const viewRef = ref(null);
const rotation = ref(Math.PI / 6);

function rotateRight() {
  viewRef.value?.adjustRotation(0.1);
}
</script>

Properties

className

  • Type: String
  • Default: ol-rotate

label

  • Type: String
  • Default:

tipLabel

  • Type: String
  • Default: Reset rotation

compassClassName

  • Type: String
  • Default: ol-compass

duration

  • Type: Number
  • Default: 250

autoHide

  • Type: Boolean
  • Default: false

render

  • Type: Function

resetNorth

  • Type: Function

target

  • Type: HTMLElement