卷帘组件 (OlStyledSwipeControl)

卷帘组件提供了一种直观的方式来比较两个不同的图层或地图视图。用户可以通过拖拽分隔线来动态调整两个图层的显示比例。

属性 (Props)

属性名	类型	默认值	说明
leftLayers	Layer[]	[]	左侧显示的图层列表
rightLayers	Layer[]	[]	右侧显示的图层列表
position	number	0.5	分隔线的初始位置（0-1之间）
orientation	'horizontal' | 'vertical'	'vertical'	卷帘方向

事件 (Events)

事件名	参数	说明
click	MouseEvent	控件被点击时触发
swipe-active-change	boolean	卷帘控件激活状态改变时触发

插槽（Slot）

卷帘组件支持默认插槽，可用于自定义控件图标：

<ol-styled-swipe-control
  :left-layers="[layer1]"
  :right-layers="[layer2]"
>
  <template #default>
    <i class="custom-swipe-icon"></i>
  </template>
</ol-styled-swipe-control>

国际化

卷帘控件支持国际化，通过在安装插件时配置 locale 和 messages：

// 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')

使用 (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>

水平卷帘

<ol-styled-swipe-control
  :left-layers="[layer1]"
  :right-layers="[layer2]"
  orientation="horizontal"
  :position="0.3"
/>

垂直卷帘（默认）

<ol-styled-swipe-control
  :left-layers="[layer1]"
  :right-layers="[layer2]"
  orientation="vertical"
  :position="0.7"
/>

注意事项

1. 卷帘组件需要配合 ol-styled-control-bar 使用
2. 需要确保传入的图层已经正确加载
3. 卷帘控件激活时会自动关闭其他测量控件
4. 卷帘控件在同一时间只能有一个实例处于激活状态