Merge pull request #565 from antvis/fix_docs_demo

Fix docs demo

docs/api/draw/api.zh.md

@@ -1,90 +1,159 @@
----
+## 钻取地图
-title: Draw 实例
+钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
-order: 3
----
 
-`markdown:docs/common/style.md`
+钻取地图支持两种可视化类型
+- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
+- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
 
-### Draw Type
 
-可以不依赖 Draw UI 组件，独立的使用每一个 Draw
+## 使用
-
-#### DrawCircle
-
-绘制圆形
 
 ```javascript
-import { DrawCircle } from '@antv/l7-draw';
+import { DrillDownLayer } from '@antv/l7-district';
-const drawCircle = new DrawCircle(scene);
+```
-drawCircle.enable();
+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
+ 向上钻取
 
-绘制四边形
+ ```javascirpt
-
+  drillLayer.drillUp(['110100'])
-```javascript
-import { DrawRect } from '@antv/l7-draw';
-const drawRect = new DrawRect(scene);
-drawRect.enable();
 ```
+### 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
+### destroy
-
+ 移除并销毁图层
-绘制点
-
-```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
-
-图形更新时触发该事件，图形的平移，顶点的编辑

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` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
+- spacing: number 文本间隔
 - stroke: `string`; 描边颜色
 - strokeWidth `number` 描边宽度
 - strokeOpacity `number` 描边透明度

docs/common/district/bubble.zh.md

@@ -1,8 +1,12 @@
-### bubbleOption 气泡配置项
+### bubble 气泡配置项
-  - enable `boolean` 是否显示气泡 `true`
+  - enable
-  - shape: AttributeType; 气泡形状支持数据映射
+   `boolean` 是否显示气泡 `true`
-  - size: AttributeType; 气泡大小支持数据映射
+  - shape: 
-  - color: AttributeType; 气泡颜色支持数据映射
+   AttributeType; 气泡形状支持数据映射
+  - size:
+    AttributeType; 气泡大小支持数据映射
+  - color: 
+    AttributeType; 气泡颜色支持数据映射
   - scale: { // 数字度量
     field: string; 度量字段
     type: ScaleTypeName; 度量字段

docs/common/district/label.zh.md

@@ -1,13 +1,27 @@
-### labelOption 标注配置项
+### label 标注配置项
   文本标注配置项，目前只支持常量配置，不支持数据映射
   - enable `boolean` 是否显示标注
-      - color 标注字体颜色 常量
+      - color
-      - field 标注字段 常量
+         标注字体颜色 常量
-      - size 标注大小 常量
+      - field 
-      - stroke 文字描边颜色
+        标注字段 常量
-      - strokeWidth 文字描边宽度
+      - size 
-      - textAllowOverlap 是否允许文字压盖
+        标注大小 常量
-      - opacity 标注透明度
+      - stroke 
-      - spacing:  `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+        文字描边颜色
-      - padding:  `[number, number]`  文本相对锚点的偏移量 [x, y]
+      - strokeWidth 
-      其他包括 text [style 的配置](../layer/point_layer/text#style)
+        文字描边宽度
+      - textAllowOverlap
+         是否允许文字压盖
+      - opacity
+         标注透明度
+      - spacing: 
+         `number` 文本间隔
+      - strokeOpacity 
+      `number` 描边透明度
+      - fontWeight 
+      `string` 字体粗细
+      - fontFamily 
+      `string` 字号
+      - textOffset 
+      `[number, number]` 文本偏移量

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

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`
 

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: [
+        values: colors
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
       }
     },
     popup: {

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: [
+        values: colors,
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
       }
     },
     popup: {

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: [
+          values: colors
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603'
-          ]
         }
       },
       popup: {

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: [
+        values: colors
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
       }
     },
     popup: {

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: [
+          values: colors
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603'
-          ]
         }
       },
       popup: {

examples/district/drill/API.zh.md

@@ -1,158 +1,3 @@
-## 钻取地图
+`markdown:docs/common/style.md`
-钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（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/api/draw/api.zh.md`

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: [
+        values: colors
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
       }
     },
     popup: {

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: [
+        values: colors
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
       }
     },
     popup: {

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

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

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
 
 图形更新时触发该事件，图形的平移，顶点的编辑
 

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'

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",

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.2.41';
+const version = '2.2.42';
 export { version };

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);

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() {

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":
+"@antv/gatsby-theme-antv@^1.0.0-beta.15":
-  version "1.0.0-beta.11"
+  version "1.0.0-beta.15"
-  resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-1.0.0-beta.11.tgz#c67186de937101e8092e3010a0374c780f691186"
+  resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-1.0.0-beta.15.tgz#016ec25e2c5476b6a79fd176db27732deb904cea"
-  integrity sha512-btbHO9pIQOcii//2SPEYaC25XtnO686+UDZ0j0bqYK508Irx2LuZMTSs0vVim0ZC/2myKjc/AKqaKNnPTjYugg==
+  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"