docs: 修复文档中描述不确切的地方&修复dblclick兼容问题

docs/api/component/control.en.md

@@ -1,96 +1,74 @@
 ---
 title: Control
-order: 1
+order: 3
 ---
 
-# control
-
 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
 
-## 构造函数
+L7 目前支持 Control
 
-```javascript
+- Zoom 放大缩小
-const baseControl = new L7.Control.Base(option);
+- Scale 比例尺
-```
+- Layers 图层列表
+
+## 构造函数
 
 #### option
 
-position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
+position: `string` 控件位置支持是个方位
 
-#### scene 内置地图组件
+- bottomright
+- topright
+- bottomleft,
+- topleft`
 
-zoom 地图放大缩小   默认添加<br />Scale 地图比例尺     默认添加<br />attribution 地图数据属性    默认添加<br />layer 图层列表
+### 组件介绍
 
-**scene 配置项设置控件添加状态**
-
-```javascript
-scene = new L7.scene({
-  zoomControl: true,
-  scaleControl: true,
-  attributionControl: true,
-});
 ```
+import { Scale, Layers, Zoom } from '@antv/l7';
 
-####
+```
 
 #### Zoom
 
-放大缩小组件 默认 左上角
+放大缩小组件 默认左上角
 
 ```javascript
-new L7.Control.Zoom({
+const zoomControl = new Zoom({
   position: 'topleft',
-}).addTo(scene);
+});
+
+scene.addControl(zoomControl);
 ```
 
 #### Scale
 
-比例尺组件默认左下角
+比例尺组件 默认左下角
 
 ```javascript
-new L7.Control.Scale({
+const scaleControl = new Scale({
   position: 'bottomleft',
-}).addTo(scene);
+});
+
+scene.addControl(scaleControl);
 ```
 
-#### attribution
+#### Layers
 
-默认右下角
+图层列表目前支持可视化的图层控制
 
 ```javascript
-new L7.Control.Attribution({
+const overlayers = {
-  position: 'bottomleft',
+  点图层: layer,
-}).addTo(scene);
-```
-
-#### layer
-
-图层列表目前只支持可视化 overlayers 图层控制
-
-```javascript
-var overlayers = {
-  围栏填充: layer,
-  围栏边界: layer2,
 };
-new L7.Control.Layers({
+const layersControl = new Layers({
-  overlayers: overlayers,
+  overlayers,
-}).addTo(scene);
+});
+scene.addControl(layersControl);
 ```
 
 ## 方法
 
-#### onAdd
-
-组件添加到地图 Scene 时调用，自定义组件时需要实现此方法
-
-#### addTo
-
-添加到地图 scene
-
-```javascript
-control.addTo(scene);
-```
-
 #### setPosition
 
 设置组件位置
@@ -106,34 +84,3 @@ control.setPosition('bottomright');
 ```javascript
 control.remove();
 ```
-
-## 示例代码
-
-#### 自定义图例控件
-
-[源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html)
-
-```javascript
-var legend = new L7.Control.Base({
-  position: 'bottomright',
-});
-legend.onAdd = function() {
-  var el = document.createElement('div');
-  el.className = 'infolegend legend';
-  var grades = [0, 8, 15, 30, 65, 120];
-  for (var i = 0; i < grades.length; i++) {
-    el.innerHTML +=
-      '<i style="background:' +
-      colors[i] +
-      '"></i> ' +
-      grades[i] +
-      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
-  }
-  return el;
-};
-legend.addTo(scene);
-```
-
-##
-
-## FAQ

docs/api/component/control.zh.md

@@ -3,7 +3,7 @@ title: Control
 order: 3
 ---
 
-地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
+地图组件用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例、比例尺
 
 L7 目前支持 Control
 
@@ -57,6 +57,22 @@ scene.addControl(scaleControl);
 
 图层列表目前支持可视化的图层控制
 
