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
|
```javascript
|
||||||
const options = {
|
const options = {
|
||||||
name: 'xxx',
|
name: 'xxx',
|
||||||
zIndex: 1
|
zIndex: 1,
|
||||||
};
|
};
|
||||||
const layer = new Layer(options);
|
const layer = new Layer(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
### name
|
### name
|
||||||
|
|
||||||
<description> _string_ **optional** _default:_ 自动数字编号</description>
|
<description> _string_ **optional** _default:_ 自动数字编号</description>
|
||||||
|
|
@ -83,10 +84,10 @@ layer 初始化完成之后，地图是否自动缩放到图层范围
|
||||||
|
|
||||||
图层元素混合效果
|
图层元素混合效果
|
||||||
|
|
||||||
- normal 正常效果 默认 发生遮挡的时候，只会显示前面的图层的颜色
|
- normal 正常效果 默认 发生遮挡的时候，只会显示前面的图层的颜色
|
||||||
- additive 叠加模式 发生遮挡的时候，显示前后图层颜色的叠加
|
- additive 叠加模式 发生遮挡的时候，显示前后图层颜色的叠加
|
||||||
- subtractive 相减模式 发生遮挡的时候，显示前后图层颜色的相减
|
- subtractive 相减模式 发生遮挡的时候，显示前后图层颜色的相减
|
||||||
- max 最大值 发生遮挡的时候，显示图层颜色 rgb 的最大值
|
- max 最大值 发生遮挡的时候，显示图层颜色 rgb 的最大值
|
||||||
|
|
||||||
# 方法
|
# 方法
|
||||||
|
|
||||||
|
|
@ -132,9 +133,10 @@ layer.source(data, {
|
||||||
|
|
||||||
### scale
|
### scale
|
||||||
|
|
||||||
设置数据字段映射方法。
|
设置数据字段映射方法。
|
||||||
|
|
||||||
用户在使用 color、size 或者是 style 中的数据映射字段的时候，若是使用了指定了按比例映射，则都需要处理字段到值的映射关系。scale 方法就可以设置字段到值的映射是按哪一种类型进行映射。
|
用户在使用 color、size 或者是 style 中的数据映射字段的时候，若是使用了指定了按比例映射，则都需要处理字段到值的映射关系。scale 方法就可以设置字段到值的映射是按哪一种类型进行映射。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
.color('key', ['#f00', '#0f0', '#00f'])
|
.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) 等。
|
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
|
||||||
|
|
||||||
|
|
||||||
示例
|
示例
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
@ -306,9 +309,9 @@ layer.color('gender*age', (gender, age) => {
|
||||||
通常一种图层可以有多种表现形式，shape 方法用于指定图层具体的表现形式，以 PointLayer 的 shape 为例：
|
通常一种图层可以有多种表现形式，shape 方法用于指定图层具体的表现形式，以 PointLayer 的 shape 为例：
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
shape('circle') // 圆形
|
shape('circle'); // 圆形
|
||||||
shape('triangle') // 三角形
|
shape('triangle'); // 三角形
|
||||||
shape('cylinder') // 圆柱
|
shape('cylinder'); // 圆柱
|
||||||
```
|
```
|
||||||
|
|
||||||
**shape(shape)**
|
**shape(shape)**
|
||||||
|
|
@ -330,25 +333,25 @@ shape('cylinder') // 圆柱
|
||||||
```javascript
|
```javascript
|
||||||
scene.addImage(
|
scene.addImage(
|
||||||
'00',
|
'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(
|
scene.addImage(
|
||||||
'01',
|
'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(
|
scene.addImage(
|
||||||
'02',
|
'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()
|
const imageLayer = new PointLayer()
|
||||||
.source(data, {
|
.source(data, {
|
||||||
parser: {
|
parser: {
|
||||||
type: 'json',
|
type: 'json',
|
||||||
x: 'longitude',
|
x: 'longitude',
|
||||||
y: 'latitude'
|
y: 'latitude',
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
.shape('name', [ '00', '01', '02' ])
|
.shape('name', ['00', '01', '02'])
|
||||||
.size(20);
|
.size(20);
|
||||||
scene.addLayer(imageLayer);
|
scene.addLayer(imageLayer);
|
||||||
```
|
```
|
||||||
|
|
@ -373,12 +376,12 @@ scene.addLayer(imageLayer);
|
||||||
|
|
||||||
### style
|
### style
|
||||||
|
|
||||||
style 方法通常用于描述图层具体的样式，大多数图层会支持一些比较通用的属性， 如 opacity 属性，同时每个图层也会有仅限本图层支持的属性，如只有
|
style 方法通常用于描述图层具体的样式，大多数图层会支持一些比较通用的属性， 如 opacity 属性，同时每个图层也会有仅限本图层支持的属性，如只有
|
||||||
CityBuildingLayer 支持的 windowColor 属性，每个图层具体要如何配置属性请查看每个图层的详细文档。
|
CityBuildingLayer 支持的 windowColor 属性，每个图层具体要如何配置属性请查看每个图层的详细文档。
|
||||||
|
|
||||||
- opacity 设置透明度 大部分图层都支持
|
- opacity 设置透明度 大部分图层都支持
|
||||||
|
|
||||||
- stroke 线填充颜色 仅点图层支持
|
- stroke 线填充颜色 仅点图层支持
|
||||||
|
|
||||||
- strokeWidth 线的宽度 仅点图层支持
|
- strokeWidth 线的宽度 仅点图层支持
|
||||||
|
|
||||||
|
|
@ -390,17 +393,16 @@ layer.style({
|
||||||
```
|
```
|
||||||
|
|
||||||
- 样式数据映射
|
- 样式数据映射
|
||||||
在大多数情况下，用户需要将 source 中传入的数据映射到图层的元素中，以此来达到需要的可视化的效果，比如想要用柱形图表示各地的人口数据，代码可能是这个样子的：
|
在大多数情况下，用户需要将 source 中传入的数据映射到图层的元素中，以此来达到需要的可视化的效果，比如想要用柱形图表示各地的人口数据，代码可能是这个样子的：
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const population = await getPopulation();
|
const population = await getPopulation();
|
||||||
const layer = new PointLayer()
|
const layer = new PointLayer()
|
||||||
.source(population)
|
.source(population)
|
||||||
.shape('cylinder')
|
.shape('cylinder')
|
||||||
.color('#f00')
|
.color('#f00')
|
||||||
.size('population'); // population 字段表示数据中的人口值
|
.size('population'); // population 字段表示数据中的人口值
|
||||||
scene.addLayer(layer);
|
scene.addLayer(layer);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
而在一些特殊的业务场景下，我们可能需要将除了 size、color、以外的属性根据数据动态设置，如我们在绘制文本标注的时候需要根据文本的长短来设置偏移量，以保证文本位置的相对固定。在这种情况下，我们就需要使用图层样式数据纹理来完成这一项工作。
|
而在一些特殊的业务场景下，我们可能需要将除了 size、color、以外的属性根据数据动态设置，如我们在绘制文本标注的时候需要根据文本的长短来设置偏移量，以保证文本位置的相对固定。在这种情况下，我们就需要使用图层样式数据纹理来完成这一项工作。
|
||||||
|
|
@ -413,38 +415,38 @@ const pointLayer = new PointLayer({})
|
||||||
parser: {
|
parser: {
|
||||||
type: 'json',
|
type: 'json',
|
||||||
x: 'j',
|
x: 'j',
|
||||||
y: 'w'
|
y: 'w',
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
.shape('m', 'text')
|
.shape('m', 'text')
|
||||||
.size(12)
|
.size(12)
|
||||||
.color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
|
.color('w', ['#0e0030', '#0e0030', '#0e0030'])
|
||||||
.style({
|
.style({
|
||||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||||
textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直]
|
textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直]
|
||||||
fontFamily,
|
fontFamily,
|
||||||
iconfont: true,
|
iconfont: true,
|
||||||
textAllowOverlap: true
|
textAllowOverlap: true,
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
[在线案例](../../examples/point/text#styleMap)
|
[在线案例](../../examples/point/text#styleMap)
|
||||||
|
|
||||||
从 L7 2.5 开始，各图层样式将逐步支持样式数据映射
|
从 L7 2.5 开始，各图层样式将逐步支持样式数据映射
|
||||||
|
|
||||||
| layer 类型/shape | 支持的样式字段 | 备注 |
|
| layer 类型/shape | 支持的样式字段 | 备注 |
|
||||||
| ---------------------- | --------------------------------------------------- | --------------------------------- |
|
| ---------------------- | ---------------------------------------------------- | --------------------------------- |
|
||||||
| pointLayer/fill | opacity、strokeOpacity、strokeWidth、stroke、offsets | shape circle、triangle... |
|
| pointLayer/fill | opacity、strokeOpacity、strokeWidth、stroke、offsets | shape circle、triangle... |
|
||||||
| pointLayer/image | opacity、offsets | offsets 经纬度偏移 |
|
| pointLayer/image | opacity、offsets | offsets 经纬度偏移 |
|
||||||
| pointLayer/normal | opacity、offsets | |
|
| pointLayer/normal | opacity、offsets | |
|
||||||
| pointLayer/text | opacity、strokeWidth、stroke、textOffset | textOffset 相对文字画布位置的偏移 |
|
| pointLayer/text | opacity、strokeWidth、stroke、textOffset | textOffset 相对文字画布位置的偏移 |
|
||||||
| pointLayer/extrude | opacity | |
|
| pointLayer/extrude | opacity | |
|
||||||
| polygonLayer/fill | opacity | |
|
| polygonLayer/fill | opacity | |
|
||||||
| polygonLayer/extrude | opacity | |
|
| polygonLayer/extrude | opacity | |
|
||||||
| lineLayer/line | opacity | |
|
| lineLayer/line | opacity | |
|
||||||
| lineLayer/arc | opacity、thetaOffset | thetaOffset 弧线的弯曲弧度 |
|
| lineLayer/arc | opacity、thetaOffset | thetaOffset 弧线的弯曲弧度 |
|
||||||
| lineLayer/arc3d | opacity | |
|
| lineLayer/arc3d | opacity | |
|
||||||
| lineLayer/great_circle | opacity | |
|
| lineLayer/great_circle | opacity | |
|
||||||
|
|
||||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*F_QoSr-W0BwAAAAAAAAAAAAAARQnAQ'>
|
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*F_QoSr-W0BwAAAAAAAAAAAAAARQnAQ'>
|
||||||
|
|
||||||
|
|
@ -637,6 +639,7 @@ layer.setActive(id);
|
||||||
参数： selectOption | boolean
|
参数： selectOption | boolean
|
||||||
|
|
||||||
selectOption
|
selectOption
|
||||||
|
|
||||||
- color 填充颜色
|
- color 填充颜色
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
@ -680,7 +683,7 @@ layer.getLegendItems('size');
|
||||||
鼠标事件回调参数 target
|
鼠标事件回调参数 target
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on(eventName, target => console.log(target));
|
layer.on(eventName, (target) => console.log(target));
|
||||||
```
|
```
|
||||||
|
|
||||||
- x: number 鼠标 在地图位置 x 坐标
|
- x: number 鼠标 在地图位置 x 坐标
|
||||||
|
|
@ -694,25 +697,24 @@ layer.on(eventName, target => console.log(target));
|
||||||
|
|
||||||
点击事件
|
点击事件
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('click', e => console.log(e));
|
layer.on('click', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### mousemove
|
### mousemove
|
||||||
|
|
||||||
鼠标移动事件
|
鼠标移动事件
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('mousemove', e => console.log(e));
|
layer.on('mousemove', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### mouseout
|
### mouseout
|
||||||
|
|
||||||
鼠标移除
|
鼠标移除
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('mouseout', e => console.log(e));
|
layer.on('mouseout', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### mouseup
|
### mouseup
|
||||||
|
|
@ -720,16 +722,15 @@ layer.on('mouseout', e => console.log(e));
|
||||||
鼠标抬起
|
鼠标抬起
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('mouseup', e => console.log(e));
|
layer.on('mouseup', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### mousedown
|
### mousedown
|
||||||
|
|
||||||
鼠标按下
|
鼠标按下
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('mousedown', e => console.log(e));
|
layer.on('mousedown', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### contextmenu
|
### contextmenu
|
||||||
|
|
@ -737,7 +738,7 @@ layer.on('mousedown', e => console.log(e));
|
||||||
鼠标右键
|
鼠标右键
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('contextmenu', e => console.log(e));
|
layer.on('contextmenu', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### unclick
|
### unclick
|
||||||
|
|
@ -745,7 +746,7 @@ layer.on('contextmenu', e => console.log(e));
|
||||||
点击未拾取到元素
|
点击未拾取到元素
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('unclick', e => console.log(e));
|
layer.on('unclick', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### unmousemove
|
### unmousemove
|
||||||
|
|
@ -753,7 +754,7 @@ layer.on('unclick', e => console.log(e));
|
||||||
鼠标移动未拾取到元素
|
鼠标移动未拾取到元素
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('unmousemove', e => console.log(e));
|
layer.on('unmousemove', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### unmouseup
|
### unmouseup
|
||||||
|
|
@ -761,7 +762,7 @@ layer.on('unmousemove', e => console.log(e));
|
||||||
鼠标抬起未拾取到元素
|
鼠标抬起未拾取到元素
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('unmouseup', e => console.log(e));
|
layer.on('unmouseup', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### unmousedown
|
### unmousedown
|
||||||
|
|
@ -769,16 +770,15 @@ layer.on('unmouseup', e => console.log(e));
|
||||||
鼠标按下未拾取到元素
|
鼠标按下未拾取到元素
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('unmousedown', e => console.log(e));
|
layer.on('unmousedown', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### uncontextmenu
|
### uncontextmenu
|
||||||
|
|
||||||
鼠标右键位拾取到元素
|
鼠标右键位拾取到元素
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('uncontextmenu', e => console.log(e));
|
layer.on('uncontextmenu', (e) => console.log(e));
|
||||||
```
|
```
|
||||||
|
|
||||||
### unpick
|
### unpick
|
||||||
|
|
@ -786,7 +786,7 @@ layer.on('uncontextmenu', e => console.log(e));
|
||||||
所有鼠标事件未拾取到
|
所有鼠标事件未拾取到
|
||||||
|
|
||||||
```javascript
|
```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
|
- target 当前 layer
|
||||||
- type 事件类型
|
- type 事件类型
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('add', type => console.log(type));
|
layer.on('add', (type) => console.log(type));
|
||||||
```
|
```
|
||||||
|
|
||||||
### remove
|
### remove
|
||||||
|
|
@ -848,7 +847,7 @@ layer.on('add', type => console.log(type));
|
||||||
- type 事件类型
|
- type 事件类型
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.on('remove', type => console.log(type));
|
layer.on('remove', (type) => console.log(type));
|
||||||
```
|
```
|
||||||
|
|
||||||
## 图层框选
|
## 图层框选
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue