Merge pull request #565 from antvis/fix_docs_demo

Fix docs demo
2020-11-19 11:09:30 +08:00 · 2020-11-19 11:09:30 +08:00 · 46d78b4e41
parent 1f5e5796f7 70ec75bcd4
commit 46d78b4e41
23 changed files with 329 additions and 337 deletions
--- a/docs/api/draw/api.zh.md
+++ b/docs/api/draw/api.zh.md
@ -1,90 +1,159 @@
---
-title: Draw 实例
-order: 3
---
+## 钻取地图
+钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。

-`markdown:docs/common/style.md`
+钻取地图支持两种可视化类型
+- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
+- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小

-### Draw Type

-可以不依赖 Draw UI 组件，独立的使用每一个 Draw
-
-#### DrawCircle
-
-绘制圆形
+## 使用

 ```javascript
-import { DrawCircle } from '@antv/l7-draw';
-const drawCircle = new DrawCircle(scene);
-drawCircle.enable();
+import { DrillDownLayer } from '@antv/l7-district';
+```
+DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
+
+## 构造函数
+
+### scene L7 scene 对象
+
+### option 行政区划配置项
+
+## 配置项
+
+  ### customTrigger 
+  是否自定义下钻交互，默认 `false`
+  ### drillDownTriggerEvent
+   向下钻取的触发事件  ⛔customTrigger为 true 时不生效
+  ### drillUpTriggleEvent 
+  向上钻取的触发事件    ⛔customTrigger为 true 时不生效
+  ### provinceData 
+  省级数据 
+  ### cityData 
+  市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
+  ### countyData
+   县级数据  可以是全量的数据，下钻时可以不需要重新设置数据
+  ### joinBy 
+  数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
+  对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
+  ### label 
+   文本配置项 `labelOption`
+  ### bubble 
+   气泡配置项 `bubbleOption`
+  ### fill 
+  填充配置项 `fillOption`
+  ### province  
+  `layerOption` 省级图层配置，如果不设置等同全局配置  
+  ### city 
+  `layerOption`  市级图层配置，如果不设置等同全局配置
+  ### county 
+   `layerOption` 县级图层配置，如果不设置等同全局配置
+  ### viewStart 
+    
+    起始下钻视图 `Country' | 'Province' | 'City' | 'County`;  用于定义下钻层级，
+    如果 viewStart 设置为 Province 需要为city 设置 adcode 初值
+    同理如果  viewStart 设置为 City 需要为 county 设置 adcode 初值
+  ### viewEnd   
+  结束下钻视图 `Country' | 'Province' | 'City' | 'County`;  用于定义下钻层级，
+
+#### layerOption
+
+ 下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
+  - joinBy: [string, string];
+  - label: Partial<ILabelOption>;
+  - bubble: Partial<IBubbleOption>;
+  - fill: Partial<IFillOptions>;
+   ⛔中国地图视角设置，省界，海岸线，宽度通过以下属性
+  - chinaNationalStroke 中国国界线颜色 
+  - chinaNationalWidth 中国国界线宽度 
+  - coastlineStroke 海岸线颜色 
+  - coastlineWidth 海岸线宽度 
+  - nationalWidth 国界线 
+  - nationalStroke 国界线 
+  - provinceStroke 省界颜色 
+  - provinceStrokeWidth 省界宽度 
+
+#### labelOption
+  文本标注配置项，目前只支持常量配置，不支持数据映射
+  - enable `boolean` 是否开启标注 `true`
+  - color `string` 标注颜色
+  - field `string` 标注字段名  默认 `NAME_CHN`
+  - size `number` 文本大小 默认 `8`
+  - stroke `string` 描边颜色 `#fff`
+  - strokeWidth `number` 描边宽度 `2` 
+  - textAllowOverlap: `boolean` 文字是否允许压盖 `true`
+  - opacity `number` 透明度 `1`
+
+#### bubbleOption
+
+气泡图配置项
+  - enable `boolean` 是否显示气泡 `true`
+  - shape: AttributeType; 气泡形状支持数据映射
+  - size: AttributeType; 气泡大小支持数据映射
+  - color: AttributeType; 气泡颜色支持数据映射
+  - scale: { // 数字度量
+    field: string; 度量字段
+    type: ScaleTypeName; 度量字段
+  };
+  - style: {
+    opacity: number; 透明度
+    stroke: string; 填充色
+    strokeWidth: number; 填充宽度
+  };
+
+#### fill
+  填充图样式
+  - scale: ScaleTypeName | null; 填充颜色度量类型
+  - color: AttributeType; 填充颜色支持数据映射
+  - style: any; 填充图样式
+  - activeColor: string; 填充图高亮颜色
+
+## 属性
+为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
+
+### provinceLayer
+
+全国地图 CountyLayer
+
+### cityLayer
+
+省级地图 ProvinceLayer
+
+### countyLayer
+市级地图 CityLayer
+
+## 方法
+
+### drillDown
+ 向下钻取 自定义钻取交互行为时使用
+
+** 参数 ** 
+- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
+- data 下钻层级的数据，可选，如果不设置取全局配置
+- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
+
+```javascirpt
+  drillLayer.drillDown(['110100'])
 ```

-#### DrawRect
+### drillUp
+ 向上钻取

-绘制四边形
-
-```javascript
-import { DrawRect } from '@antv/l7-draw';
-const drawRect = new DrawRect(scene);
-drawRect.enable();
+ ```javascirpt
+  drillLayer.drillUp(['110100'])
 ```
+### updateData
+参数
+  - layer 更新图层名称 `province|city|county`
+  - data 数据
+  - joinBy 可选
+### show

-#### DrawLine
+显示图形

-绘制路径
+### hide

-```javascript
-import { DrawLine } from '@antv/l7-draw';
-const drawLine = new DrawLine(scene);
-drawLine.enable();
-```
+隐藏图层

-#### DrawPoint
-
-绘制点
-
-```javascript
-import { DrawPoint } from '@antv/l7-draw';
-const drawPoint = new DrawPoint(scene);
-drawPoint.enable();
-```
-
-#### DrawPolygon
-
-绘制多边形
-
-```javascript
-import { DrawPolygon } from '@antv/l7-draw';
-const drawPoint = new DrawPolygon(scene);
-drawPoint.enable();
-```
-
-### 配置项 DrawOption
-
- editEnable `boolean` 是否允许编辑
- selectEnable `boolean` 是否允许选中
- data `geojson` 传入数据
-
-### 方法
-
-#### enable
-
-开始编辑，绘制完成之后会自动结束。
-
-#### disable
-
-结束编辑
-
-### 事件
-
-#### draw.create
-
-绘制完成时触发该事件
-
-#### draw.delete
-
-图形删除时触发该事件
-
-#### draw.update
-
-图形更新时触发该事件，图形的平移，顶点的编辑
+### destroy
+ 移除并销毁图层
--- a/docs/api/layer/point_layer/text.zh.md
+++ b/docs/api/layer/point_layer/text.zh.md
@ -23,8 +23,8 @@ layer.shape('name', 'text');
 - opacity `number`
 - textAnchor `string` 文本相对锚点的位置
  `'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';`
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
+- padding: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+- spacing: number 文本间隔
 - stroke: `string`; 描边颜色
 - strokeWidth `number` 描边宽度
 - strokeOpacity `number` 描边透明度
--- a/docs/common/district/bubble.zh.md
+++ b/docs/common/district/bubble.zh.md
@ -1,8 +1,12 @@
-### bubbleOption 气泡配置项
-  - enable `boolean` 是否显示气泡 `true`
-  - shape: AttributeType; 气泡形状支持数据映射
-  - size: AttributeType; 气泡大小支持数据映射
-  - color: AttributeType; 气泡颜色支持数据映射
+### bubble 气泡配置项
+  - enable
+   `boolean` 是否显示气泡 `true`
+  - shape: 
+   AttributeType; 气泡形状支持数据映射
+  - size:
+    AttributeType; 气泡大小支持数据映射
+  - color: 
+    AttributeType; 气泡颜色支持数据映射
  - scale: { // 数字度量
    field: string; 度量字段
    type: ScaleTypeName; 度量字段
--- a/docs/common/district/label.zh.md
+++ b/docs/common/district/label.zh.md
@ -1,13 +1,27 @@
-### labelOption 标注配置项
+### label 标注配置项
  文本标注配置项，目前只支持常量配置，不支持数据映射
  - enable `boolean` 是否显示标注
-      - color 标注字体颜色 常量
-      - field 标注字段 常量
-      - size 标注大小 常量
-      - stroke 文字描边颜色
-      - strokeWidth 文字描边宽度
-      - textAllowOverlap 是否允许文字压盖
-      - opacity 标注透明度
-      - spacing:  `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-      - padding:  `[number, number]`  文本相对锚点的偏移量 [x, y]
-      其他包括 text [style 的配置](../layer/point_layer/text#style)
+      - color
+         标注字体颜色 常量
+      - field 
+        标注字段 常量
+      - size 
+        标注大小 常量
+      - stroke 
+        文字描边颜色
+      - strokeWidth 
+        文字描边宽度
+      - textAllowOverlap
+         是否允许文字压盖
+      - opacity
+         标注透明度
+      - spacing: 
+         `number` 文本间隔
+      - strokeOpacity 
+      `number` 描边透明度
+      - fontWeight 
+      `string` 字体粗细
+      - fontFamily 
+      `string` 字号
+      - textOffset 
+      `[number, number]` 文本偏移量
--- a/docs/common/layer/layer_encode.md
+++ b/docs/common/layer/layer_encode.md
@ -226,6 +226,8 @@ layer.color('gender*age', (gender, age) => {

 - stroke 线填充颜色 仅点图层支持

+- offsets 偏移量  [number, number] x 和 y 方向偏移 仅支持 pointLayer
+
 - strokeWidth 线的宽度 仅点图层支持

 ```javascript
--- a/examples/district/basic/API.zh.md
+++ b/examples/district/basic/API.zh.md
@ -33,7 +33,7 @@ District 支持下面几种图
 - CountyLayer 县级地图


-## option 行政区划配置项
+## 配置项

  ### zIndex 
  
@ -92,9 +92,11 @@ District 支持下面几种图
  县级边界宽度 `CountryLayer depth =2时生效`


-`markdown:docs/common/district/label.md`
+`markdown:docs/common/district/label.zh.md`

 `markdown:docs/common/district/fill.zh.md`
+
+`markdown:docs/common/district/popup.zh.md`
 
 `markdown:docs/common/district/bubble.zh.md`

--- a/examples/district/basic/demo/attach_map.js
+++ b/examples/district/basic/demo/attach_map.js
@ -1,6 +1,7 @@
 import { Scene } from '@antv/l7';
 import { CountryLayer } from '@antv/l7-district';
 import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']
 const scene = new Scene({
  id: 'map',
  map: new Mapbox({
@ -27,7 +28,7 @@ scene.on('loaded', () => {
    data: [],
    joinBy: [ 'NAME_CHN', 'name' ],
    depth: 1,
-    provinceStroke: '#783D2D',
+    provinceStroke: '#fff',
    cityStroke: '#EBCCB4',
    cityStrokeWidth: 1,
    label: {
@ -36,14 +37,7 @@ scene.on('loaded', () => {
    fill: {
      color: {
        field: 'NAME_CHN',
-        values: [
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
+        values: colors
      }
    },
    popup: {
--- a/examples/district/basic/demo/china_map_2.js
+++ b/examples/district/basic/demo/china_map_2.js
@ -1,6 +1,7 @@
 import { Scene } from '@antv/l7';
 import { CountryLayer } from '@antv/l7-district';
 import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']
 const ProvinceData = [
  {
    name: '云南省',
@ -190,20 +191,13 @@ scene.on('loaded', () => {
    data: ProvinceData,
    joinBy: [ 'NAME_CHN', 'name' ],
    depth: 1,
-    provinceStroke: '#783D2D',
+    provinceStroke: '#fff',
    cityStroke: '#EBCCB4',
    cityStrokeWidth: 1,
    fill: {
      color: {
        field: 'NAME_CHN',
-        values: [
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
+        values: colors,
      }
    },
    popup: {
--- a/examples/district/basic/demo/city.js
+++ b/examples/district/basic/demo/city.js
@ -1,6 +1,7 @@
 import { Scene } from '@antv/l7';
 import { CityLayer } from '@antv/l7-district';
 import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']

 async function initMap() {
  const response = await fetch(
@ -38,14 +39,7 @@ async function initMap() {
      },
      fill: {
        color: { field: 'pop',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603'
-          ]
+          values: colors
        }
      },
      popup: {
--- a/examples/district/basic/demo/county.js
+++ b/examples/district/basic/demo/county.js
@ -1,6 +1,7 @@
 import { Scene } from '@antv/l7';
 import { CountyLayer } from '@antv/l7-district';
 import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']
 const scene = new Scene({
  id: 'map',
  map: new Mapbox({
@ -23,14 +24,7 @@ scene.on('loaded', () => {
    fill: {
      color: {
        field: 'NAME_CHN',
-        values: [
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
+        values: colors
      }
    },
    popup: {
--- a/examples/district/basic/demo/province.js
+++ b/examples/district/basic/demo/province.js
@ -1,6 +1,7 @@
 import { Scene } from '@antv/l7';
 import { ProvinceLayer } from '@antv/l7-district';
 import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']
 async function initMap() {
  const response = await fetch(
    'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
@ -39,14 +40,7 @@ async function initMap() {
      fill: {
        color: {
          field: 'pop',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603'
-          ]
+          values: colors
        }
      },
      popup: {
--- a/examples/district/drill/API.zh.md
+++ b/examples/district/drill/API.zh.md
@ -1,158 +1,3 @@
-## 钻取地图
-钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
-
-钻取地图支持两种可视化类型
- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
-
-
-## 使用
-
-```javascript
-import { DrillDownLayer } from '@antv/l7-district';
-```
-DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
-
-## 构造函数
-
-### scene L7 scene 对象
-
-### option 行政区划配置项
-
-## 配置项
-
-  ### customTrigger 
-  是否自定义下钻交互，默认 `false`
-  ### drillDownTriggerEvent
-   向下钻取的触发事件  ⛔customTrigger为 true 时不生效
-  ### drillUpTriggleEvent 
-  向上钻取的触发事件    ⛔customTrigger为 true 时不生效
-  ### provinceData 
-  省级数据 
-  ### cityData 
-  市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
-  ### countyData
-   县级数据  可以是全量的数据，下钻时可以不需要重新设置数据
-  ### joinBy 
-  数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
-  对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
-  ### label 
-   文本配置项 `labelOption`
-  ### bubble 
-   气泡配置项 `bubbleOption`
-  ### fill 
-  填充配置项 `fillOption`
-  ### province  
-  `layerOption` 省级图层配置，如果不设置等同全局配置  
-  ### city 
-  `layerOption`  市级图层配置，如果不设置等同全局配置
-  ### county 
-   `layerOption` 县级图层配置，如果不设置等同全局配置
-  ### viewStart 
-  起始下钻视图 `Country' | 'Province' | 'City' | 'County`;  用于定义下钻层级，
-  ### viewEnd   
-  结束下钻视图 `Country' | 'Province' | 'City' | 'County`;  用于定义下钻层级，
-
-#### layerOption
-
- 下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
-  - joinBy: [string, string];
-  - label: Partial<ILabelOption>;
-  - bubble: Partial<IBubbleOption>;
-  - fill: Partial<IFillOptions>;
-   ⛔中国地图视角设置，省界，海岸线，宽度通过以下属性
-  - chinaNationalStroke 中国国界线颜色 
-  - chinaNationalWidth 中国国界线宽度 
-  - coastlineStroke 海岸线颜色 
-  - coastlineWidth 海岸线宽度 
-  - nationalWidth 国界线 
-  - nationalStroke 国界线 
-  - provinceStroke 省界颜色 
-  - provinceStrokeWidth 省界宽度 
-
-#### labelOption
-  文本标注配置项，目前只支持常量配置，不支持数据映射
-  - enable `boolean` 是否开启标注 `true`
-  - color `string` 标注颜色
-  - field `string` 标注字段名  默认 `NAME_CHN`
-  - size `number` 文本大小 默认 `8`
-  - stroke `string` 描边颜色 `#fff`
-  - strokeWidth `number` 描边宽度 `2` 
-  - textAllowOverlap: `boolean` 文字是否允许压盖 `true`
-  - opacity `number` 透明度 `1`
-
-#### bubbleOption
-
-气泡图配置项
-  - enable `boolean` 是否显示气泡 `true`
-  - shape: AttributeType; 气泡形状支持数据映射
-  - size: AttributeType; 气泡大小支持数据映射
-  - color: AttributeType; 气泡颜色支持数据映射
-  - scale: { // 数字度量
-    field: string; 度量字段
-    type: ScaleTypeName; 度量字段
-  };
-  - style: {
-    opacity: number; 透明度
-    stroke: string; 填充色
-    strokeWidth: number; 填充宽度
-  };
-
-#### fill
-  填充图样式
-  - scale: ScaleTypeName | null; 填充颜色度量类型
-  - color: AttributeType; 填充颜色支持数据映射
-  - style: any; 填充图样式
-  - activeColor: string; 填充图高亮颜色
-
-## 属性
-为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
-
-### provinceLayer
-
-全国地图 CountyLayer
-
-### cityLayer
-
-省级地图 ProvinceLayer
-
-### countyLayer
-市级地图 CityLayer
-
-## 方法
-
-### drillDown
- 向下钻取 自定义钻取交互行为时使用
-
-** 参数 ** 
- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
- data 下钻层级的数据，可选，如果不设置取全局配置
- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
-
-```javascirpt
-  drillLayer.drillDown(['110100'])
-```
-
-### drillUp
- 向上钻取
-
- ```javascirpt
-  drillLayer.drillUp(['110100'])
-```
-### updateData
-参数
-  - layer 更新图层名称 `province|city|county`
-  - data 数据
-  - joinBy 可选
-### show
-
-显示图形
-
-### hide
-
-隐藏图层
-
-### destroy
- 移除并销毁图层
-
+`markdown:docs/common/style.md`

+`markdown:docs/api/draw/api.zh.md`
--- a/examples/district/drill/demo/drill_down.js
+++ b/examples/district/drill/demo/drill_down.js
@ -1,6 +1,7 @@
 import { Scene } from '@antv/l7';
 import { DrillDownLayer } from '@antv/l7-district';
 import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']
 const scene = new Scene({
  id: 'map',
  map: new Mapbox({
@ -16,18 +17,11 @@ scene.on('loaded', () => {
  new DrillDownLayer(scene, {
    data: [],
    viewStart: 'Country',
-    viewEnd: 'County',
+    viewEnd: 'City',
    fill: {
      color: {
        field: 'NAME_CHN',
-        values: [
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
+        values: colors
      }
    },
    popup: {
--- a/examples/district/drill/demo/drill_down_bubble.js
+++ b/examples/district/drill/demo/drill_down_bubble.js
@ -1,6 +1,7 @@
 import { Scene } from '@antv/l7';
 import { DrillDownLayer } from '@antv/l7-district';
 import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']
 const scene = new Scene({
  id: 'map',
  map: new Mapbox({
@ -20,14 +21,7 @@ scene.on('loaded', () => {
      enable: true,
      color: {
        field: 'NAME_CHN',
-        values: [
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
+        values: colors
      }
    },
    popup: {
--- a/examples/district/drill/demo/drill_down_province.js
+++ b/examples/district/drill/demo/drill_down_province.js
@ -0,0 +1,37 @@
+import { Scene } from '@antv/l7';
+import { DrillDownLayer } from '@antv/l7-district';
+import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 116.2825, 39.9 ],
+    pitch: 0,
+    style: 'blank',
+    zoom: 3,
+    minZoom: 3,
+    maxZoom: 10
+  })
+});
+scene.on('loaded', () => {
+  new DrillDownLayer(scene, {
+    data: [],
+    viewStart: 'Province',
+    viewEnd: 'County',
+    fill: {
+      color: {
+        field: 'NAME_CHN',
+        values: colors
+      }
+    },
+    city:{
+      adcode:[330000]
+    },
+    popup: {
+      enable: true,
+      Html: props => {
+        return `<span>${props.NAME_CHN}</span>`;
+      }
+    }
+  });
+});
--- a/examples/district/drill/demo/drill_down_view.js
+++ b/examples/district/drill/demo/drill_down_view.js
@ -0,0 +1,34 @@
+import { Scene } from '@antv/l7';
+import { DrillDownLayer } from '@antv/l7-district';
+import { Mapbox } from '@antv/l7-maps';
+const colors = ['#B8E1FF','#7DAAFF', '#3D76DD','#0047A5','#001D70']
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 116.2825, 39.9 ],
+    pitch: 0,
+    style: 'blank',
+    zoom: 3,
+    minZoom: 3,
+    maxZoom: 10
+  })
+});
+scene.on('loaded', () => {
+  new DrillDownLayer(scene, {
+    data: [],
+    viewStart: 'Country',
+    viewEnd: 'Province',
+    fill: {
+      color: {
+        field: 'NAME_CHN',
+        values: colors
+      }
+    },
+    popup: {
+      enable: true,
+      Html: props => {
+        return `<span>${props.NAME_CHN}</span>`;
+      }
+    }
+  });
+});
--- a/examples/draw/basic/API.en.md
+++ b/examples/draw/basic/API.en.md
@ -3,7 +3,7 @@ title: API
 ---
 地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。

-# 使用
+## 使用

 **using modules**

@ -20,7 +20,7 @@ import { DrawControl } from '@antv/l7-draw';
 </head>
 ```

-### 参数
+## 参数

 ```javascript
 const control = new DrawControl(scene, option);
@ -90,11 +90,11 @@ scene.addControl(control);
 scene.removeControl(control);
 ```

-### Draw Type
+## Draw Type

 可以不依赖 Draw UI 组件，独立的使用每一个 Draw

-#### DrawCircle
+### DrawCircle

 绘制圆形

@ -104,7 +104,7 @@ const drawCircle = new DrawCircle(scene);
 drawCircle.enable();
 ```

-#### DrawRect
+### DrawRect

 绘制四边形

@ -114,7 +114,7 @@ const drawRect = new DrawRect(scene);
 drawRect.enable();
 ```

-#### DrawLine
+### DrawLine

 绘制路径

@ -124,7 +124,7 @@ const drawLine = new DrawLine(scene);
 drawLine.enable();
 ```

-#### DrawPoint
+### DrawPoint

 绘制点

@ -134,7 +134,7 @@ const drawPoint = new DrawPoint(scene);
 drawPoint.enable();
 ```

-#### DrawPolygon
+### DrawPolygon

 绘制多边形

@ -149,27 +149,27 @@ drawPoint.enable();
 - editEnable boolean 是否允许编辑
 - selectEnable boolean 是否允许选中

-### 方法
+## 方法

-#### enable
+### enable

 开始编辑，绘制完成之后会自动结束。

-#### disable
+### disable

 结束编辑

-### 事件
+## 事件

-#### draw.create
+### draw.create

 绘制完成时触发该事件

-#### draw.delete
+### draw.delete

 图形删除时触发该事件

-#### draw.update
+### draw.update

 图形更新时触发该事件，图形的平移，顶点的编辑

--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -268,7 +268,7 @@ module.exports = {
      }
    ],
    playground: {
-      container: '<div style="min-height: 500px;  top: 100px; justify-content: center;position: relative" id="map"/>',
+      container: '<div style="min-height: 500px; height: 100%; justify-content: center;position: relative" id="map"/>',
      dependencies: {
        '@antv/l7': 'latest',
        '@antv/l7-maps': 'latest'
--- a/package.json
+++ b/package.json
@ -10,7 +10,7 @@
    "@antv/l7-district": "^2.2.46",
    "@antv/l7-draw": "^2.3.40",
    "@antv/l7-react": "^2.2.37",
-    "@antv/gatsby-theme-antv": "^1.0.0-beta.11",
+    "@antv/gatsby-theme-antv": "^1.0.0-beta.15",
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-decorators": "^7.6.0",
--- a/packages/l7/src/version.ts
+++ b/packages/l7/src/version.ts
@ -1,2 +1,2 @@
-const version = '2.2.41';
+const version = '2.2.42';
 export { version };
--- a/packages/layers/src/point/shaders/image_vert.glsl
+++ b/packages/layers/src/point/shaders/image_vert.glsl
@ -19,7 +19,7 @@ void main() {
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
   v_size = a_Size;
   vec2 offset = project_pixel(u_offsets);
-   gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset) project_pos.z, 1.0));
+   gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset),project_pos.z, 1.0));
   gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;

  setPickingColor(a_PickingColor);
--- a/stories/Layers/components/PointImage.tsx
+++ b/stories/Layers/components/PointImage.tsx
@ -55,11 +55,31 @@ export default class PointImage extends React.Component {
      // .shape('triangle')
      // .color('red')
      .active(true)
-      .size(20);
+      .size(20)
+      .style({
+        offsets: [40, 40],
+      });
    // imageLayer.on('click', (e) => {
    //   console.log(e);
    // });
+
+    const imageLayer2 = new PointLayer()
+      .source(newData, {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude',
+        },
+      })
+      .shape('type', (v: any) => {
+        return v;
+      })
+      // .shape('triangle')
+      // .color('red')
+      .active(true)
+      .size(10);
    scene.addLayer(imageLayer);
+    scene.addLayer(imageLayer2);
  }

  public render() {
--- a/yarn.lock
+++ b/yarn.lock
@ -139,10 +139,10 @@
    d3-timer "~1.0.6"
    detect-browser "^5.1.0"

-"@antv/gatsby-theme-antv@^1.0.0-beta.11":
-  version "1.0.0-beta.11"
-  resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-1.0.0-beta.11.tgz#c67186de937101e8092e3010a0374c780f691186"
-  integrity sha512-btbHO9pIQOcii//2SPEYaC25XtnO686+UDZ0j0bqYK508Irx2LuZMTSs0vVim0ZC/2myKjc/AKqaKNnPTjYugg==
+"@antv/gatsby-theme-antv@^1.0.0-beta.15":
+  version "1.0.0-beta.15"
+  resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-1.0.0-beta.15.tgz#016ec25e2c5476b6a79fd176db27732deb904cea"
+  integrity sha512-vIeEgZqCLbQLsMPdQlBhjD1bBTxMhiVzu2sSqQ9mMDOSiTGwJjsDTVEnDdokMk/Q2w5UhF4cKLBDdRPdIVPUUA==
  dependencies:
    "@ant-design/icons" "^4.1.0"
    "@babel/plugin-transform-modules-umd" "^7.2.0"
@ -205,6 +205,7 @@
    gatsby-source-github "^0.0.2"
    gatsby-transformer-remark "^2.8.8"
    git-url-parse "^11.1.2"
+    html-to-image "^1.3.20"
    i18next "^19.4.4"
    indent-string "^4.0.0"
    insert-css "^2.0.0"
@ -217,6 +218,7 @@
    monaco-editor "^0.21.0"
    monaco-editor-webpack-plugin "^2.0.0"
    normalize.css "^8.0.1"
+    omit.js "^2.0.2"
    parse-github-url "^1.0.2"
    prism-themes "^1.2.0"
    prismjs "^1.17.1"
@ -14799,6 +14801,11 @@ html-tags@^2.0.0:
  resolved "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
  integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=

+html-to-image@^1.3.20:
+  version "1.3.20"
+  resolved "https://registry.npmjs.org/html-to-image/-/html-to-image-1.3.20.tgz#15d89bb82e50d16e45a72dce245d8d52a637edf2"
+  integrity sha512-Pkc4rzqml0/VDPi81Y+ljQH+eko87FzwZpNfoEmj2urWdAiu2u9LxSoOJpWI/++I9uaR3tPe1xLq/VZmwOqVSw==
+
 html-void-elements@^1.0.0, html-void-elements@^1.0.1:
  version "1.0.5"
  resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"