antv-l7/docs/api/component/control.zh.md

87 lines
1.1 KiB
Markdown
Raw Normal View History

2019-11-21 13:06:13 +08:00
---
title: Control
order: 3
---
地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺
2019-12-02 15:16:45 +08:00
L7 目前支持 Control
2019-11-21 13:06:13 +08:00
2019-12-02 15:16:45 +08:00
- Zoom 放大缩小
- Scale 比例尺
- Layers 图层列表
## 构造函数
2019-11-21 13:06:13 +08:00
#### option
2019-12-02 15:16:45 +08:00
position: `string` 控件位置支持是个方位
2019-11-21 13:06:13 +08:00
- bottomright
- topright
- bottomleft,
- topleft`
2019-11-21 13:06:13 +08:00
### 组件介绍
```
2019-12-26 19:52:52 +08:00
import { Scale, Layers, Zoom } from '@antv/l7';
2019-11-21 13:06:13 +08:00
```
#### Zoom
2019-12-26 19:52:52 +08:00
放大缩小组件 默认左上角
2019-11-21 13:06:13 +08:00
```javascript
2019-12-02 15:16:45 +08:00
const zoomControl = new Zoom({
position: 'topleft',
});
2019-12-02 15:16:45 +08:00
scene.addControl(zoomControl);
2019-11-21 13:06:13 +08:00
```
#### Scale
2019-12-02 15:16:45 +08:00
2019-12-26 19:52:52 +08:00
比例尺组件 默认左下角
2019-11-21 13:06:13 +08:00
```javascript
2019-12-26 19:52:52 +08:00
const scaleControl = new Scale({
position: 'bottomleft',
2019-12-02 15:16:45 +08:00
});
2019-11-21 13:06:13 +08:00
2019-12-26 19:52:52 +08:00
scene.addControl(scaleControl);
2019-11-21 13:06:13 +08:00
```
#### Layers
2019-12-02 15:16:45 +08:00
图层列表目前支持可视化的图层控制
2019-11-21 13:06:13 +08:00
```javascript
2019-12-02 15:16:45 +08:00
const overlayers = {
点图层: layer,
};
const layersControl = new Layers({
overlayers,
});
scene.addControl(layersControl);
2019-11-21 13:06:13 +08:00
```
## 方法
#### setPosition
2019-12-02 15:16:45 +08:00
2019-11-21 13:06:13 +08:00
设置组件位置
```javascript
control.setPosition('bottomright');
```
#### remove
2019-12-02 15:16:45 +08:00
2019-11-21 13:06:13 +08:00
移除地图组件
```javascript
control.remove();
```