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-28 10:36:15 +08:00
|
|
|
|
|
|
|
|
|
## 构造函数
|
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
|
|
|
|
|
2019-11-28 10:36:15 +08:00
|
|
|
|
- bottomright
|
|
|
|
|
- topright
|
|
|
|
|
- bottomleft,
|
|
|
|
|
- topleft`
|
2019-11-21 13:06:13 +08:00
|
|
|
|
|
2019-11-28 13:37:42 +08:00
|
|
|
|
### 组件介绍
|
2019-11-28 10:36:15 +08:00
|
|
|
|
|
|
|
|
|
```
|
2019-12-26 19:52:52 +08:00
|
|
|
|
import { Scale, Layers, Zoom } from '@antv/l7';
|
2019-11-28 10:36:15 +08:00
|
|
|
|
|
2019-11-21 13:06:13 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### Zoom
|
2019-11-28 13:37:42 +08:00
|
|
|
|
|
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-11-28 10:36:15 +08:00
|
|
|
|
|
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
|
|
|
|
```
|
|
|
|
|
|
2019-11-28 13:37:42 +08:00
|
|
|
|
#### Layers
|
2019-12-02 15:16:45 +08:00
|
|
|
|
|
2019-11-28 10:36:15 +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,
|
|
|
|
|
});
|
2019-11-28 10:36:15 +08:00
|
|
|
|
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();
|
|
|
|
|
```
|