+配置项
+
+option 控件配置项
+overlayers 将一组图层添加到图层列表，
+overlayers Object
+key: 列表显示的图层名字可以自定义
+layer: 图层对象
+overlayers 示例
+
+```javascript
+  {
+   "图层一"：layer1,
+   "图层二"：layer2,
+  }
+```
+
 ```javascript
 const overlayers = {
   点图层: layer,

docs/api/component/marker.en.md

@@ -62,7 +62,7 @@ scene.addMarker(marker);
 
 #### 默认 Marker
 
-\*\*<br />`const marker = new L7.Marker({color:'blue'})`
+`const marker = new L7.Marker({color:'blue'})`
 
 #### 自定义 Marker
 

docs/api/component/marker.zh.md

@@ -3,7 +3,7 @@ title: Marker
 order: 3
 ---
 
-Marker 地图标注 目前只支持 2D dom 标注
+Marker 地图标注 目前只支持 2D Dom 标注
 
 ## 构造函数
 
@@ -13,7 +13,8 @@ Marker
 
 #### option
 
-- color        `string`   ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色
+- color        `string` 
+  ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色
 - element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
 - anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right
 - offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量

docs/api/component/markerLayer.zh.md

@@ -3,17 +3,18 @@ title: Marker 图层
 order: 3
 ---
 
-MarkerLayer 不同于 PointLayer 图层
+MarkerLayer 是 Marker 的升级版，Marker 是独立的地图标注，MarkerLayer 则是统一管理大量的 Marker 数据。
 
 **技术差异**
 
-- MarkerLayer 地图元素采用 Dom 元素绘制
+- Marker Dom 绘制一个地图元素
+- MarkerLayer 统一管理多个 DomMarker
 - PointLayer 通过 WebGL 绘制元素。
 
 **功能差异**
 
-- MarkerLayer 元素的自定义性比较强，任何 HTML+ CSS 的组合都可可以绘制在地图上。
+- MarkerLayer 元素的自定义性比较强，任何 HTML+ CSS 的组合都可以绘制在地图上。
-- PointLayer 自定义性比较弱，实现成本比较高，优势可以绘制大量的数据，性能比交互。
+- PointLayer 自定义性比较弱，实现成本比较高，优势可以绘制大量的数据，性能比较好。
 
 ## 使用
 

docs/api/component/popup.en.md

@@ -26,7 +26,24 @@ const popup = new L7.Popup(option);
 
 #### setLnglat
 
-设置 popup 的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
+设置 popup 的经纬度位置
+
+**参数**：lnglat
+
+支持数组
+
+```javascript
+[112, 32];
+```
+
+经纬度对象
+
+```javascript
+{
+  lng: 112,
+  lat: 30
+}
+```
 
 ```javascript
 popup.setLnglat([112, 32]);
@@ -49,14 +66,10 @@ popup.addTo(scene);
 设置 popup html 内容
 
 ```javascript
-var html =
+var html = `<p>省份
-  '<p>\u7701\u4EFD\uFF1A' +
+  ${feature.s} </p><p>地区
-  feature.s +
+  ${feature.m}</p><p>数值
-  '</p>\n        <p>\u5730\u533A\uFF1A' +
+  ${feature.t}</p>`;
-  feature.m +
-  '</p>\n        <p>\u6E29\u5EA6\uFF1A' +
-  feature.t +
-  '</p>\n        ';
 popup.setHtml(html);
 ```
 
@@ -66,6 +79,7 @@ popup.setHtml(html);
   区别于 setHtml 对象只能传字符串
 
 **tips**
+
 如果需要将 react 组件渲染到 popup 可以用此方法。
 
 #### setText

docs/api/component/popup.zh.md

@@ -26,7 +26,24 @@ const popup = new L7.Popup(option);
 
 #### setLnglat
 
-设置 popup 的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
+设置 popup 的经纬度位置
+
+**参数**：lnglat
+
+支持数组
+
+```javascript
+[112, 32];
+```
+
+经纬度对象
+
+```javascript
+{
+  lng: 112,
+  lat: 30
+}
+```
 
 ```javascript
 popup.setLnglat([112, 32]);
@@ -49,14 +66,10 @@ popup.addTo(scene);
 设置 popup html 内容
 
 ```javascript
