Control

The map control refers to hovering around the map, and you can perform operations on the map, layers and other elements.information presentationorinteractions component.

use

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

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

scene.on('loaded', () => {
  //Instantiate the Zoom control, you can pass in the control configuration in the constructor
  const zoom = new Zoom({
    position: 'leftbottom',
    className: 'my-test-class',
  });

  //Add the instantiated control to L7
  scene.addControl(zoom);
});

Update configuration

After the control is instantiated, if you need to update the configuration, you can call the control instance’ssetOptionsmethod, and pass in the configuration object that needs to be updated.

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

const onPositionChange = () => {
  // Pass in the configuration object that needs to be updated through setOptions
  zoom.setOptions({
    position: 'topright',
  });
};

slot

Currently the controls in L7 support inserting into the mapUpper left, lower left, upper right, lower right, upper, left, lower, rightEight position slots or user-definedDOM, and support between multiple controls in the same map slotHorizontalandportraitarrangement.

When initializing all control classes, you can pass inpositionParameters to set the corresponding slot and arrangement of the control.

Configuration

Position

export type Position =
  | 'topleft' // ↖ upper left corner, vertical arrangement
  | 'lefttop' // ↖ Upper left corner, arranged horizontally
  | 'topright' // ↗ Upper right corner, vertical arrangement
  | 'righttop' // ↗ Upper right corner, arranged horizontally
  | 'bottomleft' // ↙ lower left corner, arranged vertically
  | 'leftbottom' // ↙ lower left corner, arranged horizontally
  | 'bottomright' // ↘ Lower right corner, arranged vertically
  | 'rightbottom' // ↘ Lower right corner, arranged horizontally
  | 'topcenter' // ↑ top center, arranged horizontally
  | 'bottomcenter' // ↓ bottom center, arranged horizontally
  | 'leftcenter' // ← left center, arranged vertically
  | 'rightcenter' // → middle right, arranged vertically
  | Element; // Pass in DOM as the container of the current control

method

event