mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'dev-map' of https://github.com/antvis/L7 into dev-map
This commit is contained in:
commit
7cb83dab53
|
@ -7,39 +7,47 @@ order: 3
|
||||||
地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺
|
地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺
|
||||||
|
|
||||||
|
|
||||||
## 构造函数
|
L7 目前支持Control
|
||||||
|
|
||||||
```javascript
|
- Zoom 放大缩小
|
||||||
const baseControl = new L7.Control.Base(option);
|
- Scale 比例尺
|
||||||
```
|
- Layers 图层列表
|
||||||
|
|
||||||
|
|
||||||
|
## 构造函数
|
||||||
|
|
||||||
|
|
||||||
#### option
|
#### option
|
||||||
position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
|
|
||||||
|
position: `string` 控件位置支持是个方位
|
||||||
|
|
||||||
|
- bottomright
|
||||||
|
- topright
|
||||||
|
- bottomleft,
|
||||||
|
- topleft`
|
||||||
|
|
||||||
|
|
||||||
#### scene 内置地图组件
|
|
||||||
zoom 地图放大缩小 默认添加<br />Scale 地图比例尺 默认添加<br />attribution 地图数据属性 默认添加<br />layer 图层列表
|
|
||||||
|
|
||||||
**scene配置项设置控件添加状态**
|
组件介绍
|
||||||
|
|
||||||
|
```
|
||||||
|
import { Scale Layers, Zoom } from '@antv/l7';
|
||||||
|
|
||||||
```javascript
|
|
||||||
scene = new L7.scene({
|
|
||||||
zoomControl: true,
|
|
||||||
scaleControl: true,
|
|
||||||
attributionControl: true
|
|
||||||
})
|
|
||||||
```
|
```
|
||||||
|
|
||||||
####
|
|
||||||
|
|
||||||
|
|
||||||
#### Zoom
|
#### Zoom
|
||||||
放大缩小组件 默认 左上角
|
放大缩小组件 默认 左上角
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
new L7.Control.Zoom({
|
const zoomControl = new Zoom({
|
||||||
position: 'topleft'
|
position: 'topleft'
|
||||||
}).addTo(scene);
|
})
|
||||||
|
|
||||||
|
scene.addControl(zoomControl);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
@ -47,50 +55,34 @@ scene = new L7.scene({
|
||||||
比例尺组件默认左下角
|
比例尺组件默认左下角
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
new L7.Control.Scale({
|
const zoomControl = new Zoom({
|
||||||
position: 'bottomleft'
|
position: 'topleft'
|
||||||
}).addTo(scene);
|
})
|
||||||
```
|
|
||||||
|
|
||||||
|
scene.addControl(zoomControl);
|
||||||
|
|
||||||
#### attribution
|
|
||||||
默认右下角
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
new L7.Control.Attribution({
|
|
||||||
position: 'bottomleft'
|
|
||||||
}).addTo(scene);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
#### layer
|
#### layer
|
||||||
图层列表目前只支持可视化overlayers 图层控制
|
图层列表目前支持可视化的图层控制
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var overlayers = {
|
|
||||||
"围栏填充": layer,
|
const overlayers = {
|
||||||
"围栏边界": layer2
|
"点图层": layer,
|
||||||
|
|
||||||
};
|
};
|
||||||
new L7.Control.Layers({
|
const layersControl = new Layers({
|
||||||
overlayers: overlayers
|
overlayers
|
||||||
}).addTo(scene);
|
});
|
||||||
|
scene.addControl(layersControl);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## 方法
|
## 方法
|
||||||
|
|
||||||
#### onAdd
|
|
||||||
组件添加到地图Scene时调用,自定义组件时需要实现此方法
|
|
||||||
|
|
||||||
|
|
||||||
#### addTo
|
|
||||||
添加到地图scene
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
control.addTo(scene);
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
#### setPosition
|
#### setPosition
|
||||||
设置组件位置
|
设置组件位置
|
||||||
|
|
||||||
|
@ -106,32 +98,3 @@ control.setPosition('bottomright');
|
||||||
control.remove();
|
control.remove();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 示例代码
|
|
||||||
|
|
||||||
|
|
||||||
#### 自定义图例控件
|
|
||||||
[源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html)
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var legend = new L7.Control.Base({
|
|
||||||
position: 'bottomright'
|
|
||||||
});
|
|
||||||
legend.onAdd = function() {
|
|
||||||
var el = document.createElement('div');
|
|
||||||
el.className = 'infolegend legend';
|
|
||||||
var grades = [0, 8, 15, 30, 65, 120];
|
|
||||||
for (var i = 0; i < grades.length; i++) {
|
|
||||||
el.innerHTML += '<i style="background:' + colors[i] + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
|
|
||||||
}
|
|
||||||
return el;
|
|
||||||
};
|
|
||||||
legend.addTo(scene);
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
##
|
|
||||||
|
|
||||||
## FAQ
|
|
||||||
|
|
||||||
|
|
|
@ -42,7 +42,9 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const zoomControl = new Zoom();
|
const zoomControl = new Zoom({
|
||||||
|
position: 'topright'
|
||||||
|
});
|
||||||
const scaleControl = new Scale({
|
const scaleControl = new Scale({
|
||||||
position: 'bottomright'
|
position: 'bottomright'
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { Container, injectable } from 'inversify';
|
import { Container, injectable } from 'inversify';
|
||||||
import { ILngLat, IMapService, IPoint } from '../map/IMapService';
|
import { ILngLat, IMapService, IPoint } from '../map/IMapService';
|
||||||
import { IPopup } from './IPopUpService';
|
import { IPopup } from './IPopupService';
|
||||||
export interface IMarkerScene {
|
export interface IMarkerScene {
|
||||||
getMapService(): IMapService<unknown>;
|
getMapService(): IMapService<unknown>;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
|
|
Loading…
Reference in New Issue