docs(docs): 更新docs

docs/api/district/baselayer.en.md

@@ -2,4 +2,5 @@
 title: Base Map
 order: 2
 ---
+
 `markdown:docs/api/district/style.md`

docs/api/district/baselayer.zh.md

@@ -1,6 +1,7 @@
 ---
 title: 基础地图
 ---
+
 `markdown:docs/common/style.md`
 
 地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
@@ -32,118 +33,154 @@ District 支持下面几种图
 - CityLayer 市级地图
 - CountyLayer 县级地图
 
-
 ## 配置项
 
-  ### zIndex 
+### zIndex
-  
-  图层绘制顺序
 
-  ###  data `Array`
+图层绘制顺序
-  
-   属性数据用于可视化渲染
-  ### visible
-   地图是否可见
-  ### joinBy 
-  数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
-    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
 
-  ###  showBorder `boolean`
+### data `Array`
-   是否显示国界线，默认显示，不建议不显示
 
-  ### simplifyTolerance 
+属性数据用于可视化渲染
-  数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
-  ### depth
-   数据显示层级 0：国家级，1:省级，2: 市级，3：县级
 
-  ### stroke 填充描边颜色
+### visible
-   `ProvinceLayer, CityLayer, CountyLayer`
-  ### strokeWidth 填充描边宽度 
-  `ProvinceLayer, CityLayer, CountyLayer`
 
-  ### autoFit 
+地图是否可见
 
-  是否自动缩放到图层范围 `boolean`
+### joinBy
 
-  ### chinaNationalStroke 
+数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
-  中国国界线颜色 `CountryLayer`
+对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
 
-  ###  chinaNationalWidth 
+### showBorder `boolean`
-  中国国界线宽度 `CountryLayer`
-  ###  coastlineStroke
-   海岸线颜色  `CountryLayer`
-  ###  coastlineWidth 
-   海岸线宽度 `WorldLayer` `CountryLayer`
-  ### nationalWidth 
-  国界线 `WorldLayer` `CountryLayer`
-  ###  nationalStroke
-   国界线 `WorldLayer` `CountryLayer`
-  ###  provinceStroke 
-  省界颜色 `CountryLayer depth= 0，1，2时生效`
-  ###  provinceStrokeWidth 
-  省界宽度 `CountryLayer depth = 0，1，2时生效 `
-  ###  cityStroke 市级边界颜色 
-  `CountryLayer depth =1，2时生效`
-  ###  cityStrokeWidth 市级边界宽度 
-  `CountryLayer depth =1，2 时生效`
-  ###  countyStroke 
-  县级边界颜色 `CountryLayer depth =2时生效`
-  ### countyStrokeWidth 
-  县级边界宽度 `CountryLayer depth =2时生效`
 
+是否显示国界线，默认显示，不建议不显示
+
+### simplifyTolerance
+
+数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
+
+### depth
+
+数据显示层级 0：国家级，1:省级，2: 市级，3：县级
+
+### stroke 填充描边颜色
+
+`ProvinceLayer, CityLayer, CountyLayer`
+
+### strokeWidth 填充描边宽度
+
+`ProvinceLayer, CityLayer, CountyLayer`
+
+### autoFit
+
+是否自动缩放到图层范围 `boolean`
+
+### chinaNationalStroke
+
+中国国界线颜色 `CountryLayer`
+
+### chinaNationalWidth
+
+中国国界线宽度 `CountryLayer`
+
+### coastlineStroke
+
+海岸线颜色 `CountryLayer`
+
+### coastlineWidth
+
+海岸线宽度 `WorldLayer` `CountryLayer`
+
+### nationalWidth
+
+国界线 `WorldLayer` `CountryLayer`
+
+### nationalStroke
+
+国界线 `WorldLayer` `CountryLayer`
+
+### provinceStroke
+
+省界颜色 `CountryLayer depth= 0，1，2时生效`
+
+### provinceStrokeWidth
+
+省界宽度 `CountryLayer depth = 0，1，2时生效`
+
+### cityStroke 市级边界颜色
+
+`CountryLayer depth =1，2时生效`
+
+### cityStrokeWidth 市级边界宽度
+
+`CountryLayer depth =1，2 时生效`
+
+### countyStroke
+
+县级边界颜色 `CountryLayer depth =2时生效`
+
+### countyStrokeWidth
+
+县级边界宽度 `CountryLayer depth =2时生效`
 
 `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`
 
