Swipe Control

The Swipe Control enables layer swiping functionality, allowing users to compare two map layers side by side.

Props

Prop	Type	Default	Description
leftLayers	Layer[]	[]	leftLayers
rightLayers	Layer[]	[]	rightLayers
position	number	0.5	position of splite line
orientation	'horizontal' | 'vertical'	'vertical'	orientation

Events

Event	Payload	Description
click	MouseEvent	Emitted when swipe mode is clicked
swipe-active-change	boolean	Emitted when swipe mode is active

Usage

SwipeControl.vue

<template>
  <ol-map class="map-container">
    <ol-view
      ref="view"
      :center="mapConfig.center"
      :zoom="mapConfig.zoom"
      :projection="mapConfig.projection"
    />

    <!-- 底图图层 -->
    <ol-tile-layer ref="osmLayer" title="OSM">
      <ol-source-osm />
    </ol-tile-layer>

    <!-- 天地图影像图层 -->
    <ol-tile-layer ref="tiandituImgLayer" title="天地图影像">
      <ol-source-tianditu
        layerType="img"
        projection="EPSG:4326"
        tk="dbed7e0f96194affd82763e159de4c50"
        :hidpi="true"
      />
    </ol-tile-layer>
    <!-- 天地图影像标注图层 -->
    <ol-tile-layer ref="tiandituImgLabelLayer" title="天地图影像">
      <ol-source-tianditu
        layerType="img"
        :isLabel="true"
        projection="EPSG:4326"
        tk="dbed7e0f96194affd82763e159de4c50"
        :hidpi="true"
      />
    </ol-tile-layer>

    <!-- 天地图矢量图层 -->
    <ol-tile-layer ref="tiandituVecLayer" title="天地图矢量">
      <ol-source-tianditu
        layerType="vec"
        projection="EPSG:4326"
        tk="dbed7e0f96194affd82763e159de4c50"
        :hidpi="true"
      />
    </ol-tile-layer>
    <!-- 天地图矢量标注图层 -->
    <ol-tile-layer ref="tiandituVecLabelLayer" title="天地图矢量">
      <ol-source-tianditu
        layerType="vec"
        :isLabel="true"
        projection="EPSG:4326"
        tk="dbed7e0f96194affd82763e159de4c50"
        :hidpi="true"
      />
    </ol-tile-layer>

    <OlStyledControlBar>
      <OlStyledZoomInControl />
      <OlStyledZoomOutControl />
      <OlStyledSwipeControl
        :left-layers="[
          tiandituImgLayer?.tileLayer,
          tiandituImgLabelLayer?.tileLayer
        ]"
        :right-layers="[
          tiandituVecLayer?.tileLayer,
          tiandituVecLabelLayer?.tileLayer
        ]"
      />
    </OlStyledControlBar>
  </ol-map>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { mapConfig } from '../config/config.ts'
// import BaseLayer from '../components/base-layer.vue'

// 图层引用
const tiandituImgLayer = ref<{ tileLayer: any } | null>(null)
const tiandituImgLabelLayer = ref<{ tileLayer: any } | null>(null)
const tiandituVecLayer = ref<{ tileLayer: any } | null>(null)
const tiandituVecLabelLayer = ref<{ tileLayer: any } | null>(null)
</script>

Slot

You can customize the control icon via the default slot:

<template>
  <ol-styled-swipe-control>
    <template #default>
      <i class="custom-swipe-icon"></i>
    </template>
  </ol-styled-swipe-control>
</template>

Internationalization

Configure locale and messages when installing the plugin to localize texts:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import OpenLayersControls from 'vue3-openlayers-styled-controls'

const app = createApp(App)

app.use(OpenLayersControls, {
  locale: 'en',
  messages: {
    en: {
      swipe: { title: 'Swipe' }
    }
  }
})

app.mount('#app')