vue3-openlayers

Appearance

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>
<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