p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: add josn api

This commit is contained in:
thinkinggis 2019-12-07 19:56:26 +08:00
parent 88bbc1fc65
commit 127d7ce294
11 changed files with 645 additions and 25134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.storybook/addons.ts
View File

@ -1,3 +1,3 @@
// import '@storybook/addon-actions/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-storysource/register';

2
.storybook/config.ts
View File

@ -1,6 +1,6 @@
// tslint:disable-next-line:no-submodule-imports
import '!style-loader!css-loader!sass-loader!./iframe.scss';
// import '@storybook/addon-console';
import '@storybook/addon-console';
import { addParameters, configure } from '@storybook/react';
import { create } from '@storybook/theming';

2
docs/api/source/geojson.en.md
View File

@ -1,5 +1,5 @@
---
title: geojson
title: GeoJSON
order: 1
---

2
docs/api/source/geojson.zh.md
View File

@ -1,5 +1,5 @@
---
title: geojson
title: GeoJSON
order: 1
---

285
docs/api/source/json.en.md Normal file
View File

@ -0,0 +1,285 @@
---
title: JSON
order: 1
---
GeoJSON 虽然是通用的的地理数据格式，在具体使用场景中，数据服务人员可能并不熟悉GeoJON,或者没有生成GeoJON的工具，因此L7 对数据定义了Parser的概念，你的数据可以是任何格式，使用指定数据对应的地理信息字段即可。
## JSON
⚠️ json 不是标准的地理数据结构，因此在使用时务必要设置Parser
json 数据解析使用对应JSON parser
## parser
支持两种解析方式
### 简易解析方式
该方式只支持解析的点数据，或者只有两个点的线段，或者弧线数据
- type ```string``` 必选 `json`
- x ```string``` 点数据表示 经度
- y ```string``` 点数据表示 纬度
- x1 ```string``` 经度
- x2 ```string``` 纬度
如果数据是点数据，只需要设置x,y字段即可
如果是线段，弧线数据，需要知道起始点坐标既，x,y,x1,y1
```javascript
layer.source(data,{
parser:{
type: 'json',
x:'lng',
y:'lat',
}
})
```
### 通用解析方式
可也解析任意复杂的点，线面
- type ```string``` 必选 `json`
- coordinates ```array``` 必选，主要用于表达比较复杂的格式，等同于 geojson coordinates 属性
```javascript
layer.source(data,{
parser:{
type: 'json',
coordinates:'coord',
}
})
```
## 使用示例
### 点数据
#### 简易解析
- type json
- x: 经度字段
- y: 纬度字段
```javascript
const data = [
{
lng: 112.345,
lat: 30.455,
value: 10,
},
{
lng: 114.345,
lat: 31.455,
value: 10,
},
];
layer.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
});
```
#### 通用解析
[ 点 coodinates数据格式](./geojson##point)
```javascript
const data = [
{
coord: [112.345, 30.455],
value: 10,
},
{
coord: [114.345, 32.455],
value: 10,
},
];
layer.source(data, {
parser: {
type: 'json',
coordinates:'coord'
},
});
```
### 线数据
#### 简易解析
- type: json
- x ```string``` 经度
- y ```string``` 纬度
- x1 ```string``` 经度
- x2 ```string``` 纬度
简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标
```javascript
const data = [{
lng1:112.345,
lat1:30.455,
  lng2:112.345,
lat2:30.455,
value: 10
},
{
 lng1:114.345,
lat1:31.455,
  lng2:112.345,
lat2:30.455,
value: 10
 }
];
layer.source(
data,
{
parser:{
type:'json',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
}
})
```
#### 通用解析
绘制线段、弧线也支持使用coordinates组织数据
coordinates 包含两个坐标，
第一个坐标 对应 x, y
第二个坐标 对应 x1, y1
``` javascript
const data = [
{
"id": "1",
"coord": [
[
101.953125,
50.51342652633956
],
[
119.17968749999999,
33.137551192346145
]
]
}
layer.source(
data,
{
parser:{
type:'json',
coordinates: "coord",
}
}
})
```
如果需要使用绘制轨迹数据，需要通过coodinates指定线的点序列。
coordinate 格式geojson的 coordinate 字段 支持LineString, MultiLineString
[ 线 coodinates数据格式](./geojson#linesring)
```javascript
const data = {
"name": "path1",
"path": [
[
58.00781249999999,
32.84267363195431
],
[
85.78125,
25.16517336866393
],
[
101.953125,
41.77131167976407
],
[
114.9609375,
39.639537564366684
],
[
117.42187500000001,
28.613459424004414
]
]
}
```
使用时通过coordinates指定
```javascript
layer.source(
data,
{
parser:{
type:'json',
coordinates:'path'
}
}
})
```
### 面数据
面数据coordinates字段比较复杂不支持简易的解析方式
#### 通用解析
需要指定 coordinates 字段, 格式同GeoJSON的coordinates字段
[面 coodinates数据格式](./geojson/#polygon)
**注意面数据 coord  是三层数据结构**
```javascript
[
{
type: 'Polygon',
geometryCoord: [
[
[115.1806640625, 30.637912028341123],
[114.9609375, 29.152161283318915],
[117.79541015625001, 27.430289738862594],
[118.740234375, 29.420460341013133],
[117.46582031249999, 31.50362930577303],
[115.1806640625, 30.637912028341123],
],
],
},
];
layer.source(data, {
parser: {
type: 'json',
coordinates: 'geometryCoord',
},
});
```

285
docs/api/source/json.zh.md Normal file
View File

@ -0,0 +1,285 @@
---
title: JSON
order: 1
---
GeoJSON 虽然是通用的的地理数据格式，在具体使用场景中，数据服务人员可能并不熟悉GeoJON,或者没有生成GeoJON的工具，因此L7 对数据定义了Parser的概念，你的数据可以是任何格式，使用指定数据对应的地理信息字段即可。
## JSON
⚠️ json 不是标准的地理数据结构，因此在使用时务必要设置Parser
json 数据解析使用对应JSON parser
## parser
支持两种解析方式
### 简易解析方式
该方式只支持解析的点数据，或者只有两个点的线段，或者弧线数据
- type ```string``` 必选 `json`
- x ```string``` 点数据表示 经度
- y ```string``` 点数据表示 纬度
- x1 ```string``` 经度
- x2 ```string``` 纬度
如果数据是点数据，只需要设置x,y字段即可
如果是线段，弧线数据，需要知道起始点坐标既，x,y,x1,y1
```javascript
layer.source(data,{
parser:{
type: 'json',
x:'lng',
y:'lat',
}
})
```
### 通用解析方式
可也解析任意复杂的点，线面
- type ```string``` 必选 `json`
- coordinates ```array``` 必选，主要用于表达比较复杂的格式，等同于 geojson coordinates 属性
```javascript
layer.source(data,{
parser:{
type: 'json',
coordinates:'coord',
}
})
```
## 使用示例
### 点数据
#### 简易解析
- type json
- x: 经度字段
- y: 纬度字段
```javascript
const data = [
{
lng: 112.345,
lat: 30.455,
value: 10,
},
{
lng: 114.345,
lat: 31.455,
value: 10,
},
];
layer.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
});
```
#### 通用解析
[ 点 coodinates数据格式](./geojson##point)
```javascript
const data = [
{
coord: [112.345, 30.455],
value: 10,
},
{
coord: [114.345, 32.455],
value: 10,
},
];
layer.source(data, {
parser: {
type: 'json',
coordinates:'coord'
},
});
```
### 线数据
#### 简易解析
- type: json
- x ```string``` 经度
- y ```string``` 纬度
- x1 ```string``` 经度
- x2 ```string``` 纬度
简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标
```javascript
const data = [{
lng1:112.345,
lat1:30.455,
  lng2:112.345,
lat2:30.455,
value: 10
},
{
 lng1:114.345,
lat1:31.455,
  lng2:112.345,
lat2:30.455,
value: 10
 }
];
layer.source(
data,
{
parser:{
type:'json',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
}
})
```
#### 通用解析
绘制线段、弧线也支持使用coordinates组织数据
coordinates 包含两个坐标，
第一个坐标 对应 x, y
第二个坐标 对应 x1, y1
``` javascript
const data = [
{
"id": "1",
"coord": [
[
101.953125,
50.51342652633956
],
[
119.17968749999999,
33.137551192346145
]
]
}
layer.source(
data,
{
parser:{
type:'json',
coordinates: "coord",
}
}
})
```
如果需要使用绘制轨迹数据，需要通过coodinates指定线的点序列。
coordinate 格式geojson的 coordinate 字段 支持LineString, MultiLineString
[ 线 coodinates数据格式](./geojson#linesring)
```javascript
const data = {
"name": "path1",
"path": [
[
58.00781249999999,
32.84267363195431
],
[
85.78125,
25.16517336866393
],
[
101.953125,
41.77131167976407
],
[
114.9609375,
39.639537564366684
],
[
117.42187500000001,
28.613459424004414
]
]
}
```
使用时通过coordinates指定
```javascript
layer.source(
data,
{
parser:{
type:'json',
coordinates:'path'
}
}
})
```
### 面数据
面数据coordinates字段比较复杂不支持简易的解析方式
#### 通用解析
需要指定 coordinates 字段, 格式同GeoJSON的coordinates字段
[面 coodinates数据格式](./geojson/#polygon)
**注意面数据 coord  是三层数据结构**
```javascript
[
{
type: 'Polygon',
geometryCoord: [
[
[115.1806640625, 30.637912028341123],
[114.9609375, 29.152161283318915],
[117.79541015625001, 27.430289738862594],
[118.740234375, 29.420460341013133],
[117.46582031249999, 31.50362930577303],
[115.1806640625, 30.637912028341123],
],
],
},
];
layer.source(data, {
parser: {
type: 'json',
coordinates: 'geometryCoord',
},
});
```

190
docs/api/source/source.en.md
View File

@ -3,142 +3,46 @@ title: Source
order: 0
---
### 概述
## 概述
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
**parser:**
### parser
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。
**transform**
数据转换，数据统计，网格布局，数据聚合等数据操作。
## API
### parser
空间数据分矢量数据和栅格数据两大类
- 矢量数据 支持 csv，geojson，json 三种数据类型
- 栅格数据 支持 image，Raster
### transform
数据转换，数据统计，网格布局，数据聚合等数据操作。
## API
### parser
**配置项**
- type: ```csv|json|geojson|image|raster```
- 其他可选配置项，具体和数据格式相关
#### geojson
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
不需要设置 parser 参数
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以 不设置 parser 参数
```javascript
layer.source(data);
```
#### json
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
**点数据**
x: 经度字段
y: 纬度字段
```javascript
const data = [
{
lng: 112.345,
lat: 30.455,
value: 10,
},
{
lng: 114.345,
lat: 31.455,
value: 10,
},
];
layer.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
});
```
**线段数据**
type: json
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
x:经度字段 起点经度
y:纬度字段 起点纬度
x1:经度字段 终点经度
y1:纬度字段 终点纬度
```javascript
const data = [{
lng1:112.345,
lat1:30.455,
  lng2:112.345,
lat2:30.455,
value: 10
},{
 lng1:114.345,
lat1:31.455,
  lng2:112.345,
lat2:30.455,
value: 10
 }
];
layer.source(
data,
{
parser:{
type:'json',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
}
})
```
**面数据**
需要指定 coordinates 字段, coordinates 据格式
**注意面数据 coord  是三层数据结构**
```javascript
[
{
type: 'Polygon',
geometryCoord: [
[
[115.1806640625, 30.637912028341123],
[114.9609375, 29.152161283318915],
[117.79541015625001, 27.430289738862594],
[118.740234375, 29.420460341013133],
[117.46582031249999, 31.50362930577303],
[115.1806640625, 30.637912028341123],
],
],
},
];
layer.source(data, {
parser: {
type: 'json',
coordinates: 'geometryCoord',
},
});
```
#### JSON
[JSON 数据格式解析](../json)
#### csv
@ -156,7 +60,7 @@ layer.source(data, {
});
```
**栅格数据类型\*\***
**栅格数据类型 **
#### image
@ -215,20 +119,21 @@ source(values, {
- callback:function 回调函数
```javascript
layer.source(data, {
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;
}
layer.source(data, {
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;
},
},
],
});
```
#### grid
@ -241,16 +146,16 @@ source(values, {
- method:聚合方法   count,max,min,sum,mean5 个统计维度
```javascript
layer.source(data, {
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
]
}
layer.source(data, {
transforms: [
{
type: 'grid',
size: 15000,
field: 'v',
method: 'sum',
},
],
});
```
#### hexagon
@ -262,6 +167,3 @@ source(values, {
- field: 数据统计字段
- method:聚合方法   count,max,min,sum,mean5 个统计维度
```
```

145
docs/api/source/source.zh.md
View File

@ -3,143 +3,45 @@ title: Source
order: 0
---
### 概述
## 概述
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
**parser:**
### parser
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。
**transform:**
数据转换，数据统计，网格布局，数据聚合等数据操作。
## API
### parser
空间数据分矢量数据和栅格数据两大类
- 矢量数据 支持 csv，geojson，json 三种数据类型
- 栅格数据 支持 image，Raster
### transform
数据转换，数据统计，网格布局，数据聚合等数据操作。
## API
### parser
**配置项**
- type: ```csv|json|geojson|image|raster```
- 其他可选配置项，具体和数据格式相关
#### geojson
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
不需要设置 parser 参数
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以 不设置 parser 参数
```javascript
layer.source(data);
```
#### json
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
**点数据**
x: 经度字段
y: 纬度字段
```javascript
const data = [
{
lng: 112.345,
lat: 30.455,
value: 10,
},
{
lng: 114.345,
lat: 31.455,
value: 10,
},
];
layer.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
});
```
**线段数据**
type: json
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
x:经度字段 起点经度
y:纬度字段 起点纬度
x1:经度字段 终点经度
y1:纬度字段 终点纬度
```javascript
const data = [{
lng1:112.345,
lat1:30.455,
  lng2:112.345,
lat2:30.455,
value: 10
},
{
 lng1:114.345,
lat1:31.455,
  lng2:112.345,
lat2:30.455,
value: 10
 }
];
layer.source(
data,
{
parser:{
type:'json',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
}
})
```
**面数据**
需要指定 coordinates 字段, coordinates 据格式
**注意面数据 coord  是三层数据结构**
```javascript
[
{
type: 'Polygon',
geometryCoord: [
[
[115.1806640625, 30.637912028341123],
[114.9609375, 29.152161283318915],
[117.79541015625001, 27.430289738862594],
[118.740234375, 29.420460341013133],
[117.46582031249999, 31.50362930577303],
[115.1806640625, 30.637912028341123],
],
],
},
];
layer.source(data, {
parser: {
type: 'json',
coordinates: 'geometryCoord',
},
});
```
#### JSON
[JSON 数据格式解析](../json)
#### csv
@ -157,7 +59,7 @@ layer.source(data, {
});
```
**栅格数据类型\*\***
**栅格数据类型 **
#### image
@ -262,8 +164,5 @@ layer.source(data, {
- type: 'hexagon',
- size: 网格半径
- field: 数据统计字段
- method:聚合方法   count,max,min,sum,mean5 个统计维度
- method:聚合方法   count,max,min,sum,mean 5 个统计维度
```
```

2
package.json
View File

@ -131,7 +131,7 @@
"build:declarations": "lerna exec --stream --no-bail 'tsc --project ./tsconfig.build.json'",
"fix": "run-p -c 'lint:ts-* --fix'",
"lint:css": "stylelint 'packages/**/*.js{,x}'",
"lint:ts-prod": "tslint --config tslint.prod.json 'packages/**/*.ts{,x}'",
"lint:ts-prod": "tslint --config tslint.prod.json packages/**/*.ts",
"lint:ts-test": "tslint --config tslint.test.json 'packages/**/*.{spec,story}.ts{,x}'",
"lint:ts": "run-p -c lint:ts-*",
"lint": "run-p -c lint:*",

3
tsconfig.json
View File

@ -28,5 +28,6 @@
"useCache": false
},
"include": ["packages"],
"exclude": ["node_modules", "packages/**/dist"],
"exclude": ["node_modules", "packages/**/dist"]
}

24861
yarn.lock
View File

File diff suppressed because it is too large Load Diff