ol-profile-control

A profile control.

Usage

ProfileControlDemo.vue

<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height: 400px"
  >
    <ol-view ref="view" :center="center" :zoom="zoom" />

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

    <!-- vector data path -->
    <ol-vector-layer>
      <ol-source-vector
        url="https://raw.githubusercontent.com/Viglino/ol-ext/master/examples/data/2009-09-04_rando.gpx"
        :format="gpx"
        @featuresloadend="handleFeaturesloadend"
      >
        <ol-style>
          <ol-style-stroke color="red" :width="3"></ol-style-stroke>
        </ol-style>
      </ol-source-vector>
    </ol-vector-layer>

    <!-- Hover handling -->
    <ol-interaction-select
      @select="featureSelected"
      :condition="selectCondition"
      :hitTolerance="10"
    >
      <ol-style>
        <ol-style-stroke color="red" :width="3"></ol-style-stroke>
      </ol-style>
    </ol-interaction-select>

    <!-- point -->
    <ol-vector-layer>
      <ol-source-vector>
        <ol-feature>
          <ol-geom-point v-if="point" :coordinates="point"></ol-geom-point>
          <ol-style>
            <ol-style-circle :radius="3">
              <ol-style-fill color="green"></ol-style-fill>
              <ol-style-stroke color="green" :width="10"></ol-style-stroke>
            </ol-style-circle>
          </ol-style>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>

    <ol-profile-control
      @over="over"
      @out="out"
      ref="profileControl"
    ></ol-profile-control>
  </ol-map>
</template>

<script setup lang="ts">
import type { Feature } from "ol";
import type Profile from "ol-ext/control/Profile";
import type { Coordinate } from "ol/coordinate";
import type { Point } from "ol/geom";
import type { SelectEvent } from "ol/interaction/Select";
import type { VectorSourceEvent } from "ol/source/Vector";
import { ref, inject } from "vue";

const center = ref([650000, 5407500]);
const zoom = ref(13);
const profileFeature = ref(null);
const profileControl = ref<{ control: Profile } | null>(null);
const point = ref<Coordinate | null>(null);

const selectConditions = inject("ol-selectconditions");
const format = inject("ol-format");

const gpx = new format.GPX();
const selectCondition = selectConditions.pointerMove;

function handleFeaturesloadend(event: VectorSourceEvent) {
  profileFeature.value = event.target.getFeatures()[0];
  if (profileFeature.value) {
    profileControl.value?.control?.setGeometry(profileFeature.value);
  }
}

function featureSelected(event: SelectEvent) {
  const selected = event.selected[0] as Feature<Point>;
  if (selected) {
    const p = selected
      .getGeometry()
      ?.getClosestPoint(event.mapBrowserEvent.coordinate);
    if (p) {
      drawPoint("over", p);
    }
  }
}

function over(event: { type: "over" | "out"; coord: Coordinate }) {
  drawPoint("over", event.coord);
}

function out(event: { type: "over" | "out"; coord: Coordinate }) {
  drawPoint(event.type, event.coord);
}

function drawPoint(type: "over" | "out", coord: Coordinate) {
  const profile = profileControl.value?.control;
  if (!profile) return;
  if (coord) {
    point.value = coord;
    const position = profile.showAt(coord);
    profile.popup(`${position[2]} m`);
  } else {
    point.value = null;
    profile.showAt([]);
    profile.popup("");
  }
}
</script>

Properties

Props from OpenLayers

Properties are passed-trough from ol-ext directly. Their types and default values can be checked-out in the official OpenLayers docs: ol-ext/control/Profile. Only some properties deviate caused by reserved keywords from Vue / HTML. This deviating props are described in the section below.

Deviating Properties

None.

Events

You have access to all Events from the underlying ol-ext Profile Control API (without the event: prefix). Check out the official OpenLayers docs to see the available events tht will be fired.

For example:

<ol-profile-control @over="handleOver" @out="handleOut" />

Methods

You have access to all Methods from the underlying ol-ext Profile Control API. Check out the official OpenLayers docs to see the available methods.

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

<template>
  <!-- ... -->
  <ol-profile-control ref="profileControlRef" />
  <!-- ... -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type Profile from "ol-ext/controls/Profile";

const profileControlRef = ref<{ control: Profile }>(null);

onMounted(() => {
  const profile: Profile = profileControlRef.value?.control;
  // call your method on `profile`
});
</script>