Swipe 卷帘
该控件用于分屏对比两个地图上叠加图层。
说明
图层可以添加到地图的左侧（顶部）或右侧（底部）。未添加到卷帘上的图层将显示在两侧。
使用
import { Scene, Swipe } from '@antv/l7';
const scene = new Scene({
// ...
});
scene.on('loaded', () => {
const swipe = new Swipe({
orientation: 'vertical',
ratio: 0.5,
layers: [],
rightLayers: [],
});
scene.addControl(swipe);
});配置
| 名称 | 说明 | 类型 |
|---|---|---|
| orientation | 卷帘方向设置，默认 ‘vertical’ | 'vertical'｜'horizontal' |
| ratio | 卷帘的位置，值域为 0 到 1, 默认正中间为 0.5 | number |
| layers | 卷帘左侧（竖向）或顶部（横向）的图层 | ILayer[] |
| rightLayers | 卷帘右侧（竖向）或底部（横向）的图层 | ILayer[] |
| className | 自定义样式名 | string |
| style | 自定义样式 | string |
方法
| 名称 | 说明 | 类型 |
|---|---|---|
| setOptions | 更新配置，参数需要参考对应组件的配置 | (newOption: Partial<Option>) => void |
| getOptions | 获取当前配置 | () => Option |
| show | 显示组件 | () => void |
| hide | 隐藏组件 | () => void |
| getContainer | 获取当前控件对应的 DOM 容器 |
() => HTMLElement |
| 名称 | 说明 | 类型 |
|---|---|---|
| addLayer | 添加要剪裁的图层 | (layer: ILayer ｜ ILayer[], addRight: boolean = false) => void |
| removeLayer | 移除剪裁的图层 | (layer: ILayer ｜ ILayer[]) => void |
| removeLayers | 清除所有图层 | () => void |
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| add | 组件被添加时的事件 | (this) => void |
| remove | 组件被移除时的事件 | (this) => void |
| show | 组件显示时的事件 | (this) => void |
| hide | 组件隐藏时的事件 | (this) => void |
| 名称 | 说明 | 类型 |
|---|---|---|
| moving | 卷帘移动事件 | (data: {size: number[], ratio: number[]}) => void |