mirror of https://gitee.com/antv-l7/antv-l7
style: lint style
This commit is contained in:
shihui
parent
d51451b29c
commit
1bc0082516
|
|
@ -31,10 +31,11 @@ scene.addLayer(layer);
|
|||
```javascript
|
||||
const options = {
|
||||
name: 'xxx',
|
||||
zIndex: 1
|
||||
zIndex: 1,
|
||||
};
|
||||
const layer = new Layer(options);
|
||||
```
|
||||
|
||||
### name
|
||||
|
||||
<description> _string_ **optional** _default:_ 自动数字编号</description>
|
||||
|
|
@ -135,6 +136,7 @@ layer.source(data, {
|
|||
设置数据字段映射方法。
|
||||
|
||||
用户在使用 color、size 或者是 style 中的数据映射字段的时候，若是使用了指定了按比例映射，则都需要处理字段到值的映射关系。scale 方法就可以设置字段到值的映射是按哪一种类型进行映射。
|
||||
|
||||
```javascript
|
||||
.color('key', ['#f00', '#0f0', '#00f'])
|
||||
|
||||
|
|
@ -262,6 +264,7 @@ layer.color('type*value', (type, value) => {
|
|||
|
||||
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
|
||||
|
||||
|
||||
示例
|
||||
|
||||
```javascript
|
||||
|
|
@ -306,9 +309,9 @@ layer.color('gender*age', (gender, age) => {
|
|||
通常一种图层可以有多种表现形式，shape 方法用于指定图层具体的表现形式，以 PointLayer 的 shape 为例：
|
||||
|
||||
```javascript
|
||||
shape('circle') // 圆形
|
||||
shape('triangle') // 三角形
|
||||
shape('cylinder') // 圆柱
|
||||
shape('circle'); // 圆形
|
||||
shape('triangle'); // 三角形
|
||||
shape('cylinder'); // 圆柱
|
||||
```
|
||||
|
||||
**shape(shape)**
|
||||
|
|
@ -330,23 +333,23 @@ shape('cylinder') // 圆柱
|
|||
```javascript
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
);
|
||||
scene.addImage(
|
||||
'01',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
|
||||
);
|
||||
scene.addImage(
|
||||
'02',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
y: 'latitude',
|
||||
},
|
||||
})
|
||||
.shape('name', ['00', '01', '02'])
|
||||
.size(20);
|
||||
|
|
@ -400,7 +403,6 @@ const layer = new PointLayer()
|
|||
.color('#f00')
|
||||
.size('population'); // population 字段表示数据中的人口值
|
||||
scene.addLayer(layer);
|
||||
|
||||
```
|
||||
|
||||
而在一些特殊的业务场景下，我们可能需要将除了 size、color、以外的属性根据数据动态设置，如我们在绘制文本标注的时候需要根据文本的长短来设置偏移量，以保证文本位置的相对固定。在这种情况下，我们就需要使用图层样式数据纹理来完成这一项工作。
|
||||
|
|
@ -413,8 +415,8 @@ const pointLayer = new PointLayer({})
|
|||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
y: 'w',
|
||||
},
|
||||
})
|
||||
.shape('m', 'text')
|
||||
.size(12)
|
||||
|
|
@ -424,7 +426,7 @@ const pointLayer = new PointLayer({})
|
|||
textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -433,7 +435,7 @@ const pointLayer = new PointLayer({})
|
|||
从 L7 2.5 开始，各图层样式将逐步支持样式数据映射
|
||||
|
||||
| layer 类型/shape | 支持的样式字段 | 备注 |
|
||||
| ---------------------- | --------------------------------------------------- | --------------------------------- |
|
||||
| ---------------------- | ---------------------------------------------------- | --------------------------------- |
|
||||
| pointLayer/fill | opacity、strokeOpacity、strokeWidth、stroke、offsets | shape circle、triangle... |
|
||||
| pointLayer/image | opacity、offsets | offsets 经纬度偏移 |
|
||||
| pointLayer/normal | opacity、offsets | |
|
||||
|
|
@ -637,6 +639,7 @@ layer.setActive(id);
|
|||
参数： selectOption | boolean
|
||||
|
||||
selectOption
|
||||
|
||||
- color 填充颜色
|
||||
|
||||
```javascript
|
||||
|
|
@ -680,7 +683,7 @@ layer.getLegendItems('size');
|
|||
鼠标事件回调参数 target
|
||||
|
||||
```javascript
|
||||
layer.on(eventName, target => console.log(target));
|
||||
layer.on(eventName, (target) => console.log(target));
|
||||
```
|
||||
|
||||
- x: number 鼠标 在地图位置 x 坐标
|
||||
|
|
@ -694,25 +697,24 @@ layer.on(eventName, target => console.log(target));
|
|||
|
||||
点击事件
|
||||
|
||||
|
||||
```javascript
|
||||
layer.on('click', e => console.log(e));
|
||||
layer.on('click', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### mousemove
|
||||
|
||||
鼠标移动事件
|
||||
|
||||
```javascript
|
||||
layer.on('mousemove', e => console.log(e));
|
||||
layer.on('mousemove', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### mouseout
|
||||
|
||||
鼠标移除
|
||||
|
||||
|
||||
```javascript
|
||||
layer.on('mouseout', e => console.log(e));
|
||||
layer.on('mouseout', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### mouseup
|
||||
|
|
@ -720,16 +722,15 @@ layer.on('mouseout', e => console.log(e));
|
|||
鼠标抬起
|
||||
|
||||
```javascript
|
||||
layer.on('mouseup', e => console.log(e));
|
||||
layer.on('mouseup', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### mousedown
|
||||
|
||||
鼠标按下
|
||||
|
||||
|
||||
```javascript
|
||||
layer.on('mousedown', e => console.log(e));
|
||||
layer.on('mousedown', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### contextmenu
|
||||
|
|
@ -737,7 +738,7 @@ layer.on('mousedown', e => console.log(e));
|
|||
鼠标右键
|
||||
|
||||
```javascript
|
||||
layer.on('contextmenu', e => console.log(e));
|
||||
layer.on('contextmenu', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### unclick
|
||||
|
|
@ -745,7 +746,7 @@ layer.on('contextmenu', e => console.log(e));
|
|||
点击未拾取到元素
|
||||
|
||||
```javascript
|
||||
layer.on('unclick', e => console.log(e));
|
||||
layer.on('unclick', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### unmousemove
|
||||
|
|
@ -753,7 +754,7 @@ layer.on('unclick', e => console.log(e));
|
|||
鼠标移动未拾取到元素
|
||||
|
||||
```javascript
|
||||
layer.on('unmousemove', e => console.log(e));
|
||||
layer.on('unmousemove', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### unmouseup
|
||||
|
|
@ -761,7 +762,7 @@ layer.on('unmousemove', e => console.log(e));
|
|||
鼠标抬起未拾取到元素
|
||||
|
||||
```javascript
|
||||
layer.on('unmouseup', e => console.log(e));
|
||||
layer.on('unmouseup', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### unmousedown
|
||||
|
|
@ -769,16 +770,15 @@ layer.on('unmouseup', e => console.log(e));
|
|||
鼠标按下未拾取到元素
|
||||
|
||||
```javascript
|
||||
layer.on('unmousedown', e => console.log(e));
|
||||
layer.on('unmousedown', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### uncontextmenu
|
||||
|
||||
鼠标右键位拾取到元素
|
||||
|
||||
|
||||
```javascript
|
||||
layer.on('uncontextmenu', e => console.log(e));
|
||||
layer.on('uncontextmenu', (e) => console.log(e));
|
||||
```
|
||||
|
||||
### unpick
|
||||
|
|
@ -786,7 +786,7 @@ layer.on('uncontextmenu', e => console.log(e));
|
|||
所有鼠标事件未拾取到
|
||||
|
||||
```javascript
|
||||
layer.on('unpick', e => console.log(e));
|
||||
layer.on('unpick', (e) => console.log(e));
|
||||
```
|
||||
|
||||
使用示例
|
||||
|
|
@ -833,9 +833,8 @@ layer.on('inited', (option) => {});
|
|||
- target 当前 layer
|
||||
- type 事件类型
|
||||
|
||||
|
||||
```javascript
|
||||
layer.on('add', type => console.log(type));
|
||||
layer.on('add', (type) => console.log(type));
|
||||
```
|
||||
|
||||
### remove
|
||||
|
|
@ -848,7 +847,7 @@ layer.on('add', type => console.log(type));
|
|||
- type 事件类型
|
||||
|
||||
```javascript
|
||||
layer.on('remove', type => console.log(type));
|
||||
layer.on('remove', (type) => console.log(type));
|
||||
```
|
||||
|
||||
## 图层框选
|
||||
|
|
|
|||
Loading…
Reference in New Issue