diff --git a/docs/api/source/source.en.md b/docs/api/source/source.en.md index 539b9ff61f..e7605b22f2 100644 --- a/docs/api/source/source.en.md +++ b/docs/api/source/source.en.md @@ -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字段进行数据到颜色的映射 +``` diff --git a/docs/api/source/source.zh.md b/docs/api/source/source.zh.md index bb4df7f2ce..0c9e44eadb 100644 --- a/docs/api/source/source.zh.md +++ b/docs/api/source/source.zh.md @@ -134,3 +134,56 @@ 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字段进行数据到颜色的映射 +``` diff --git a/packages/source/src/transform/join.ts b/packages/source/src/transform/join.ts index f5846a1156..0e84ffbd06 100644 --- a/packages/source/src/transform/join.ts +++ b/packages/source/src/transform/join.ts @@ -1,7 +1,8 @@ import { IParseDataItem, IParserData } from '@antv/l7-core'; interface IJoinOption { - field: 'string'; + sourceField: string; + targetField: string; data: any[]; } @@ -10,19 +11,19 @@ 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, }; }); - return data; + return geoData; }