-
 ## 数据
-District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
-  - [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
-  
-  - [省级行政名称_adcode_对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
-  
-  - [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
 
-  - [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
+District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
+
+- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
+
+- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
+
+- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
+
+- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
 
 ## 方法
 
 ### updateLayerAttribute
-  更新图层渲染样式
-参数
- -  layerName 
-   'fill' | 'line' | 'label' | 'bubble' = 'fill',
- -  type: 'color' | 'size' | 'shape' | 'filter',
- -  attr: AttributeType | undefined,
 
- ```js
+更新图层渲染样式
-  const layer = new CountryLayer();
+参数
-  layer.updateLayerAttribute('fill', 'color', 'red')
+
- ```
+- layerName
+  'fill' | 'line' | 'label' | 'bubble' = 'fill',
+- type: 'color' | 'size' | 'shape' | 'filter',
+- attr: AttributeType | undefined,
+
+```js
+const layer = new CountryLayer();
+layer.updateLayerAttribute('fill', 'color', 'red');
+```
 
 ### updateDistrict
- 根据 adcode 更新 行政区块
- 
- 参数
-  - adcode 行政区划编码
-  - data 数据
-  - joinByField 绑定字段
 
+根据 adcode 更新 行政区块
+
+参数
+
+- adcode 行政区划编码
+- data 数据
+- joinByField 绑定字段
 
 ```javascript
-  citylayer.updateDistrict(['330100','340100']);
+citylayer.updateDistrict(['330100', '340100']);
-
 ```
 
 ### updateData(data, joinBy)
+
 更新显示数据，
 
 参数：
+
 - data 需要更新的数据
 - joinBy 关联字段 可选，如果不设置保持和初始化一致。
 
@@ -156,6 +193,7 @@ District 提供polygon数据需要跟用户的属性数据，通过关系字段
 显示图层
 
 ### hide
+
 图层隐藏不显示
 
 ### destroy
@@ -164,29 +202,29 @@ District 提供polygon数据需要跟用户的属性数据，通过关系字段
 
 ## 事件
 
-行政区划图事件监听默认添加在 fillLayer上，你点击填充的色块才能接收到事件响应。
+ 行政区划图事件监听默认添加在 fillLayer 上，你点击填充的色块才能接收到事件响应。
 
-支持的事件类型同 
+支持的事件类型同
 
 ### on 添加事件
-  参数
-  - type
-  - handle
-  - layerType 可选  ```'fill' | 'line' | 'label' | 'bubble'``` 默认值 `fill`
 
+参数
+
+- type
+- handle
+- layerType 可选 `'fill' | 'line' | 'label' | 'bubble'` 默认值 `fill`
 
 ```javascript
-  const layer = new CountryLayer();
+const layer = new CountryLayer();
-  layer.on('click',(e)=>{
+layer.on('click', (e) => {
-    console.log(e);
+  console.log(e);
-  })
+});
 ```
 
-
 ### off 移除事件
 
- 参数
+参数
-  - type
-  - handle
-  - layerType 可选  ```'fill' | 'line' | 'label' | 'bubble'``` 默认值 `fill`
 
+- type
+- handle
+- layerType 可选 `'fill' | 'line' | 'label' | 'bubble'` 默认值 `fill`

docs/api/district/drilldown.zh.md

@@ -127,8 +127,8 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
 气泡图配置项
 
 - enable
- `boolean` 是否显示气泡 `true`
+  `boolean` 是否显示气泡 `true`
- 
+
 - shape: AttributeType; 气泡形状支持数据映射
 - size: AttributeType; 气泡大小支持数据映射
 - color: AttributeType; 气泡颜色支持数据映射

docs/api/district/start.en.md

@@ -61,7 +61,6 @@ new WorldLayer(scene, {
 });
 ```
 
-
 ## 简介
 
 District 支持下面几种图

docs/api/draw/start.en.md

@@ -2,4 +2,5 @@
 title: QuickStart
 order: 1
 ---
+
 `markdown:docs/api/draw/start.zh.md`

docs/api/layer/cityBuilding.zh.md

@@ -2,6 +2,7 @@
 title: 城市建筑
 order: 6
 ---
+
 `markdown:docs/common/style.md`
 
 ## 使用

docs/api/layer/layer.en.md

@@ -2,4 +2,5 @@
 title: Base Layer
 order: 0
 ---
+
 `markdown:docs/api/layer/layer.zh.md`

docs/api/react/layer.zh.md

@@ -2,6 +2,7 @@
 title: Layer 组件
 order: 2
 ---
+
 `markdown:docs/common/style.md`
 
 ## Layer 类型
@@ -25,12 +26,14 @@ import { PointLayer } '@antv/l7-react';
 
 ## Layer Props
 
-###  options 图层 配置
+### options 图层 配置
-<description> _layer options_ _ **可选** </description>
+
+<description> _layer options_ \_ **可选** </description>
 
 `markdown:docs/common/layer/options.md`
 
-###  source 图层数据
+### source 图层数据
+
 <description> _sourceOption_ **必选** _default:_ `0`</description>
 
 数据源配置项
@@ -44,20 +47,19 @@ import { PointLayer } '@antv/l7-react';
   source={{
     data: [],
     parser: {
-      type:'geojson'
+      type: 'geojson',
     },
-    transforms:[
+    transforms: [],
-
+  }}
-    ]
-   }
-  }
 />
 ```
 
-###  color 图层颜色
+### color 图层颜色
+
 <description> _attributeOption_ **必选** _default:_ `0`</description>
 
 ### shape 图形形状
+
 <description> _attributeOption_ **必选** _default:_ `0`</description>
 
 ### size 图形大小
@@ -65,20 +67,25 @@ import { PointLayer } '@antv/l7-react';
 <description> _attributeOption_ **必选** </description>
 
 ### select 选中高亮
+
 <description> _interaction option_ **可选** </description>
 
 ### active 滑过高亮
+
 <description> _interaction option_ **可选** </description>
 
 ### animate 动画
+
 <description> _animate Option_ **可选** </description>
 
 ### style 样式
+
 <description> _styleOption_ **可选** </description>
 
 `markdown:docs/common/layer/layer_style.md`
 
-###  scale 度量
+### scale 度量
+
 <description> _scale Option_ **可选** </description>
 
 度量配置项
@@ -101,12 +108,11 @@ const scales = {
 ```
 
 ### onLayerLoaded 图层回调
+
 <description> _Function_ **可选** </description>
 
 获取图层对象方法
 
-
-
 ### attribute Option
 
 color, size, shape 等图形映射通道，通过下面参数配置
@@ -114,11 +120,8 @@ color, size, shape 等图形映射通道，通过下面参数配置
 - field 映射字段，如果是常量设置为 null
 - values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
 
-
 ### scale Option
 
-
-
 ### interaction option
 
 active，select 配置项
@@ -130,11 +133,10 @@ active，select 配置项
 ```jsx
 <PointLayer
   active={{
-    option:{
+    option: {
-      color:'red'
+      color: 'red',
-    }
+    },
-   }
+  }}
-  }
 />
 ```
 

docs/api/source/csv.en.md

@@ -2,4 +2,5 @@
 title: CSV
 order: 3
 ---
+
 `markdown: docs/api/source/csv.zh.md`

examples/line/animate/API.en.md

@@ -1 +1 @@
-`markdown:docs/api/layer/line_layer/linelayer.en.md`
+`markdown:docs/api/layer/line_layer/arc.en.md`

examples/line/animate/API.zh.md

@@ -1,2 +1,2 @@
-`markdown:docs/api/layer/line_layer/linelayer.zh.md`
+`markdown:docs/api/layer/line_layer/arc.zh.md`
 

examples/react/layer/demo/Point_image.tsx

@@ -10,6 +10,9 @@ const World = React.memo(function Map() {
         'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
       );
       const data = await response.json();
+
+
+
       setData(data);
     };
     fetchData();

examples/react/layer/demo/control.tsx

@@ -1,49 +0,0 @@
-import { AMapScene, Control } from '@antv/l7-react';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-const World = React.memo(function Map() {
-  const data = {
-    type: 'FeatureCollection',
-    features: [
-      {
-        type: 'Feature',
-        properties: {},
-        geometry: {
-          type: 'Polygon',
-          coordinates: [
-            [
-              [111.9287109375, 28.22697003891834],
-              [115.6640625, 28.22697003891834],
-              [115.6640625, 31.015278981711266],
-              [111.9287109375, 31.015278981711266],
-              [111.9287109375, 28.22697003891834],
-            ],
-          ],
-        },
-      },
-    ],
-  };
-  return (
-    <AMapScene
-      map={{
-        center: [0.19382669582967, 50.258134],
-        pitch: 0,
-        style: 'dark',
-        zoom: 6,
-      }}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }}
-    >
-      <Control type="zoom" position="topleft" />
-      <Control type="scale" position="bottomleft" />
-    </AMapScene>
-  );
-});
-
-ReactDOM.render(<World />, document.getElementById('map'));

examples/react/layer/demo/marker.tsx

@@ -2,6 +2,7 @@ import { AMapScene, Marker, PointLayer } from '@antv/l7-react';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import './index.less';
+
 const MarkerPinImg = {
   green:
     'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*JhBbT4LvHpQAAAAAAAAAAAAAARQnAQ',
@@ -12,15 +13,38 @@ const MarkerInfo = ({ title }) => {
   return (
     <div className="markerContent">
       <div
-        className="info"
         style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '32px',
+          padding: '0.05rem',
           background: '#1677ff',
+          borderRadius: '44px',
         }}
       >
-        <div className="text">{title}</div>
+        <div
+          style={{
+            color: '#fff',
+            fontSize: '12px',
+          }}
+        >
+          {title}
+        </div>
       </div>
-      <div className="marker-pin">
+      <div
-        <img alt="marker" src={MarkerPinImg.blue} />
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <img
+          style={{
+            width: '20px',
+            height: '30px',
+          }}
+          alt="marker"
+          src={MarkerPinImg.blue}
+        />
       </div>
     </div>
   );
@@ -41,10 +65,10 @@ const World = React.memo(function Map() {
   return (
     <AMapScene
       map={{
-        center: [0.19382669582967, 50.258134],
+        center: [121.4316962, 31.26082325],
         pitch: 0,
         style: 'light',
-        zoom: 6,
+        zoom: 15,
       }}
       style={{
         position: 'absolute',

examples/react/layer/demo/meta.json

@@ -12,17 +12,12 @@
     {
       "filename": "marker.tsx",
       "title": "点标注图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*9sibTJP-FIMAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "popup.tsx",
       "title": "信息窗",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*RWngRL7rZKQAAAAAAAAAAAAAARQnAQ"
     },
-    {
-      "filename": "control.tsx",
-      "title": "组件",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*HQShTKuKq6wAAAAAAAAAAABkARQnAQ"
-    }
   ]
 }

examples/react/layer/demo/popup.tsx

@@ -10,9 +10,10 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 
 const World = React.memo(function Map() {
-  const [popInfo, setPopInfo] = React.useState();
+  const [popupInfo, setPopInfo] = React.useState();
   const hoverHandle = (e) => {
-    setPopInfo(e)
+    console.log(e);
+    setPopInfo(e);
   };
   const hoverOutHandle = () => {
     setPopInfo(undefined);
@@ -41,7 +42,7 @@ const World = React.memo(function Map() {
   return (
     <AMapScene
       map={{
-        center: [0.19382669582967, 50.258134],
+        center: [111.9287109375, 28.22697003891834],
         pitch: 0,
         style: 'dark',
         zoom: 6,
@@ -58,7 +59,7 @@ const World = React.memo(function Map() {
         <PolygonLayer
           key={'2'}
           options={{
-            autoFit: true,
+            autoFit: false,
           }}
           source={{
             data,
@@ -92,13 +93,15 @@ const World = React.memo(function Map() {
           }}
         />,
       ]}
-      <Popup
+      {popupInfo && (
-        key="popup"
+        <Popup
-        lnglat={popupInfo.lnglat}
+          key="popup"
-        option={{ closeButton: false, offsets: [0, 10] }}
+          lnglat={popupInfo.lngLat}
-      >
+          option={{ closeButton: false, offsets: [0, 10] }}
-         <span>这是个信息框</span>
+        >
-      </Popup>
+          <span>这是个信息框</span>
+        </Popup>
+      )}
     </AMapScene>
   );
 });

gatsby-config.js

@@ -268,7 +268,7 @@ module.exports = {
       }
     ],
     playground: {
-      container: '<div style="min-height: 500px; height: 100%; position: relative" id="map"/>',
+      container: '<div style="min-height: 500px; justify-content: center; position: relative" id="map"/>',
       dependencies: {
         '@antv/l7': 'latest',
         '@antv/l7-maps': 'latest'