-var html =
+var html = `<p>省份
-  '<p>\u7701\u4EFD\uFF1A' +
+  ${feature.s} </p><p>地区
-  feature.s +
+  ${feature.m}</p><p>数值
-  '</p>\n        <p>\u5730\u533A\uFF1A' +
+  ${feature.t}</p>`;
-  feature.m +
-  '</p>\n        <p>\u6E29\u5EA6\uFF1A' +
-  feature.t +
-  '</p>\n        ';
 popup.setHtml(html);
 ```
 
@@ -66,6 +79,7 @@ popup.setHtml(html);
   区别于 setHtml 对象只能传字符串
 
 **tips**
+
 如果需要将 react 组件渲染到 popup 可以用此方法。
 
 #### setText

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

@@ -23,7 +23,7 @@ import { HeatMapLayer } from '@antv/l7';
 - type  数据聚合类型 grid
 - size  网格半径 单位 米
 - field  聚合字段
-- method 聚合方法  count,max,min,sum,mean5 个统计维度
+- method 聚合方法  count,max,min,sum,mean 5个统计维度
 
 ```javascript
 
@@ -57,7 +57,7 @@ layer.source(data, {
 
 ```javascript
 
-layer.shape(circle);
+layer.shape('circle');
 
 ```
 
@@ -69,7 +69,7 @@ layer.shape(circle);
 - squareColumn,
 
 ```javascript
-layer.shape(cylinder);
+layer.shape('cylinder');
 
 ```
 
@@ -150,7 +150,7 @@ const layer = new HeatmapLayer({})
           '#6BD5A0',
           '#A7ECB2',
           '#D0F4CA'
-        ].reverse()
+        ]
       );
 
     scene.addLayer(layer);

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

@@ -21,7 +21,7 @@ import { HeatMapLayer } from '@antv/l7';
 - type  数据聚合类型 grid
 - size  网格半径 单位 米
 - field  聚合字段
-- method 聚合方法  count,max,min,sum,mean5 个统计维度
+- method 聚合方法  count,max,min,sum,mean 5个统计维度
 
 ```javascript
 
@@ -54,7 +54,7 @@ layer.source(data, {
 - heaxgon 
 
 ```javascript
-layer.shape(circle);
+layer.shape('circle');
 
 ```
 
@@ -66,7 +66,7 @@ layer.shape(circle);
 - squareColumn,
 
 ```javascript
-layer.shape(cylinder);
+layer.shape('cylinder');
 
 ```
 
@@ -146,7 +146,7 @@ const layer = new HeatmapLayer({})
           '#6BD5A0',
           '#A7ECB2',
           '#D0F4CA'
-        ].reverse()
+        ]
       );
 
     scene.addLayer(layer);

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

@@ -18,7 +18,7 @@ import { HeatMapLayer } from '@antv/l7';
 - type  数据聚合类型  hexagon
 - size  网格半径 单位 米
 - field  聚合字段
-- method 聚合方法  count,max,min,sum,mean5 个统计维度
+- method 聚合方法  count,max,min,sum,mean 5个统计维度
 
 ```javascript
 
