antv-l7/docs/common/layer/layer_encode.md

221 lines
5.3 KiB
Markdown
Raw Normal View History

2020-11-16 15:19:41 +08:00
## 数据映射
### source 数据
数据源为 layer 设置数据 source(data,config)
- data {geojson|json|csv}
源数据
- config   可选   数据源配置项
- parser 数据解析,默认是解析层 geojson
- transforms [transformtransform ]  数据处理转换 可设置多个
parser 和  transforms [见 source 文档](../source/source)
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat',
},
transforms: [
{
type: 'map',
callback: function (item) {
const [x, y] = item.coordinates;
item.lat = item.lat * 1;
item.lng = item.lng * 1;
item.v = item.v * 1;
item.coordinates = [x * 1, y * 1];
return item;
},
},
{
type: 'hexagon',
size: 6000,
field: 'v',
method: 'sum',
},
],
});
```
### scale 度量
设置数据字段映射方法
- `field` 字段名。
- `scaleConfig` 列定义配置,对象类型,可配置的属性如下:
#### scale 类型
**连续型**
- linear 线性
- log
- pow 指数型
**连续分类型**
- quantile 等分位
- quantize 等间距
**枚举型**
- cat 枚举
```javascript
layer.scale('name', {
type: 'cat',
});
// 设置多个scale
// 字段名为 key, value 为scale配置项
layer.scale({
name: {
type: 'cat',
},
value: {
type: 'linear',
},
});
```
可视化编码是将数据转换为可视形式的过程L7 目前支持形状,大小,颜色 3 种视觉通道,你可以指定数据字段,为不同要素设置不同的图形属性。
### size 大小
将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
```javascript
pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [0, 10]); // 使用字段映射到大小,并指定最大值和最小值
pointLayer.size('type', (type) => {
// 回调函数
if (type === 'a') {
return 10;
}
return 5;
});
```
#### size(value常量
传入数字常量,如  `pointLayer.size(20)`
#### size(field)
根据 field 字段的值映射大小,使用默认的`最大值 max:10`  和`最小值 min: 1`。
#### size(field, callback) 回调函数
使用回调函数控制图形大小。
- `callback`: function 回调函数。
```javascript
pointLayer.size('age', (value) => {
if (value === 1) {
return 5;
}
return 10;
});
```
### color 颜色
将数据值映射到图形的颜色上的方法。
```javascript
layer.color('red'); // 常量颜色
layer.color('type'); // 对 type 字段进行映射,使用内置的颜色
layer.color('type', ['red', 'blue']); // 指定颜色
layer.color('type', (type) => {
// 通过回调函数
if (type === 'a') {
return 'red';
}
return 'blue';
});
layer.color('type*value', (type, value) => {
//多个参数,通过回调函数
if (type === 'a' && value > 100) {
return 'red';
}
return 'blue';
});
```
#### color(value) 常量
参数:`value` string
只支持接收一个参数value 可以是:
- 映射至颜色属性的数据源字段名,如果数据源中不存在这个字段名的话,则按照常量进行解析,这个时候会使用 L7 默认提供的颜色。
- 也可以直接指定某一个具体的颜色值 color如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
示例
```javascript
layer.color('name'); // 映射数据字段
layer.color('white'); // 指定颜色
```
#### color(field, colors) 字段映射
参数:
- `field`: stringfield 为映射至颜色属性的数据源字段名,也支持指定多个参数。
- `colors`: string | array | function
colors 的参数有以下情况:  如果为空,即未指定颜色的数组,那么使用内置的全局的颜色;如果需要指定颜色,则需要以数组格式传入,那么分类的颜色按照数组中的颜色确定。
```javascript
layer.color('name'); // 使用默认的颜色
layer.color('name', ['red', 'blue']); // 使用传入的指定颜色
```
- colors 如果是回调函数,则该回调函数的参数为对应字段的数值,具体使用如下,当 color 映射为多个字段时,参数按照字段声明的顺序传入:
```javascript
layer.color('gender', (value) => {
if (value === 1) {
return 'red';
}
return 'blue';
});
layer.color('gender*age', (gender, age) => {
if (age === 20 && gender == ' 男') {
return 'red';
}
return 'blue';
});
```
### shape 形状
将数据值映射到图形的形状上的方法。
**shape(shape)**
参数`shape` string
只支持接收一个参数,指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
| layer 类型 | shape 类型 | 备注 |
| ---------- | -------------------------------------------------------------------------------------- | ---- |
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
| line | line,arc, arc3d, greatcircle | |
| polygon | fill,line, extrude | |
**shape(field, shapes)**
**shape(field, callback)**