docs: add josn api

.storybook/addons.ts

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

.storybook/config.ts

@@ -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';
 

docs/api/source/geojson.en.md

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

docs/api/source/geojson.zh.md

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

docs/api/source/json.en.md

@@ -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',
+  },
+});
+```

docs/api/source/json.zh.md

@@ -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',
+  },
+});
+```

docs/api/source/source.en.md

@@ -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) 数据为默认数据格式，可以
+[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以 不设置 parser 参数
-
-不需要设置 parser 参数
 
 ```javascript
 layer.source(data);
 ```
 
-#### json
+#### JSON
-
+[JSON 数据格式解析](../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',
-  },
-});
-```
 
 #### csv
 
@@ -156,7 +60,7 @@ layer.source(data, {
 });
 ```
 
-**栅格数据类型\*\***
+**栅格数据类型 **
 
 #### image
 
@@ -215,20 +119,21 @@ source(values, {
 - callback:function 回调函数
 
 ```javascript
- layer.source(data, {
+layer.source(data, {
-      transforms:[
+  transforms: [
-        {
+    {
-          type: 'map',
+      type: 'map',
-          callback:function(item){
+      callback: function(item) {
-            const [x, y] = item.coordinates;
+        const [x, y] = item.coordinates;
-            item.lat = item.lat*1;
+        item.lat = item.lat * 1;
-            item.lng = item.lng*1;
+        item.lng = item.lng * 1;
-            item.v = item.v *1;
+        item.v = item.v * 1;
-            item.coordinates = [x*1,y*1];
+        item.coordinates = [x * 1, y * 1];
-            return item;
+        return item;
-          }
-
       },
+    },
+  ],
+});
 ```
 
 #### grid
@@ -241,16 +146,16 @@ source(values, {
 - method:聚合方法   count,max,min,sum,mean5 个统计维度
 
 ```javascript
- layer.source(data, {
+layer.source(data, {
-      transforms:[
+  transforms: [
-        {
+    {
-        type: 'grid',
+      type: 'grid',
-        size: 15000,
+      size: 15000,
-        field:'v',
+      field: 'v',
-        method:'sum'
+      method: 'sum',
-      }
+    },
-      ]
+  ],
-    }
+});
 ```
 
 #### hexagon
@@ -262,6 +167,3 @@ source(values, {
 - field: 数据统计字段
 - method:聚合方法   count,max,min,sum,mean5 个统计维度
 
-```
-
-```

docs/api/source/source.zh.md

@@ -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) 数据为默认数据格式，可以
+[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以 不设置 parser 参数
-
-不需要设置 parser 参数
 
 ```javascript
 layer.source(data);
 ```
 
-#### json
+#### JSON
-
+[JSON 数据格式解析](../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',
-  },
-});
-```
 
 #### 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 个统计维度
 
-```
-
-```

package.json

@@ -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:*",

tsconfig.json

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