mirror of https://gitee.com/antv-l7/antv-l7
221 lines
5.3 KiB
Markdown
221 lines
5.3 KiB
Markdown
|
## 数据映射
|
|||
|
|
|||
|
### source 数据
|
|||
|
|
|||
|
数据源为 layer 设置数据 source(data,config)
|
|||
|
|
|||
|
- data {geojson|json|csv}
|
|||
|
源数据
|
|||
|
- config 可选 数据源配置项
|
|||
|
- parser 数据解析,默认是解析层 geojson
|
|||
|
- transforms [transform,transform ] 数据处理转换 可设置多个
|
|||
|
|
|||
|
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)**
|
|||
|
|