mirror of https://gitee.com/antv-l7/antv-l7
fix: source data join 功能&文档
This commit is contained in:
parent
d384494cc9
commit
6008d30416
|
@ -128,7 +128,60 @@ layer.source(data, {
|
|||
|
||||
生成六边形网格布局,根据数据字段统计
|
||||
|
||||
- type: 'hexagon',
|
||||
- type: hexagon,
|
||||
- size: 网格半径
|
||||
- field: 数据统计字段
|
||||
- method: 聚合方法 count,max,min,sum,mean 5 个统计维度
|
||||
|
||||
#### join
|
||||
数据连接,业务中跟多情况是地理数据和业务数据分开的两套数据,我们可与通过join 方法将地理数据和业务数据进行关联。
|
||||
|
||||
**配置项**
|
||||
|
||||
- type: join
|
||||
- sourceField 需要连接的业务数据字段名称
|
||||
- data 需要连接的数据源 仅支持json 格式
|
||||
- targetField 关联的地理数据字段名称
|
||||
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"city":'北京'
|
||||
},
|
||||
"geometry": {
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
const data2 = [
|
||||
{
|
||||
name:'北京',
|
||||
value: 13
|
||||
},
|
||||
{
|
||||
name:'天津',
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
// data 是地理数据
|
||||
// data2 属性数据或者业务数据
|
||||
|
||||
// 通过join方法我们就可以将两个数据连接到一起
|
||||
|
||||
layer.source(data,{
|
||||
transforms:[
|
||||
type: 'join'
|
||||
sourceField: 'name' //data1 对应字段名
|
||||
targetField: 'city' // data 对应字段名
|
||||
data: data2,
|
||||
]
|
||||
})
|
||||
.color('value') // 可以采用data1的value字段进行数据到颜色的映射
|
||||
```
|
||||
|
|
|
@ -134,3 +134,57 @@ layer.source(data, {
|
|||
- size: 网格半径
|
||||
- field: 数据统计字段
|
||||
- method:聚合方法 count,max,min,sum,mean 5 个统计维度
|
||||
|
||||
#### join
|
||||
数据连接,业务中跟多情况是地理数据和业务数据分开的两套数据,我们可与通过join 方法将地理数据和业务数据进行关联。
|
||||
|
||||
**配置项**
|
||||
|
||||
- type: join
|
||||
- sourceField 需要连接的业务数据字段名称
|
||||
- data 需要连接的数据源 仅支持json 格式
|
||||
- targetField 关联的地理数据字段名称
|
||||
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"city":'北京'
|
||||
},
|
||||
"geometry": {
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
const data2 = [
|
||||
{
|
||||
name:'北京',
|
||||
value: 13
|
||||
},
|
||||
{
|
||||
name:'天津',
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
// data 是地理数据
|
||||
// data2 属性数据或者业务数据
|
||||
|
||||
// 通过join方法我们就可以将两个数据连接到一起
|
||||
|
||||
layer.source(data,{
|
||||
transforms:[
|
||||
type: 'join'
|
||||
sourceField: 'name' //data1 对应字段名
|
||||
targetField: 'city' // data 对应字段名
|
||||
data: data2,
|
||||
]
|
||||
})
|
||||
.color('value') // 可以采用data1的value字段进行数据到颜色的映射
|
||||
```
|
||||
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
import { IParseDataItem, IParserData } from '@antv/l7-core';
|
||||
|
||||
interface IJoinOption {
|
||||
field: 'string';
|
||||
sourceField: string;
|
||||
targetField: string;
|
||||
data: any[];
|
||||
}
|
||||
|
||||
|
@ -10,14 +11,14 @@ interface IJoinOption {
|
|||
* @param data
|
||||
* @param options
|
||||
*/
|
||||
export function join(geoData: IParserData, options: { [key: string]: any }) {
|
||||
const { field, data } = options;
|
||||
export function join(geoData: IParserData, options: IJoinOption) {
|
||||
const { sourceField, targetField, data } = options;
|
||||
const dataObj: { [key: string]: any } = {};
|
||||
data.forEach((element: { [key: string]: any }) => {
|
||||
dataObj[element[field]] = element;
|
||||
dataObj[element[sourceField]] = element;
|
||||
});
|
||||
geoData.dataArray = data.dataArray.map((item: IParseDataItem) => {
|
||||
const joinName = item[field];
|
||||
geoData.dataArray = geoData.dataArray.map((item: IParseDataItem) => {
|
||||
const joinName = item[targetField];
|
||||
return {
|
||||
...dataObj[joinName],
|
||||
...item,
|
||||
|
|
Loading…
Reference in New Issue