控件

地图控件指的是悬停在地图四周，可以对地图以及图层等元素进行信息呈现或交互的组件。

使用

import { Scene, Zoom } from '@antv/l7';

const scene = new Scene({
  // ...
});

scene.on('loaded', () => {
  // 实例化 Zoom 控件，可以在构造器中传入控件的配置
  const zoom = new Zoom({
    position: 'leftbottom',
    className: 'my-test-class',
  });

  // 将实例化的控件添加至 L7 中
  scene.addControl(zoom);
});

更新配置

在控件实例化之后，如果需要更新配置，可以调用控件实例的 setOptions 方法，同时传入需要更新的配置对象即可。

const zoom = new Zoom({
  position: 'leftbottom',
});

const onPositionChange = () => {
  // 通过 setOptions 传入需要更新的配置对象
  zoom.setOptions({
    position: 'topright',
  });
};

插槽

当前 L7 中的控件支持插入到地图的左上、左下、右上、右下、上、左、下、右八个位置插槽或者用户自定义的 DOM 中，并且在同一地图插槽中，多个控件之间支持横向和纵向排列。

在初始化所有的控件类时，可以传入 position 参数来设置控件对应的插槽以及排列方式。

配置

Position

export type Position =
  | 'topleft' // ↖ 左上角，纵向排列
  | 'lefttop' // ↖ 左上角，横向排列
  | 'topright' // ↗ 右上角，纵向排列
  | 'righttop' // ↗ 右上角，横向排列
  | 'bottomleft' // ↙ 左下角，纵向排列
  | 'leftbottom' // ↙ 左下角，横向排列
  | 'bottomright' // ↘ 右下角，纵向排列
  | 'rightbottom' // ↘ 右下角，横向排列
  | 'topcenter' // ↑ 上方中央，横向排列
  | 'bottomcenter' // ↓ 下方中间，横向排列
  | 'leftcenter' // ← 左边中间，纵向排列
  | 'rightcenter' // → 右边中间，纵向排列
  | Element; // 传入 DOM 作为当前控件的容器

方法

事件