vue3-openlayers

Appearance

ol-interaction-pointer ​

Component that handles user-defined functions on down, move, up and drag events.

Demo ​

Setup ​

Plugin usage ​

This component is part of the Interactions plugin. If not installed globally, you need to import and use the plugin in your main.ts or use the explicit component import (see section below).

Import and use the Interactions plugin
ts
import { createApp } from "vue";
import App from "./App.vue";

import {

  Map,
  Layers,
  Sources,
  Interactions,
} from "vue3-openlayers";

const app = createApp(App);
// ...
app.use(Interactions); 
// ...

Explicit import ​

If you don't want to install a plugin, you can import the component explicitly. It's available as a child of the named export Interactions.

NOTE

The following documentation refers to the plugin usage. Please make sure to adopt the component names, when you decided to use explicit component imports (e. g. <ol-map> becomes <Map.OlMap> etc.).

Usage ​

Plugin UsageExplicit Import
<ol-interaction-pointer><Interactions.OlInteractionPointer>
vue
<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height: 400px"
  >
    <ol-view
      ref="view"
      :center="center"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-interaction-pointer
      @down="log('⬇️ down', $event)"
      @up="log('⬆️ up', $event)"
      @move="log('🚗 move', $event)"
      @drag="log('🤚🏽 drag', $event)"
    />
  </ol-map>
</template>

<script setup lang="ts">
import type { MapBrowserEvent } from "ol";
import { ref } from "vue";

const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(8);

const log = (type: string, event: MapBrowserEvent<UIEvent>) => {
  console.log(type, event);
};
</script>

Properties ​

stopDown ​

Should the down event be propagated to other interactions, or should be stopped?

  • Type: ((arg0: boolean) => boolean) | undefined

Events ​

You have access to all Events from the underlying interaction. Check out the official OpenLayers docs to see the available events tht will be fired.

In addition, the events down, move, up, drag and event, are fired.

html
<ol-interaction-pointer
  @down="handleDownEvent"
  @move="handleMoveEvent"
  @up="handleUpEvent"
  @drag="handleDragEvent"
  @error="handleErrorEvent"
/>

Methods ​

You have access to all Methods from the underlying interaction. Check out the official OpenLayers docs to see the available methods.

To access the source, you can use a ref() as shown below:

vue
<template>
  <!-- ... -->
  <ol-interaction-pointer ref="pointerRef" @down="handleDownEvent" />
  <!-- ... -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type Pointer from "ol/interaction/Pointer";

const pointerRef = ref<{ pointer: Pointer } | null>(null);

onMounted(() => {
  const pointer: Pointer = pointerRef.value?.pointer;
  // call your method on `pointer`
});
</script>