docs: update 图层引入

docs/api/layer/heatmap_layer/grid.en.md

@@ -6,6 +6,13 @@ order: 1
 
 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
 
+## 使用
+
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
 ## source
 网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
 
@@ -41,19 +48,20 @@ layer.source(data, {
 
 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
 
-#### 2d
+### 2d
 
 - circle,
 - triangle
 - square
-- heaxgon 
+- hexagon 
 
 ```javascript
+
 layer.shape(circle);
 
 ```
 
-#### 3d
+### 3d
 
 - cylinder
 - triangleColumn

docs/api/layer/heatmap_layer/grid.zh.md

@@ -5,6 +5,12 @@ order: 1
 
 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
 
+## 使用
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
 ## source
 网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
 
@@ -40,7 +46,7 @@ layer.source(data, {
 
 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
 
-#### 2d
+### 2d
 
 - circle,
 - triangle
@@ -52,7 +58,7 @@ layer.shape(circle);
 
 ```
 
-#### 3d
+### 3d
 
 - cylinder
 - triangleColumn
@@ -102,7 +108,7 @@ layer.size('value', (value)=>{})  // 回调函数设置高度
 ## 完整实例代码
 
 ```javascript
-onst layer = new HeatmapLayer({})
+const layer = new HeatmapLayer({})
       .source(data, {
         parser: {
           type: 'csv',

docs/api/layer/heatmap_layer/hexagon.en.md

@@ -4,6 +4,10 @@ order: 1
 ---
 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
 
+## 使用
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+```
 ## source
 网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
 
@@ -39,7 +43,7 @@ layer.source(data, {
 
 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
 
-#### 2d
+### 2d
 
 - circle,
 - triangle
@@ -51,7 +55,7 @@ layer.shape(circle);
 
 ```
 
-#### 3d
+### 3d
 
 - cylinder
 - triangleColumn

docs/api/layer/heatmap_layer/hexagon.zh.md

@@ -5,6 +5,13 @@ order: 1
 
 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
 
+## 使用
+
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
 ## source
 
 网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
@@ -41,7 +48,7 @@ layer.source(data, {
 
 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
 
-#### 2d
+### 2d
 
 - circle,
 - triangle
@@ -53,7 +60,7 @@ layer.shape(circle);
 
 ```
 
-#### 3d
+### 3d
 
 - cylinder
 - triangleColumn

docs/api/layer/heatmap_layer/normal.en.md

@@ -3,6 +3,13 @@ title: 经典热力图
 order: 1
 ---
 
+## 使用
+
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
 ## shape
  常量 heatmap
 

docs/api/layer/heatmap_layer/normal.zh.md

@@ -3,6 +3,13 @@ title: 经典热力图
 order: 1
 ---
 
+## 使用
+
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
 ## shape
  常量 heatmap
 

docs/api/layer/imagelayer.en.md

@@ -2,13 +2,15 @@
 title: ImageLayer
 order: 5
 ---
-
-# ImageLayer
-
 ## 简介
 
 将图片添加到地图上，需要指定图片的经纬度范围
 
+## 使用
+```javascript
+import { ImageLayer } from '@antv/l7';
+```
+
 ### 代码示例
 
 ```javascript

docs/api/layer/imagelayer.zh.md

@@ -1,13 +1,15 @@
 ---
-title: ImageLayer
+title: 图片图层
 order: 5
 ---
-
-# ImageLayer
-
 ## 简介
 
 将图片添加到地图上，需要指定图片的经纬度范围
+## 使用
+
+```javascript
+import { ImageLayer } from '@antv/l7';
+```
 
 ### 代码示例
 

docs/api/layer/layer.en.md

@@ -12,12 +12,14 @@ L7 Layer 接口设计遵循图形语法，在可视表达上
 语法示例
 
 ```javascript
-new Layer(option)
+const layer= new Layer(option)
   .source()
   .color()
   .size()
   .shape()
   .style();
+
+scene.addLayer(layer)
 ```
 
 ## 构造函数

docs/api/layer/layer.zh.md

@@ -12,12 +12,15 @@ L7 Layer 接口设计遵循图形语法，在可视表达上
 语法示例
 
 ```javascript
-new Layer(option)
+const layer= new Layer(option)
   .source()
   .color()
   .size()
   .shape()
   .style();
+
+scene.addLayer(layer)
+
 ```
 
 ## 构造函数

docs/api/layer/line_layer/arc.en.md

@@ -30,26 +30,7 @@ order: 1
 - arc3d 3d 弧线地图 3D 视角
 
 
-### 示例代码
 
-```javascript
-const layer = new LineLayer({})
-      .source(data, {
-        parser: {
-          type: 'csv',
-          x: 'lng1',
-          y: 'lat1',
-          x1: 'lng2',
-          y1: 'lat2'
-        }
-      })
-      .size(1)
-      .shape('arc')
-      .color('#8C1EB2')
-      .style({
-        opacity: 0.8,
-      });
-```
 ### animate
 
 #### 开启关闭动画
@@ -73,3 +54,23 @@ layer.animate({
   
 })
 ```
+### 示例代码
+
+```javascript
+const layer = new LineLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+      .size(1)
+      .shape('arc')
+      .color('#8C1EB2')
+      .style({
+        opacity: 0.8,
+      });
+```

docs/api/layer/line_layer/arc.zh.md

@@ -29,27 +29,6 @@ order: 1
 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
 - arc3d 3d 弧线地图 3D 视角
 
-
-### 示例代码
-
-```javascript
-const layer = new LineLayer({})
-      .source(data, {
-        parser: {
-          type: 'csv',
-          x: 'lng1',
-          y: 'lat1',
-          x1: 'lng2',
-          y1: 'lat2'
-        }
-      })
-      .size(1)
-      .shape('arc')
-      .color('#8C1EB2')
-      .style({
-        opacity: 0.8,
-      });
-```
 ### animate
 
 #### 开启关闭动画
@@ -73,3 +52,25 @@ layer.animate({
   
 })
 ```
+
+
+### 示例代码
+
+```javascript
+const layer = new LineLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+      .size(1)
+      .shape('arc')
+      .color('#8C1EB2')
+      .style({
+        opacity: 0.8,
+      });
+```

docs/api/layer/line_layer/path.en.md

@@ -0,0 +1,49 @@
+---
+title: Path
+order: 1
+---
+用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
+
+## 使用
+
+### shape
+shape 设置成line即可绘制路线图
+- line 
+
+### size
+路径图线的size支持两个维度
+
+- width 宽度
+- height 高度
+
+```javascript
+ layer.size([2,10]) // 绘制宽度为2，高度为10的路径
+ 
+ layer.size('height',[])
+```
+### animate
+
+#### 开启关闭动画
+
+```javascript
+layer.animate(true)
+layer.animate(false)
+```
+
+#### 设置动画参数
+
+- duration 动画时间 单位(s)秒
+- interval 轨迹间隔, 取值区间 0 - 1
+- trailLength 轨迹长度 取值区间 0 - 1
+
+```javascript
+layer.animate({
+  duration: 4,
+  interval: 0.2,
+  trailLength: 0.1
+  
+})
+```
+
+
+

docs/api/layer/line_layer/path.zh.md

@@ -19,7 +19,7 @@ shape 设置成line即可绘制路线图
 ```javascript
  layer.size([2,10]) // 绘制宽度为2，高度为10的路径
  
- layer.size('',[])
+ layer.size('height',[])
 ```
 ### animate
 

docs/api/layer/point_layer/bubble.en.md

@@ -1,4 +1,62 @@
 ---
-title: bubble
+title: 气泡图
 order: 1
 ---
+气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
+
+## 使用
+
+气泡图通过PointLayer对象实例化，
+
+```javascript
+import { PointLayer } from '@antv/l7';
+
+```
+### shape 
+ 
+ 通常气泡图shape 设置为 **circle**
+
+### size
+
+气泡图大小，需要指定数据映射字段
+
+```javascript
+
+const bubble = 
+new PointLayer()
+    .source(data)
+    .shape(circle)
+    .size('mag',[0, 25])
+    .color('red')
+    .style({
+      opacity: 0.3,
+      strokeWidth: 1
+    })
+```
+
+### animate
+
+气泡图支持水波动画效果
+
+#### 开启关闭动画
+
+```javascript
+layer.animate(true)
+layer.animate(false)
+```
+#### 水波配置项
+
+- speed 水波速度
+- rings 水波环数
+
+
+
+## tips
+
+目前style的配置项只支持全局设置，不支持数据映射。
+
+如果 opacity 设置为 0.3 则所有的气泡都是 0.3
+
+style方法如果没有设置 stroke, 默认于气泡的填充色相同
+
+

docs/api/layer/point_layer/cluster.en.md

@@ -2,8 +2,72 @@
 title: 聚合图
 order: 5
 ---
+## 使用
+
+目前只有点数据支持聚类方法
+
+数据聚合主要从数据层数据，因此需要在Source方法配置 cluster 参数
+
+### Source  
+[source 文档](../../source/source)
+
+### 配置项
+  - cluster **boolean** 是否聚合
+  - clusterOption 聚合配置项
+    - radius 聚合半径 **number** default 40
+    - minZoom: 最小聚合缩放等级 **number** default 0
+    - maxZoom: 最大聚合缩放等级 **number** default 16
+
+数据聚合之后，源数据会增加 point_count属性，在可视化渲染时可以根据 point_count 进行数据映射。
+
+#### 方法
+
+  **getClusters(zoom: number)**
+  
+  获取指定缩放等级的聚合数据
+   
+   - zoom 缩放等级
+  
+  **getClustersLeaves(id: string)**
+  
+    根据id获取聚合节点的数据
+
+  - id 聚合数据id
+
+  
 
 
-##使用
+```javascript
 
-目前只有点图层支持聚类方法
+layer.source(pointsData, {
+          cluster: true,
+        });
+        
+// 设置配置项
+layer.source(pointsData, {
+          cluster: true,
+          clusterOption:{
+            radius:40,
+          }
+        });
+```
+
+
+### 完整示例
+
+```javascript
+const pointLayer = new PointLayer({})
+        .source(pointsData, {
+          cluster: true,
+        })
+        .shape('circle')
+        .scale('point_count', {
+          type: 'quantile',
+        })
+        .size('point_count', [5, 10, 15, 20, 25])
+        .color('red')
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+        });
+```

docs/api/layer/point_layer/dot.en.md

@@ -7,8 +7,11 @@ order: 3
 ## 使用
 
 ### shape
+
  - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
+
 ### color 
+
   - 无权重
    如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
   - 有权重
@@ -16,6 +19,7 @@ order: 3
 
 
 ```javascript
+
 const pointLayer = new PointLayer()
       .source(data)
       .size(2)

docs/api/layer/point_layer/dot.zh.md

@@ -8,7 +8,9 @@ order: 3
 
 ### shape
  - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
+
 ### color 
+
   - 无权重
    如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
   - 有权重
@@ -16,6 +18,7 @@ order: 3
 
 
 ```javascript
+
 const pointLayer = new PointLayer()
       .source(data)
       .size(2)

docs/api/layer/point_layer/scatter.en.md

@@ -0,0 +1,43 @@
+---
+title: 散点图
+order: 2
+---
+在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
+
+## 使用
+散点图通过PointLayer对象实例化
+
+### shape
+
+- circle
+- square
+- hexagon
+- triangle
+- pentagon
+- octogon
+- hexagram
+- rhombus
+- vesica
+
+散点图shape 一般设置成常量
+
+### color
+
+color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
+
+### size
+散点图一般等大小的图形,size 一般设置成常量
+
+```javascript
+
+const scatter = 
+new PointLayer()
+    .source(data)
+    .shape(circle)
+    .size(5)
+    .color('red')
+    .style({
+      opacity: 0.3,
+      strokeWidth: 1
+    })
+```

docs/api/layer/polygon_layer/polygonlayer.en.md

@@ -2,12 +2,16 @@
 title: PolygonLayer
 order: 0
 ---
-
-# 填充图
-
 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
 
-### shape
+## 使用
+
+```javascript
+import { PolygonLayer } from '@antv/l7';
+
+```
+
+## shape
 
 填充图支持 3 种 shape
 

docs/api/layer/polygon_layer/polygonlayer.zh.md

@@ -2,12 +2,15 @@
 title: PolygonLayer
 order: 0
 ---
-
-# 填充图
-
 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
 
-### shape
+## 使用
+
+```javascript
+import { PolygonLayer } from '@antv/l7';
+```
+
+## shape
 
 填充图支持 3 种 shape
 

docs/api/layer/raster_layer.en.md

@@ -0,0 +1,41 @@
+---
+title: Raster
+order: 5
+---
+
+Raster图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为Source 传入。
+
+## 使用
+
+```javascript
+import { RasterLayer } from '@antv/l7';
+```
+
+## source
+
+ 见 [raster source](../source/raster)
+
+## shape
+
+ ```raster```
+
+## size
+无
+## color
+无
+## style
+ 
+- clampLow  Boolean 默认 false,  设置为true，低于domain的数据将不显示
+- clampHigh Boolean 默认 false,  设置为true，高于domain的数据将不显示
+- opacity: 0.8 Number 透明度
+- domain: [ 0, 8000 ]  数据映射区间
+- noDataValue Number noDataValue 不会显示
+- rampColors: {
+        colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
+        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+    } // 色带
+
+  :warning: color, position 的长度要相同
+

docs/api/layer/raster_layer.zh.md

@@ -0,0 +1,40 @@
+---
+title: 栅格图层
+order: 5
+---
+
+Raster图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为Source 传入。
+## 使用
+
+```javascript
+import { RasterLayer } from '@antv/l7';
+```
+
+## source
+
+ 见 [raster source](../source/raster)
+
+## shape
+
+ ```raster```
+
+## size
+无
+## color
+无
+## style
+ 
+- clampLow  Boolean 默认 false,  设置为true，低于domain的数据将不显示
+- clampHigh Boolean 默认 false,  设置为true，高于domain的数据将不显示
+- opacity: 0.8 Number 透明度
+- domain: [ 0, 8000 ]  数据映射区间
+- noDataValue Number noDataValue 不会显示
+- rampColors: {
+        colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
+        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+    } // 色带
+
+  :warning: color, position 的长度要相同
+

docs/api/source/raster.en.md

@@ -0,0 +1,27 @@
+---
+title: Raster
+order: 5
+---
+
+Raster图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+## parser
+
+- type: raster
+- extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat]
+- width 数据宽度
+- height 数据高度
+
+根据图片的经纬度范围，将图片添加到地图上。
+
+```javascript
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'raster',
+      extent: [121.168, 30.2828, 121.384, 30.4219],
+    },
+  },
+);
+```

docs/api/source/raster.zh.md

@@ -0,0 +1,27 @@
+---
+title: 栅格
+order: 5
+---
+
+Raster图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+## parser
+
+- type: raster
+- extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat]
+- width 数据宽度
+- height 数据高度
+
+根据图片的经纬度范围，将图片添加到地图上。
+
+```javascript
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'raster',
+      extent: [121.168, 30.2828, 121.384, 30.4219],
+    },
+  },
+);
+```

docs/api/source/source.zh.md

@@ -80,6 +80,23 @@ layer.setData(data);
 
 ### transforms
 
+ tranforms 处理的是的标准化之后的数据
+ 标准化之后的数据结构包括 coordinates 地理坐标字段，以及其他属性字段。
+
+ 处理完之后返回的也是标准数据
+
+``` javascript
+ [{
+   coordinates: [[]] // 地理坐标字段
+   _id:'',// 标准化之后新增字段
+   name:''
+   value:''
+  // ....
+ }]
+
+
+```
+
 目前支持两种热力图使用的数据处理方法 grid，hexagon transform 配置项
 
 - type 数据处理类型
@@ -95,6 +112,7 @@ layer.setData(data);
 - method:聚合方法   count,max,min,sum,mean5 个统计维度
 
 ```javascript
+
 layer.source(data, {
   transforms: [
     {
@@ -105,8 +123,8 @@ layer.source(data, {
     },
   ],
 });
-```
 
+```
 #### hexagon
 
 生成六边形网格布局，根据数据字段统计

docs/tutorial/quickstart.zh.md

@@ -37,7 +37,7 @@ Install the npm package.
 ```bash
 
 // L7 依赖
-npm install --save @antv/l7@beta
+npm install --save @antv/l7
 
 // 第三方底图依赖
 npm install --save @antv/l7-maps;

examples/point/bubble/demo/color.js

@@ -36,6 +36,7 @@ fetch(
         'vesica'
       ])
       .size('unit_price', [ 10, 25 ])
+      .active(true)
       .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
       .style({
         opacity: 0.3,

examples/point/bubble/demo/point.js

@@ -25,6 +25,7 @@ fetch(
       .color('mag', mag => {
         return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
       })
+      .active(true)
       .style({
         opacity: 0.3,
         strokeWidth: 1

examples/point/bubble/demo/world.js

@@ -31,6 +31,7 @@ fetch(
         '#A1EDB8',
         '#CEF8D6'
       ])
+      .active(true)
       .style({
         opacity: 0.5,
         strokeWidth: 0

examples/point/cluster/demo/cluster.js

@@ -23,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842
         type: 'quantile'
       })
       .size('point_count', [ 5, 10, 15, 20, 25 ])
-      .animate(false)
+      .active(true)
       .color('yellow')
       .style({
         opacity: 0.5,

examples/point/column/demo/clumn_shape.js

@@ -25,6 +25,7 @@ fetch(
           y: 'latitude'
         }
       })
+      .active(true)
       .shape('name', [
         'cylinder',
         'triangleColumn',

examples/point/column/demo/clumn_shape_light.js

@@ -31,6 +31,7 @@ fetch(
         'hexagonColumn',
         'squareColumn'
       ])
+      .active(true)
       .size('unit_price', h => {
         return [ 6, 6, h / 500 ];
       })

examples/point/column/demo/column_dark.js

@@ -26,6 +26,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
       .size('t', function(level) {
         return [ 1, 2, level * 2 + 20 ];
       })
+      .active(true)
       .color('t', [
         '#094D4A',
         '#146968',

examples/point/column/demo/column_light.js

@@ -27,6 +27,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
       .size('t', function(level) {
         return [ 1, 2, level * 2 + 20 ];
       })
+      .active(true)
       .color('#006CFF')
       .style({
         opacity: 1.0

examples/point/scatter/demo/scatter.js

@@ -26,6 +26,7 @@ fetch(
       })
       .shape('circle')
       .size(4)
+      .active(true)
       .color('Magnitude', [
         '#0A3663',
         '#1558AC',

examples/point/text/demo/meta.json

@@ -7,12 +7,12 @@
     {
       "filename": "point_text.js",
       "title": "点数据标注",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "polygon_text.js",
       "title": "面数据标注",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ"
     }
 
   ]

examples/point/text/demo/polygon_text.js

@@ -22,7 +22,13 @@ fetch(
       .shape('name', 'text')
       .size(18)
       .style({
-        opacity: 0.8
+        textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+        textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
+        spacing: 2, // 字符间距
+        padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+        stroke: '#ffffff', // 描边颜色
+        strokeWidth: 0.3, // 描边宽度
+        strokeOpacity: 1.0
       });
     scene.addLayer(layer);
   });

examples/point/text/index.en.md

@@ -2,3 +2,31 @@
 title: label
 order: 1
 ---
+文本标注图层
+
+## 使用
+
+## shape
+- text
+文本渲染需要将指定字段的shape设置成 text
+
+```javascript
+layer.shape('name','text')
+```
+## color 
+
+ 同layer color
+
+## size 
+
+ 同layer size
+
+## style
+
+- textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+- textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
+- spacing: 2, // 字符间距
+- padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+- stroke: '#ffffff', // 描边颜色
+- strokeWidth: 0.3, // 描边宽度
+- strokeOpacity: 1.0

examples/polygon/fill/demo/fill.js

@@ -34,6 +34,7 @@ fetch(
         ].reverse()
       )
       .shape('fill')
+      .active(true)
       .style({
         opacity: 1
       });

examples/polygon/fill/demo/polygon.js

@@ -28,6 +28,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
       .source(data)
       .color('name', colors)
       .shape('fill')
+      .active(true)
       .style({
         opacity: 0.9
       });

examples/polygon/fill/demo/population.js

@@ -47,6 +47,7 @@ Promise.all([
     })
     .color('female', colors)
     .shape('fill')
+    .active(true)
     .style({
       opacity: 0.9
     });

gatsby-config.js

@@ -117,13 +117,29 @@ module.exports = {
         },
         order: 4
       },
+      {
+        slug: 'api/layer/image_layer',
+        title: {
+          zh: '图片图层',
+          en: 'IMageLayer'
+        },
+        order: 5
+      },
+      {
+        slug: 'api/layer/raster_layer',
+        title: {
+          zh: '栅格图',
+          en: 'RasterLayer'
+        },
+        order: 6
+      },
       {
         slug: 'api/layer/cityBuilding',
         title: {
           zh: '城市建筑',
           en: 'CityBuilding'
         },
-        order: 6
+        order: 8
       },
       {
         slug: 'api/source',

packages/l7/README.md

@@ -11,7 +11,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
 ### Installation
 
 ```
- npm install @antv/l7@beta
+ npm install @antv/l7
 
 ```
 

stories/Components/components/Scale.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { PolygonLayer, Scale, Scene } from '@antv/l7';
+import { PolygonLayer, Scale, Scene, PointLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -14,11 +14,15 @@ export default class ScaleComponent extends React.Component {
     const response = await fetch(
       'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
     );
+    const response2 = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    );
+    const pointsData = await response2.json();
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
       map: new Mapbox({
-        style: 'mapbox://styles/mapbox/streets-v9',
+        style: 'dark',
         center: [110.19382669582967, 30.258134],
         pitch: 0,
         zoom: 3,
@@ -40,10 +44,28 @@ export default class ScaleComponent extends React.Component {
       ])
       .shape('fill')
       .style({
-        opacity: 0.3,
+        opacity: 1.0,
       });
     scene.addLayer(layer);
 
+    const pointLayer = new PointLayer()
+      .source(pointsData, {
+        cluster: true,
+      })
+      .shape('circle')
+      .scale('point_count', {
+        type: 'quantile',
+      })
+      .size('point_count', [5, 10, 15, 20, 25])
+      .animate(false)
+      .active(true)
+      .color('yellow')
+      .style({
+        opacity: 0.5,
+        strokeWidth: 1,
+      });
+    scene.addLayer(pointLayer);
+
     const scaleControl = new Scale();
     scene.addControl(scaleControl);
   }

stories/Layers/components/Point.tsx

@@ -19,7 +19,7 @@ export default class Point3D extends React.Component {
 
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMap({
+      map: new Mapbox({
         center: [120.19382669582967, 30.258134],
         pitch: 0,
         style: 'dark',
@@ -37,6 +37,7 @@ export default class Point3D extends React.Component {
       })
       .size('point_count', [5, 10, 15, 20, 25])
       .animate(false)
+      .active(true)
       .color('yellow')
       .style({
         opacity: 0.5,

stories/Picking/components/Highlight.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { PolygonLayer, Scene } from '@antv/l7';
+import { PolygonLayer, Scene, PointLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
@@ -23,10 +23,14 @@ export default class Highlight extends React.Component {
     const response = await fetch(
       'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
     );
+    const response2 = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    );
+    const pointsData = await response2.json();
     const scene = new Scene({
       id: 'map',
       map: new Mapbox({
-        style: 'mapbox://styles/mapbox/streets-v9',
+        style: 'dark',
         center: [110.19382669582967, 50.258134],
         pitch: 0,
         zoom: 3,
@@ -58,6 +62,23 @@ export default class Highlight extends React.Component {
         opacity: 1.0,
       });
     scene.addLayer(layer);
+    const pointLayer = new PointLayer()
+      .source(pointsData, {
+        cluster: true,
+      })
+      .shape('circle')
+      .scale('point_count', {
+        type: 'quantile',
+      })
+      .size('point_count', [5, 10, 15, 20, 25])
+      .animate(false)
+      .active(true)
+      .color('yellow')
+      .style({
+        opacity: 0.5,
+        strokeWidth: 1,
+      });
+    scene.addLayer(pointLayer);
     this.scene = scene;
 
     /*** 运行时修改样式属性 ***/