@@ -51,7 +51,7 @@ layer.source(data, {
 - heaxgon 
 
 ```javascript
-layer.shape(circle);
+layer.shape('circle');
 
 ```
 
@@ -63,7 +63,7 @@ layer.shape(circle);
 - squareColumn,
 
 ```javascript
-layer.shape(cylinder);
+layer.shape('cylinder');
 
 ```
 

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

@@ -23,7 +23,7 @@ import { HeatMapLayer } from '@antv/l7';
 - type  数据聚合类型  hexagon
 - size  网格半径 单位 米
 - field  聚合字段
-- method 聚合方法  count,max,min,sum,mean5 个统计维度
+- method 聚合方法 count,max,min,sum,mean 5个统计维度
 
 ```javascript
 
@@ -56,7 +56,7 @@ layer.source(data, {
 - heaxgon 
 
 ```javascript
-layer.shape(circle);
+layer.shape('circle');
 
 ```
 
@@ -68,7 +68,7 @@ layer.shape(circle);
 - squareColumn,
 
 ```javascript
-layer.shape(cylinder);
+layer.shape('cylinder');
 
 ```
 

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

@@ -39,7 +39,7 @@ layer.size('weight', [0,1])
   - colors  颜色数组
   - positions 数据区间
 
-  :warning: color, position 的长度要相同
+  ⚠️  color, position 的长度要相同
 
 ## 完整代码
 

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

@@ -39,15 +39,13 @@ layer.size('weight', [0,1])
   - colors  颜色数组
   - positions 数据区间
 
-  :warning: color, position 的长度要相同
+  ⚠️  color, position 的长度要相同
 
 ## 完整代码
 
 ```javascript
 
-heatmapLayer({
+heatmapLayer()
-  zIndex: 2,
-})
 .source(data)
 .size('mag', [0, 1]) // weight映射通道
 .style({

docs/api/layer/layer.en.md

@@ -120,7 +120,7 @@ cscle('field', scaleConfig)
 
 ## 视觉编码方法
 
-可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通过，你可以指定数据字段，为不同要素设置不同的图形属性。
+可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通道，你可以指定数据字段，为不同要素设置不同的图形属性。
 
 ### size
 
@@ -324,7 +324,7 @@ layer.show();
 layer.hide();
 ```
 
-### isVisable
+### isVisible
 
 图层是否可见
 
@@ -420,7 +420,7 @@ layer.setSelect(id);
 - x: number 鼠标  在地图位置 x 坐标
 - y: number 鼠标  在地图位置 y 坐标
 - type: string 鼠标事件类型
-- lngLat: ILngLat {lng:number, lat: number }; 鼠标所在位置经纬度
+- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度
 - feature: any; 数据选中的地理要素信息
 - featureId: number | null; 数据选中的地理要素的 ID
 
@@ -495,27 +495,31 @@ layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
 
 ### inited
 
-option
+参数 option
 
-- target ILayer 当前 layer
+- target 当前 layer
 - type 事件类型
 
 图层初始化完成后触发
 
+```javascript
+layer.on('inited', (option) => {});
+```
+
 ### add
 
 图层添加到 scene
 
-option
+参数 option
 
-- target ILayer 当前 layer
+- target 当前 layer
 - type 事件类型
 
 ### remove
 
 图层移除时触发
 
-option
+参数 option
 
-- target ILayer 当前 layer
+- target 当前 layer
 - type 事件类型

docs/api/layer/layer.zh.md

@@ -120,7 +120,7 @@ cscle('field', scaleConfig)
 
 ## 视觉编码方法
 
-可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通过，你可以指定数据字段，为不同要素设置不同的图形属性。
+可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通道，你可以指定数据字段，为不同要素设置不同的图形属性。
 
 ### size
 
@@ -324,7 +324,7 @@ layer.show();
 layer.hide();
 ```
 
-### isVisable
+### isVisible
 
 图层是否可见
 
@@ -420,7 +420,7 @@ layer.setSelect(id);
 - x: number 鼠标  在地图位置 x 坐标
 - y: number 鼠标  在地图位置 y 坐标
 - type: string 鼠标事件类型
-- lngLat: ILngLat {lng:number, lat: number }; 鼠标所在位置经纬度
+- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度
 - feature: any; 数据选中的地理要素信息
 - featureId: number | null; 数据选中的地理要素的 ID
 
@@ -495,27 +495,31 @@ layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
 
 ### inited
 
-option
+参数 option
 
-- target ILayer 当前 layer
+- target 当前 layer
 - type 事件类型
 
 图层初始化完成后触发
 
+```javascript
+layer.on('inited', (option) => {});
+```
+
 ### add
 
 图层添加到 scene
 
-option
+参数 option
 
-- target ILayer 当前 layer
+- target 当前 layer
 - type 事件类型
 
 ### remove
 
 图层移除时触发
 
-option
+参数 option
 
-- target ILayer 当前 layer
+- target 当前 layer
 - type 事件类型

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

@@ -7,7 +7,7 @@ order: 1
 ## 使用
 
 ### 数据
-绘制弧线只需提供起始点坐标即可
+绘制弧线只需提供起止点坐标即可
 
 ```javascript
  source(data, {
@@ -23,7 +23,7 @@ order: 1
 
 ### shape
 
-弧线支持两种弧线算法
+弧线支持三种弧线算法
 
 - arc 绘制弧线 通过贝塞尔曲线算法技术弧线
 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线

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

@@ -7,7 +7,7 @@ order: 1
 ## 使用
 
 ### 数据
-绘制弧线只需提供起始点坐标即可
+绘制弧线只需提供起止点坐标即可
 
 ```javascript
  source(data, {
@@ -23,7 +23,7 @@ order: 1
 
 ### shape
 
-弧线支持两种弧线算法
+弧线支持三种弧线算法
 
 - arc 绘制弧线 通过贝塞尔曲线算法技术弧线
 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线

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

@@ -14,7 +14,7 @@ order: 2
 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
 - arc3d 3d 弧线地图 3D 视角
 
-⚠️ 弧线只需要设置起始点坐标即可
+⚠️ 弧线只需要设置起止点坐标即可
 
 ```
         new LineLayer()

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

@@ -14,7 +14,7 @@ order: 0
 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
 - arc3d 3d 弧线地图 3D 视角
 
-⚠️ 弧线只需要设置起始点坐标即可
+⚠️ 弧线只需要设置起止点坐标即可
 
 ```
         new LineLayer()

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

@@ -31,11 +31,10 @@ order: 5
   
   **getClustersLeaves(id: string)**
   
-    根据id获取聚合节点的数据
+  根据id获取聚合节点的数据，每个聚合节点会有一个唯一ID
 
   - id 聚合数据id
 
-  
 
 
 ```javascript

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

@@ -7,15 +7,14 @@ order: 3
 ## 使用
 
 ### shape
-
  - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
 
 ### color 
 
   - 无权重
-   如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
+   如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
   - 有权重
-    为数据有权重可以设置一组同一色相不同亮度的色带。
+    如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
 
 
 ```javascript

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

@@ -12,9 +12,9 @@ order: 3
 ### color 
 
   - 无权重
-   如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
+   如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
   - 有权重
-    为数据有权重可以设置一组同一色相不同亮度的色带。
+    如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
 
 
 ```javascript

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

@@ -22,7 +22,7 @@ import { PolygonLayer } from '@antv/l7';
 
 PolyonLayer.shape('fill');
 PolyonLayer.shape('line').size(1); // size 表示线宽度
-PolyonLayer.shape('extrude'); // size 表示高度
+PolyonLayer.shape('extrude').size(10); // size 表示高度
 
 ```
 

docs/api/layer/raster_layer.en.md

@@ -37,8 +37,8 @@ import { RasterLayer } from '@antv/l7';
 - domain: [ 0, 8000 ] 数据映射区间
 - noDataValue Number noDataValue 不会显示
 - rampColors: {
-  colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
+  colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ],
   positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
   } // 色带
 
-  :warning: color, position 的长度要相同
+  ⚠️ color, position 的长度要相同

docs/api/layer/raster_layer.zh.md

@@ -37,8 +37,8 @@ import { RasterLayer } from '@antv/l7';
 - domain: [ 0, 8000 ] 数据映射区间
 - noDataValue Number noDataValue 不会显示
 - rampColors: {
-  colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
+  colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ],
   positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
   } // 色带
 
-  :warning: color, position 的长度要相同
+  ⚠️ color, position 的长度要相同

docs/api/map.en.md

@@ -5,8 +5,8 @@ order: 2
 
 # 简介
 
-L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。=
+L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。
-L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。
+L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
 
 ## Map
 

docs/api/map.zh.md

@@ -5,8 +5,8 @@ order: 2
 
 # 简介
 
-L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。=
+L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。
-L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。
+L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
 
 ## Map
 

docs/api/scene.en.md

@@ -214,7 +214,10 @@ scene.setCenter([lng, lat]);
 scene.setZoomAndCenter(zoom, center);
 ```
 
-参数：zoom {number}<br />center {LngLat}
+参数：
+
+- zoom {number}
+- center {LngLat}
 
 ### setRotation
 
@@ -260,7 +263,10 @@ scene.panTo(LngLat);
 scene.panBy(x, y);
 ```
 
-参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y` {number} 垂直方向移动像素 向下为正方向
+参数：
+
+- `x` {number} 水平方向移动像素 向右为正方向
+- `y` {number} 垂直方向移动像素 向下为正方向
 
 ### setPitch
 
@@ -270,11 +276,16 @@ scene.panBy(x, y);
 scene.setPitch(pitch);
 ```
 
-参数 :<br />   `pitch` {number}
+参数 :
+
+`pitch` {number}
 
 ### fitBounds
 
-地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
+地图缩放到某个范围内
+参数 :
+
+- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
 
 ```javascript
 scene.fitBounds([112, 32, 114, 35]);
@@ -298,11 +309,15 @@ scene.removeLayer(layer);
 
 #### 参数
 
-`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
+- `eventName` {string} 事件名
+- `handler` {function } 事件回调函数
 
 ### off
 
-移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
+移除事件监听
+
+- `eventName` {string} 事件名
+- `handler` {function } 事件回调函数
 
 ### 地图事件
 

docs/api/scene.zh.md

@@ -316,11 +316,14 @@ scene.removeLayer(layer);
 
 #### 参数
 
-`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
+`eventName` {string} 事件名
+`handler` {function } 事件回调函数
 
 ### off
 
-移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
+移除事件监听
+`eventName` {string} 事件名
+`handler` {function } 事件回调函数
 
 ### 场景事件
 
@@ -363,7 +366,7 @@ scene.on('mouseover', (ev) => {}); // 鼠标移入地图容器内时触发
 scene.on('mouseout', (ev) => {}); // 鼠标移出地图容器时触发
 scene.on('mouseup', (ev) => {}); // 鼠标在地图上单击抬起时触发
 scene.on('mousedown', (ev) => {}); // 鼠标在地图上单击按下时触发
-scene.on('rightclick', (ev) => {}); // 鼠标右键单击事件
+scene.on('contextmenu', (ev) => {}); // 鼠标右键单击事件
 scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
 scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
 scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发

docs/api/source/csv.en.md

@@ -8,7 +8,7 @@ L7 支持 CSV 以逗号分隔的 CSV 数据加载。
 CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构
 
 - 点数据 需要指定经度，纬度坐标
-- 线段，弧线数据 需要指定 起始点的 经度，纬度坐标
+- 线段，弧线数据 需要指定 起止点的 经度，纬度坐标
 
 ## parser
 

docs/api/source/csv.zh.md

@@ -8,7 +8,7 @@ L7 支持 CSV 以逗号分隔的 CSV 数据加载。
 CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构
 
 - 点数据 需要指定经度，纬度坐标
-- 线段，弧线数据 需要指定 起始点的 经度，纬度坐标
+- 线段，弧线数据 需要指定 起止点的 经度，纬度坐标
 
 ## parser
 

docs/api/source/json.en.md

@@ -27,7 +27,7 @@ json 数据解析使用对应 JSON parser
 
 如果数据是点数据，只需要设置 x,y 字段即可
 
-如果是线段，弧线数据，需要知道起始点坐标既，x,y,x1,y1
+如果是线段，弧线数据，需要知道起止点坐标既，x,y,x1,y1
 
 ```javascript
 layer.source(data, {
@@ -122,7 +122,7 @@ layer.source(data, {
 - x1 `string` 经度
 - x2 `string` 纬度
 
-简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标
+简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起止点坐标
 
 ```javascript
 const data = [

docs/api/source/json.zh.md

@@ -27,7 +27,7 @@ json 数据解析使用对应 JSON parser
 
 如果数据是点数据，只需要设置 x,y 字段即可
 
-如果是线段，弧线数据，需要知道起始点坐标既，x,y,x1,y1
+如果是线段，弧线数据，需要知道起止点坐标既，x,y,x1,y1
 
 ```javascript
 layer.source(data, {
@@ -124,7 +124,7 @@ layer.source(data, {
 - x1 `string` 经度
 - x2 `string` 纬度
 
-简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标
+简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起止点坐标
 
 ```javascript
 const data = [

docs/api/source/source.en.md

@@ -131,4 +131,4 @@ layer.source(data, {
 - type: 'hexagon',
 - size: 网格半径
 - field: 数据统计字段
-- method:聚合方法   count,max,min,sum,mean 5 个统计维度
+- method: 聚合方法   count,max,min,sum,mean 5 个统计维度

docs/api/source/source.zh.md

@@ -111,7 +111,7 @@ tranforms 处理的是的标准化之后的数据
 - type: 'grid',
 - size: 网格半径
 - field: 数据统计字段
-- method:聚合方法   count,max,min,sum,mean5 个统计维度
+- method: 聚合方法  count,max,min,sum,mean 5 个统计维度
 
 ```javascript
 layer.source(data, {

docs/tutorial/data.en.md

@@ -1,5 +1,5 @@
 ---
-title: Data
+title: 数据
 order: 2
 ---
 
@@ -7,7 +7,9 @@ order: 2
 
 目前L7支持的数据格式有GeoJson,CSV,JSon Image
 
-GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
+- GeoJSON 支持点、线、面等所有的标准空间数据格式。
+- CSV 支持点、线段、弧线等数据类型。
+- JSON 支持简单的点、线，面数据类型，不支持多点，多线的，多面数据格式。
 
 
 ## GeoJSON
@@ -55,7 +57,7 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支
 }
 ```
 
-#### 全国行政区划GeoJON 支持省市县维度 
+## 地理统计分析工具
 [turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
 
 ## 在线工具
@@ -63,3 +65,12 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支
 [http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
 
 [https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据
+
+## 数据资源
+
+#### 全国行政区划GeoJON 支持省市县维度 
+[geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
+
+#### HighCharts 全球行政区划数据集
+
+[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/)

docs/tutorial/data.zh.md

@@ -7,7 +7,9 @@ order: 2
 
 目前L7支持的数据格式有GeoJson,CSV,JSon Image
 
-GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
+- GeoJSON 支持点、线、面等所有的标准空间数据格式。
+- CSV 支持点、线段、弧线等数据类型。
+- JSON 支持简单的点、线，面数据类型，不支持多点，多线的，多面数据格式。
 
 
 ## GeoJSON

docs/tutorial/demo.en.md

@@ -1,8 +1,9 @@
 ---
-title: How to start the demo locally
+title: 本地运行demo
 order: 1
 ---
 
+
 ### 一、打开L7demo页面
 
 
@@ -11,7 +12,7 @@ order: 1
 
 <img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bKT5TrlYlGEAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
 
-你可能没有注意，代码区的上方有一排工具按钮，注意了你可能不知道干什么用的。
+你可能没有注意到，代码区的上方有一排工具按钮，。
 
 
 ### 二、打开 codesandbox。
@@ -22,7 +23,7 @@ order: 1
 
 <img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*coZsTLbX2FQAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
 
-你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果
+你发现你进入了一个在线的代码编辑器，在这里面你可以修改代码，并且能够随时看到效果
 
 你可能想说我就想本地跑起来，不想在线修改。
 
@@ -57,6 +58,9 @@ yarn  start
 
 <img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oQQ2RbOzx0oAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
 
+
 现在你可以尽情的本地修改代码，添加自己的图层了。
 
 L7 所有demo都可以在codesandbox 打开，你可以下载代码。
+
+

docs/tutorial/demo.zh.md

@@ -12,7 +12,7 @@ order: 1
 
 <img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bKT5TrlYlGEAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
 
-你可能没有注意，代码区的上方有一排工具按钮，注意了你可能不知道干什么用的。
+你可能没有注意到，代码区的上方有一排工具按钮，。
 
 
 ### 二、打开 codesandbox。
@@ -23,7 +23,7 @@ order: 1
 
 <img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*coZsTLbX2FQAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
 
-你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果
+你发现你进入了一个在线的代码编辑器，在这里面你可以修改代码，并且能够随时看到效果
 
 你可能想说我就想本地跑起来，不想在线修改。
 

docs/tutorial/map/offline.zh.md

@@ -32,7 +32,9 @@ const scene = new Scene({
 - 不使用mapbox token
 
 ### 如何离线化使用MapBox
-你只要不使用MapBox的数据底图服务就可以离线使用，mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源，这些主要是图片标注，文字标注的时候使用。<br />mapbox本身资源在国外如果在国内单独部署一套单独使用，加载速度体验还是很好的
+你只要不使用MapBox的数据底图服务就可以离线使用，mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源，这些主要是图片标注，文字标注的时候使用。
+
+mapbox本身数据资源在国外如果在国内单独部署使用，加载速度体验还是很好的
 
 我们先了解一下MapBox样式包含哪些配置项。
 
@@ -43,7 +45,9 @@ const scene = new Scene({
 - sprite：雪碧图，将一个地图涉及到的所有零星图标图片都包含到一张大图中。
 - glyphs：.pbf格式的字体样式，例如微软雅黑等字体库。
 - sources：图层的资源文件，可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式
-- layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。<br />具体参数及其api可以参考mapbox官网
+- layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。
+
+具体参数及其api可以参考mapbox官网
 
 如果做到本地化只需要 sprite，glyphs 本地化就可以了，地图服务可以加载其他服务。
 

docs/tutorial/quickstart.zh.md

@@ -15,7 +15,7 @@ Current version:  ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7)
 
 Include the L7 JS JavaScript  <head> of your HTML file.
 
-:warning: 如果需要引用第三方地图API，请确保在先引入第三方API，然后引入L7
+⚠️  如果需要引用第三方地图API，请确保在先引入第三方API，然后引入L7
 
 ```html
 <head>

packages/component/src/control/layer.ts

@@ -114,8 +114,6 @@ export default class Layers extends Control {
     if (!collapsed) {
       this.expand();
     }
-    this.expand();
-
     this.baseLayersList = DOM.create('div', className + '-base', form);
     this.separator = DOM.create('div', className + '-separator', form);
     this.overlaysList = DOM.create('div', className + '-overlays', form);

packages/core/src/services/interaction/InteractionService.ts

@@ -20,6 +20,12 @@ export default class InteractionService extends EventEmitter
 
   private hammertime: HammerManager;
 
+  private lastClickTime: number = 0;
+
+  private lastClickXY: number[] = [-1, -1];
+
+  private clickTimer: number;
+
   public init() {
     // 注册事件在地图底图上
     this.addEventListenerOnMap();
@@ -59,7 +65,7 @@ export default class InteractionService extends EventEmitter
       $containter.addEventListener('click', this.onHover);
       $containter.addEventListener('mousedown', this.onHover);
       $containter.addEventListener('mouseup', this.onHover);
-      $containter.addEventListener('dblclick', this.onHover);
+      // $containter.addEventListener('dblclick', this.onHover);
       $containter.addEventListener('contextmenu', this.onHover);
 
       this.hammertime = hammertime;
@@ -75,7 +81,7 @@ export default class InteractionService extends EventEmitter
       $containter.removeEventListener('click', this.onHover);
       $containter.removeEventListener('mousedown', this.onHover);
       $containter.removeEventListener('mouseup', this.onHover);
-      $containter.removeEventListener('dblclick', this.onHover);
+      // $containter.removeEventListener('dblclick', this.onHover);
       $containter.removeEventListener('contextmenu', this.onHover);
     }
   }
@@ -88,6 +94,32 @@ export default class InteractionService extends EventEmitter
       y -= top;
     }
     const lngLat = this.mapService.containerToLngLat([x, y]);
+
+    if (type === 'click') {
+      const nowTime = new Date().getTime();
+      if (
+        nowTime - this.lastClickTime < 500 &&
+        Math.abs(this.lastClickXY[0] - x) < 10 &&
+        Math.abs(this.lastClickXY[1] - y) < 10
+      ) {
+        this.lastClickTime = 0;
+        this.lastClickXY = [-1, -1];
+        if (this.clickTimer) {
+          clearTimeout(this.clickTimer);
+        }
+        type = 'dblclick';
+        this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
+      } else {
+        this.lastClickTime = nowTime;
+        this.lastClickXY = [x, y];
+        this.clickTimer = setTimeout(() => {
+          type = 'click';
+          this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
+        }, 500);
+      }
+      return;
+    }
+
     this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
   };
 }

packages/source/src/source.ts

@@ -138,8 +138,8 @@ export default class Source extends EventEmitter {
     const { type = 'geojson' } = this.parser;
     if (type === 'geojson' && !this.cluster) {
       //  TODO： 聚合图层返回聚合和后的数据
-      return id < this.rawData.features.length
+      return id < this.originData.features.length
-        ? this.rawData.features[id]
+        ? this.originData.features[id]
         : 'null';
     } else {
       return id < this.data.dataArray.length ? this.data.dataArray[id] : 'null';