Merge pull request #114 from antvis/source

fix(parser): fix multipolygom parser

docs/api/component/control.en.md

@@ -2,24 +2,23 @@
 title: Control
 order: 1
 ---
+
 # control
 
 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
 
-
 ## 构造函数
 
 ```javascript
 const baseControl = new L7.Control.Base(option);
 ```
 
-
 #### option
 
- position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
+position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
-
 
 #### scene 内置地图组件
+
 zoom 地图放大缩小   默认添加<br />Scale 地图比例尺     默认添加<br />attribution 地图数据属性    默认添加<br />layer 图层列表
 
 **scene 配置项设置控件添加状态**
@@ -28,111 +27,113 @@ zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添
 scene = new L7.scene({
   zoomControl: true,
   scaleControl: true,
-   attributionControl: true
+  attributionControl: true,
-})
+});
 ```
 
 ####
 
 #### Zoom
+
 放大缩小组件 默认 左上角
 
 ```javascript
 new L7.Control.Zoom({
-      position: 'topleft'
+  position: 'topleft',
 }).addTo(scene);
 ```
 
-
 #### Scale
+
 比例尺组件默认左下角
 
 ```javascript
 new L7.Control.Scale({
-      position: 'bottomleft'
+  position: 'bottomleft',
 }).addTo(scene);
 ```
 
-
 #### attribution
+
 默认右下角
 
 ```javascript
 new L7.Control.Attribution({
-      position: 'bottomleft'
+  position: 'bottomleft',
 }).addTo(scene);
 ```
 
-
 #### layer
+
 图层列表目前只支持可视化 overlayers 图层控制
 
 ```javascript
 var overlayers = {
-        "围栏填充": layer,
+  围栏填充: layer,
-        "围栏边界": layer2
+  围栏边界: layer2,
 };
 new L7.Control.Layers({
-  overlayers: overlayers
+  overlayers: overlayers,
 }).addTo(scene);
 ```
 
-
 ## 方法
 
 #### onAdd
+
 组件添加到地图 Scene 时调用，自定义组件时需要实现此方法
 
-
 #### addTo
+
 添加到地图 scene
 
 ```javascript
 control.addTo(scene);
 ```
 
-
 #### setPosition
+
 设置组件位置
 
 ```javascript
 control.setPosition('bottomright');
 ```
 
-
 #### remove
+
 移除地图组件
 
 ```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'
+  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>' : '+');
+    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

@@ -5,19 +5,16 @@ order: 3
 
 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
 
-
 L7 目前支持 Control
 
 - Zoom 放大缩小
 - Scale 比例尺
 - Layers 图层列表
 
-
 ## 构造函数
 
-
 #### option
- 
+
 position: `string` 控件位置支持是个方位
 
 - bottomright
@@ -25,8 +22,6 @@ L7 目前支持Control
 - bottomleft,
 - topleft`
 
-
-
 ### 组件介绍
 
 ```
@@ -34,67 +29,58 @@ import { Scale Layers, Zoom } from '@antv/l7';
 
 ```
 
-
-
-
 #### Zoom
 
 放大缩小组件 默认 左上角
 
 ```javascript
 const zoomControl = new Zoom({
-      position: 'topleft'
+  position: 'topleft',
-    })
+});
 
 scene.addControl(zoomControl);
-
 ```
 
-
 #### Scale
+
 比例尺组件默认左下角
 
 ```javascript
 const zoomControl = new Zoom({
-      position: 'topleft'
+  position: 'topleft',
-    })
+});
 
 scene.addControl(zoomControl);
-
 ```
 
-
 #### Layers
+
 图层列表目前支持可视化的图层控制
 
 ```javascript
-
 const overlayers = {
-        "点图层": layer,
+  点图层: layer,
-        
 };
 const layersControl = new Layers({
-      overlayers
+  overlayers,
 });
 scene.addControl(layersControl);
-
 ```
 
-
 ## 方法
 
 #### setPosition
+
 设置组件位置
 
 ```javascript
 control.setPosition('bottomright');
 ```
 
-
 #### remove
+
 移除地图组件
 
 ```javascript
 control.remove();
 ```
-

docs/api/component/marker.en.md

@@ -5,24 +5,21 @@ order: 3
 
 Marker 地图标注 目前只支持 2D dom 标注
 
-
 ## 构造函数
+
 Marker
 
 `const Marker = new L7.Marker(option)`
 
-
-
-
 #### option
 
-- color        `string ` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认marker的颜色
+- color        `string` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认 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 的偏移量
 
-
 ### 添加到 Scene
+
 ```javascript
 scene.addMarker(marker);
 ```
@@ -30,35 +27,42 @@ scene.addMarker(marker);
 ## 方法
 
 #### setLnglat
+
 设置 marker 经纬度位置
 
 #### addTo
+
 将 marker 添加到地图 Scene
 
 #### remove
+
 移除 marker
 
 #### getElement
+
 获取 marker dom Element
 
 #### getLngLat
+
 获取 marker 经纬度坐标
 
 #### togglePopup
+
 开启或者关闭 marker 弹出框
 
 #### setPopup
+
 为 marker 设置 popup
 
 #### getPopup
-获取marker弹出框
 
+获取 marker 弹出框
 
 ## 示例代码
 
 #### 默认 Marker
-**<br />` const marker = new L7.Marker({color:'blue'})`
 
+\*\*<br />`const marker = new L7.Marker({color:'blue'})`
 
 #### 自定义 Marker
 
@@ -68,24 +72,22 @@ var el = document.createElement('label');
 el.textContent = data[i].v;
 el.style.background = getColor(data[i].v);
 new L7.Marker({
-         element: el
+  element: el,
 })
   .setLnglat([data[i].x * 1, data[i].y])
   .addTo(scene);
 ```
 
-
 #### 设置 popup
 
 ```javascript
 var popup = new L7.Popup({
-          anchor: 'left'
+  anchor: 'left',
 }).setText(item.name);
 
 new L7.Marker({
-  element: el
+  element: el,
-}).setLnglat(item.coordinates)
+})
-  .setPopup(popup)
+  .setLnglat(item.coordinates)
+  .setPopup(popup);
 ```
-
-

docs/api/component/marker.zh.md

@@ -5,51 +5,56 @@ order: 3
 
 Marker 地图标注 目前只支持 2D dom 标注
 
-
 ## 构造函数
-Marker<br />`const Marker = new L7.Marker(option)`
 
+Marker<br />`const Marker = new L7.Marker(option)`
 
 #### option
 
-- color        `string `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色
+- color        `string`   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32)  设置默认 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 的偏移量
 
-
 ## 方法
 
 #### setLnglat
+
 设置 marker 经纬度位置
 
 #### addTo
+
 将 marker 添加到地图 Scene
 
 #### remove
+
 移除 marker
 
 #### getElement
+
 获取 marker dom Element
 
 #### getLngLat
+
 获取 marker 经纬度坐标
 
 #### togglePopup
+
 开启或者关闭 marker 弹出框
 
 #### setPopup
+
 为 marker 设置 popup
 
 #### getPopup
-获取marker弹出框
 
+获取 marker 弹出框
 
 ## 示例代码
 
 #### 默认 Marker
-**<br />` const marker = new L7.Marker({color:'blue'})`
 
+\*\*<br />`const marker = new L7.Marker({color:'blue'})`
 
 #### 自定义 Marker
 
@@ -59,25 +64,23 @@ var el = document.createElement('label');
 el.textContent = data[i].v;
 el.style.background = getColor(data[i].v);
 new L7.Marker({
-         element: el
+  element: el,
 })
   .setLnglat([data[i].x * 1, data[i].y])
   .addTo(scene);
 ```
 
-
 #### 设置 popup
 
 ```javascript
 var popup = new L7.Popup({
-          anchor: 'left'
+  anchor: 'left',
 }).setText(item.name);
 
 new L7.Marker({
-  element: el
+  element: el,
-}).setLnglat(item.coordinates)
+})
+  .setLnglat(item.coordinates)
   .setPopup(popup)
   .addTo(scene);
 ```
-
-

docs/api/component/popup.en.md

@@ -2,19 +2,19 @@
 title: Popup
 order: 4
 ---
+
 # popup
 
 地图标注信息窗口，用于展示地图要素的属性信息
 
-
 ## 构造函数
+
 Popup
 
 ```javascript
-const popup = new L7.Popup(option)
+const popup = new L7.Popup(option);
 ```
 
-
 #### option
 
 - closeButton
@@ -22,18 +22,18 @@ const popup = new L7.Popup(option)
 - maxWidth
 - anchor
 
-
 ## 方法
 
 #### setLnglat
+
 设置 popup 的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
 
 ```javascript
 popup.setLnglat([112, 32]);
 ```
 
-
 #### addTo
+
 **参数**：scene 地图 scene 实例
 
 将 popup 添加到地图 scene 显示
@@ -42,44 +42,48 @@ popup.setLnglat([112, 32]);
 popup.addTo(scene);
 ```
 
-
 #### setHtml
+
 **参数**：html 字符串
 
 设置 popup html 内容
 
 ```javascript
-var html = '<p>\u7701\u4EFD\uFF1A' + feature.s + '</p>\n        <p>\u5730\u533A\uFF1A' + feature.m + '</p>\n        <p>\u6E29\u5EA6\uFF1A' + feature.t + '</p>\n        ';
+var html =
+  '<p>\u7701\u4EFD\uFF1A' +
+  feature.s +
+  '</p>\n        <p>\u5730\u533A\uFF1A' +
+  feature.m +
+  '</p>\n        <p>\u6E29\u5EA6\uFF1A' +
+  feature.t +
+  '</p>\n        ';
 popup.setHtml(html);
-
 ```
 
-
 #### setText
+
 设置 popup 显示文本内容
 
 ```javascript
 popup.setText('hello world');
 ```
 
-
 #### remove
+
 移除 popup
 
 ```javascript
-popup.remove()
+popup.remove();
 ```
 
-
 ## 事件
 
 #### close
 
 ```javascript
-popup.on('close',()=>{})
+popup.on('close', () => {});
 ```
 
-
 ## 示例代码
 
 #### 添加 popup

docs/api/component/popup.zh.md

@@ -2,19 +2,19 @@
 title: popup
 order: 0
 ---
+
 # popup
 
 地图标注信息窗口，用于展示地图要素的属性信息
 
-
 ## 构造函数
+
 Popup
 
 ```javascript
-const popup = new L7.Popup(option)
+const popup = new L7.Popup(option);
 ```
 
-
 #### option
 
 - closeButton
@@ -22,18 +22,18 @@ const popup = new L7.Popup(option)
 - maxWidth
 - anchor
 
-
 ## 方法
 
 #### setLnglat
+
 设置 popup 的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
 
 ```javascript
 popup.setLnglat([112, 32]);
 ```
 
-
 #### addTo
+
 **参数**：scene 地图 scene 实例
 
 将 popup 添加到地图 scene 显示
@@ -42,44 +42,48 @@ popup.setLnglat([112, 32]);
 popup.addTo(scene);
 ```
 
-
 #### setHtml
+
 **参数**：html 字符串
 
 设置 popup html 内容
 
 ```javascript
-var html = '<p>\u7701\u4EFD\uFF1A' + feature.s + '</p>\n        <p>\u5730\u533A\uFF1A' + feature.m + '</p>\n        <p>\u6E29\u5EA6\uFF1A' + feature.t + '</p>\n        ';
+var html =
+  '<p>\u7701\u4EFD\uFF1A' +
+  feature.s +
+  '</p>\n        <p>\u5730\u533A\uFF1A' +
+  feature.m +
+  '</p>\n        <p>\u6E29\u5EA6\uFF1A' +
+  feature.t +
+  '</p>\n        ';
 popup.setHtml(html);
-
 ```
 
-
 #### setText
+
 设置 popup 显示文本内容
 
 ```javascript
 popup.setText('hello world');
 ```
 
-
 #### remove
+
 移除 popup
 
 ```javascript
-popup.remove()
+popup.remove();
 ```
 
-
 ## 事件
 
 #### close
 
 ```javascript
-popup.on('close',()=>{})
+popup.on('close', () => {});
 ```
 
-
 ## 示例代码
 
 #### 添加 popup

docs/api/layer/heatmap.en.md

@@ -5,10 +5,10 @@ order: 5
 
 # heatmapLayer
 
-
 ### 简介
 
 热力图图层，包含三种类型的，
+
 - 方格热力图
 
 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
@@ -19,8 +19,6 @@ order: 5
 
 - 经典热力图
 
-
-
 ⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法
 
 ### source
@@ -58,12 +56,11 @@ layer.source(data, {
 不同类型热力图 shape 支持
 
 |              | 2D                             | 3d                                                |
-| --- | --- | --- |
+| ------------ | ------------------------------ | ------------------------------------------------- |
 | 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
 | 蜂窝热力图   | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon                    |
 | 普通热力图   | heatmap                        | heatmap                                           |
 
-
 热力图布局下只 shape 方法只支持常量的可视化。
 
 ```javascript
@@ -73,6 +70,7 @@ HeatmapLayer.shape('hexagon');
 ```
 
 ### size
+
 当前版本 shape 为 grid，hexagon 不需要设置 size 映射
 
 default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
@@ -83,17 +81,15 @@ default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com
 - values: 数据映射区间 热力图显示 [0, 1] 效果最佳
 
 ```javascript
-HeatmapLayer.size ('field', [0, 1])
+HeatmapLayer.size('field', [0, 1]);
 ```
 
-
 ### color
+
 default heatMap 类型不需设置 color 映射
 
 color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
 
-
-
 ### style
 
 grid hexagon 可以通过 style 设置透明度
@@ -111,13 +107,19 @@ default热力图需要通过style配置参数热力图参数
   intensity: 3,
   radius: 20,
   rampColors: {
-        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
+    colors: [
-        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+      'rgba(33,102,172,0.0)',
-      }
+      'rgb(103,169,207)',
-    })
+      'rgb(209,229,240)',
+      'rgb(253,219,199)',
+      'rgb(239,138,98)',
+      'rgb(178,24,43,1.0)',
+    ],
+    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+  },
+});
 ```
 
-
 ### 完整代码示例
 
 #### 普通热力图
@@ -126,7 +128,7 @@ default热力图需要通过style配置参数热力图参数
 // 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
 
 HeatmapLayer({
-      zIndex: 2
+  zIndex: 2,
 })
   .source(data)
   .size('mag', [0, 1]) // weight映射通道
@@ -134,53 +136,65 @@ default热力图需要通过style配置参数热力图参数
     intensity: 3,
     radius: 20,
     rampColors: {
-        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
+      colors: [
-        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+        'rgba(33,102,172,0.0)',
-      }
+        'rgb(103,169,207)',
-    })
+        'rgb(209,229,240)',
+        'rgb(253,219,199)',
+        'rgb(239,138,98)',
+        'rgb(178,24,43,1.0)',
+      ],
+      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+    },
+  });
 ```
 
-
-
 #### 网格热力图
 
 ```javascript
-var layer = scene.HeatmapLayer({
+var layer = scene
-      zIndex: 2
+  .HeatmapLayer({
+    zIndex: 2,
   })
   .source(data, {
     parser: {
       type: 'csv',
       x: 'lng',
-        y: 'lat'
+      y: 'lat',
     },
     transforms: [
-        
       {
         type: 'grid',
         size: 15000,
         field: 'v',
-        method:'sum'
+        method: 'sum',
-      }
+      },
-      ]
+    ],
   })
   .shape('grid')
   .style({
-      coverage: 0.8
+    coverage: 0.8,
   })
-    .color('count', 
+  .color('count', [
-    ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+    '#002466',
-
+    '#105CB3',
+    '#2894E0',
+    '#CFF6FF',
+    '#FFF5B8',
+    '#FFAB5C',
+    '#F27049',
+    '#730D1C',
+  ]);
 ```
 
-
 #### 六边形热力图
 
 ```javascript
- var layer = scene.HeatmapLayer({
+var layer = scene
-      zIndex: 2
+  .HeatmapLayer({
-    }).
+    zIndex: 2,
-   souce(data,{
+  })
+  .souce(data, {
     parser: {
       type: 'csv',
       x: lng,
@@ -192,14 +206,14 @@ var layer = scene.HeatmapLayer({
         size: 1500,
         field: 'count',
         operation: 'sum',
-     }
+      },
-   ] 
+    ],
   })
   .shape('hexgon')
   .size(1000)
   .color('sum')
   .style({
-    coverage:0.8
+    coverage: 0.8,
-  })
+  });
-render()
+render();
 ```

docs/api/layer/heatmap.zh.md

@@ -2,12 +2,13 @@
 title: HeatmapLayer
 order: 5
 ---
-# heatmapLayer
 
+# heatmapLayer
 
 ### 简介
 
 热力图图层，包含三种类型的，
+
 - 方格热力图
 
 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
@@ -18,8 +19,6 @@ order: 5
 
 - 经典热力图
 
-
-
 ⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法
 
 ### source
@@ -57,12 +56,11 @@ layer.source(data, {
 不同类型热力图 shape 支持
 
 |              | 2D                             | 3d                                                |
-| --- | --- | --- |
+| ------------ | ------------------------------ | ------------------------------------------------- |
 | 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
 | 蜂窝热力图   | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon                    |
 | 普通热力图   | heatmap                        | heatmap                                           |
 
-
 热力图布局下只 shape 方法只支持常量的可视化。
 
 ```javascript
@@ -72,6 +70,7 @@ HeatmapLayer.shape('hexagon');
 ```
 
 ### size
+
 当前版本 shape 为 grid，hexagon 不需要设置 size 映射
 
 default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
@@ -82,17 +81,15 @@ default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com
 - values: 数据映射区间 热力图显示 [0, 1] 效果最佳
 
 ```javascript
-HeatmapLayer.size ('field', [0, 1])
+HeatmapLayer.size('field', [0, 1]);
 ```
 
-
 ### color
+
 default heatMap 类型不需设置 color 映射
 
 color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
 
-
-
 ### style
 
 grid hexagon 可以通过 style 设置透明度
@@ -110,13 +107,19 @@ default热力图需要通过style配置参数热力图参数
   intensity: 3,
   radius: 20,
   rampColors: {
-        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
+    colors: [
-        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+      'rgba(33,102,172,0.0)',
-      }
+      'rgb(103,169,207)',
-    })
+      'rgb(209,229,240)',
+      'rgb(253,219,199)',
+      'rgb(239,138,98)',
+      'rgb(178,24,43,1.0)',
+    ],
+    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+  },
+});
 ```
 
-
 ### 完整代码示例
 
 #### 普通热力图
@@ -125,7 +128,7 @@ default热力图需要通过style配置参数热力图参数
 // 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
 
 HeatmapLayer({
-      zIndex: 2
+  zIndex: 2,
 })
   .source(data)
   .size('mag', [0, 1]) // weight映射通道
@@ -133,53 +136,65 @@ default热力图需要通过style配置参数热力图参数
     intensity: 3,
     radius: 20,
     rampColors: {
-        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
+      colors: [
-        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+        'rgba(33,102,172,0.0)',
-      }
+        'rgb(103,169,207)',
-    })
+        'rgb(209,229,240)',
+        'rgb(253,219,199)',
+        'rgb(239,138,98)',
+        'rgb(178,24,43,1.0)',
+      ],
+      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+    },
+  });
 ```
 
-
-
 #### 网格热力图
 
 ```javascript
-var layer = scene.HeatmapLayer({
+var layer = scene
-      zIndex: 2
+  .HeatmapLayer({
+    zIndex: 2,
   })
   .source(data, {
     parser: {
       type: 'csv',
       x: 'lng',
-        y: 'lat'
+      y: 'lat',
     },
     transforms: [
-        
       {
         type: 'grid',
         size: 15000,
         field: 'v',
-        method:'sum'
+        method: 'sum',
-      }
+      },
-      ]
+    ],
   })
   .shape('grid')
   .style({
-      coverage: 0.8
+    coverage: 0.8,
   })
-    .color('count', 
+  .color('count', [
-    ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+    '#002466',
-
+    '#105CB3',
+    '#2894E0',
+    '#CFF6FF',
+    '#FFF5B8',
+    '#FFAB5C',
+    '#F27049',
+    '#730D1C',
+  ]);
 ```
 
-
 #### 六边形热力图
 
 ```javascript
- var layer = scene.HeatmapLayer({
+var layer = scene
-      zIndex: 2
+  .HeatmapLayer({
-    }).
+    zIndex: 2,
-   souce(data,{
+  })
+  .souce(data, {
     parser: {
       type: 'csv',
       x: lng,
@@ -198,7 +213,7 @@ var layer = scene.HeatmapLayer({
   .size(1000)
   .color('sum')
   .style({
-    coverage:0.8
+    coverage: 0.8,
-  })
+  });
-render()
+render();
 ```

docs/api/layer/imagelayer.en.md

@@ -2,9 +2,11 @@
 title: ImageLayer
 order: 5
 ---
+
 # ImageLayer
 
 ## 简介
+
 将图片添加到地图上，需要指定图片的经纬度范围
 
 ### 代码示例
@@ -16,8 +18,8 @@ layer.source(
   {
     parser: {
       type: 'image',
-      extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
+      extent: [121.168, 30.2828, 121.384, 30.4219],
-    }
+    },
-  }
+  },
 );
 ```

docs/api/layer/imagelayer.zh.md

@@ -2,9 +2,11 @@
 title: ImageLayer
 order: 5
 ---
+
 # ImageLayer
 
 ## 简介
+
 将图片添加到地图上，需要指定图片的经纬度范围
 
 ### 代码示例
@@ -16,8 +18,8 @@ layer.source(
   {
     parser: {
       type: 'image',
-      extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
+      extent: [121.168, 30.2828, 121.384, 30.4219],
-    }
+    },
-  }
+  },
 );
 ```

docs/api/layer/layer.en.md

@@ -2,10 +2,11 @@
 title: Map Layer
 order: 0
 ---
+
 # Layer
 
-
 ## 简介
+
 L7 Layer 接口设计遵循图形语法，在可视表达上
 
 语法示例
@@ -16,27 +17,28 @@ new Layer(option)
   .color()
   .size()
   .shape()
-.style()
+  .style();
-
 ```
 
-
 ## 构造函数
 
-
 ## 配置项
 
 ### visable
+
 图层是否可见   {bool } default true
 
 ### zIndex
- 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级  {int}   default 0
+
+图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0
+
 ### minZoom
+
 图层显示最小缩放等级，（0-18）   {number}  default 0
 
 ### maxZoom
- 图层显示最大缩放等级 （0-18）   {number}  default 18
 
+图层显示最大缩放等级 （0-18）   {number}  default 18
 
 ## 鼠标事件
 
@@ -52,32 +54,30 @@ layer.on('mouseup', (ev)=>{});         // 鼠标在图层上单击抬起时触
 layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
 layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
 layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
-
 ```
 
-
 ## 方法
 
 ### source
+
 数据源为 layer 设置数据 source(data,config)
 
 - data {geojson|json|csv}
 
-
+源数据
-       源数据
 
 - config   可选   数据源配置项
   - parser 数据解析，默认是解析层 geojson
   - transforms [transform，transform ]  数据处理转换 可设置多个
 
- parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source)
+parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
 
 ```javascript
 layer.source(data, {
   parser: {
     type: 'csv',
     x: 'lng',
-        y: 'lat'
+    y: 'lat',
   },
   transforms: [
     {
@@ -89,48 +89,43 @@ layer.source(data, {
         item.v = item.v * 1;
         item.coordinates = [x * 1, y * 1];
         return item;
-          }
+      },
-
     },
     {
       type: 'hexagon',
       size: 6000,
       field: 'v',
-          method:'sum'
+      method: 'sum',
-       }
+    },
-      ]
+  ],
-    })
+});
 ```
 
 ###
 
 ### scale
 
-
 cscle('field', scaleConfig)
 
 (field: string, scaleConfig: object)
 
 为指定的数据字段进行列定义，返回 layer 实例。
 
-
-
 - `field` 字段名。
 
 - `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
 
 ```javascript
 {
-  type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize
+  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize
 }
-
 ```
 
 ### size
 
 将数据值映射到图形的大小上的方法。
 
-**注意：** 
+**注意：**
 
 不同图层的 size 的含义有所差别：
 
@@ -140,13 +135,12 @@ cscle('field', scaleConfig)
 
 - polygon size 影响的是高度
 
-
-
 ```javascript
 pointLayer.size(10); // 常量
 pointLayer.size('type'); // 使用字段映射到大小
 pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
-pointLayer.size('type', (type) => { // 回调函数
+pointLayer.size('type', (type) => {
+  // 回调函数
   if (type === 'a') {
     return 10;
   }
@@ -154,15 +148,16 @@ pointLayer.size('type', (type) => { // 回调函数
 });
 ```
 
-
 #### size(value）
 
 传入数字常量，如  `pointLayer.size(20)`
 
 #### size(field)
+
 根据 field 字段的值映射大小，使用默认的`最大值 max:10`  和`最小值 min: 1`。
 
 #### size(field, callback)
+
 使用回调函数控制图形大小。
 
 - `callback`: function 回调函数。
@@ -183,14 +178,16 @@ pointLayer.size('age', (value) => {
 ```javascript
 layer.color('red'); // 常量颜色
 layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
-layer.color('type', [ 'red', 'blue' ]) // 指定颜色
+layer.color('type', ['red', 'blue']); // 指定颜色
-layer.color('type', (type) => { // 通过回调函数
+layer.color('type', (type) => {
+  // 通过回调函数
   if (type === 'a') {
     return 'red';
   }
   return 'blue';
 });
-layer.color('type*value', (type, value) => { //多个参数，通过回调函数
+layer.color('type*value', (type, value) => {
+  //多个参数，通过回调函数
   if (type === 'a' && value > 100) {
     return 'red';
   }
@@ -198,10 +195,8 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
 });
 ```
 
-
 #### color(value)
 
-
 参数：`value` ：string
 只支持接收一个参数，value 可以是：
 
@@ -209,13 +204,12 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
 
 - 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
 
-
 示例
-```javascript
-layer.color('name') // 映射数据字段
-layer.color('white') // 指定颜色
-```
 
+```javascript
+layer.color('name'); // 映射数据字段
+layer.color('white'); // 指定颜色
+```
 
 #### color(field, colors)
 
@@ -223,8 +217,7 @@ layer.color('white') // 指定颜色
 
 - `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
 
--  `colors`: string | array | function
+- `colors`: string | array | function
-
 
 colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
 
@@ -235,24 +228,23 @@ layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
 
 - colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
 
-
-
 ```javascript
 layer.color('gender', (value) => {
   if (value === 1) {
-    return 'red'
+    return 'red';
   }
   return 'blue';
 });
 layer.color('gender*age', (gender, age) => {
   if (age === 20 && gender == ' 男') {
-    return 'red'
+    return 'red';
   }
   return 'blue';
 });
 ```
 
 ### shape
+
 将数据值映射到图形的形状上的方法。
 
 **shape(shape)**
@@ -262,17 +254,15 @@ layer.color('gender*age', (gender, age) => {
 只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
 
 | layer 类型 | shape 类型                                                                             | 备注 |
-| --- | --- | --- |
+| ---------- | -------------------------------------------------------------------------------------- | ---- |
 | point      | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square |      |
 | line       | line,arc, arc3d, greatcircle                                                           |      |
 | polygon    | fill,line, extrude                                                                     |      |
 
-
 **shape(field, shapes)**
 
 **shape(field, callback)**
 
-
 ### style
 
 用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
@@ -285,24 +275,22 @@ layer.color('gender*age', (gender, age) => {
 
 - strokeWidth 线的宽度
 
-
 ```javascript
 layer.style({
   fill: 'red',
   opacity: 0.8,
-    stroke:'white'
+  stroke: 'white',
-})
+});
 ```
 
-
 ### show
+
 图层显示
 
 ```javascript
 layer.show();
 ```
 
-
 ### hide
 
 图层隐藏
@@ -311,12 +299,10 @@ layer.show();
 layer.hide();
 ```
 
-
 ### fitBounds
 
 缩放到图层范围
 
 ```javascript
-layer.fitBounds()
+layer.fitBounds();
-
 ```

docs/api/layer/layer.zh.md

@@ -2,10 +2,11 @@
 title: Layer
 order: 0
 ---
+
 # Layer
 
-
 ## 简介
+
 L7 Layer 接口设计遵循图形语法，在可视表达上
 
 语法示例
@@ -16,27 +17,28 @@ new Layer(option)
   .color()
   .size()
   .shape()
-.style()
+  .style();
-
 ```
 
-
 ## 构造函数
 
-
 ## 配置项
 
 ### visable
+
 图层是否可见   {bool } default true
 
 ### zIndex
- 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级  {int}   default 0
+
+图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0
+
 ### minZoom
+
 图层显示最小缩放等级，（0-18）   {number}  default 0
 
 ### maxZoom
- 图层显示最大缩放等级 （0-18）   {number}  default 18
 
+图层显示最大缩放等级 （0-18）   {number}  default 18
 
 ## 鼠标事件
 
@@ -52,32 +54,30 @@ layer.on('mouseup', (ev)=>{});         // 鼠标在图层上单击抬起时触
 layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
 layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
 layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
-
 ```
 
-
 ## 方法
 
 ### source
+
 数据源为 layer 设置数据 source(data,config)
 
 - data {geojson|json|csv}
 
-
+源数据
-       源数据
 
 - config   可选   数据源配置项
   - parser 数据解析，默认是解析层 geojson
   - transforms [transform，transform ]  数据处理转换 可设置多个
 
- parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source)
+parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
 
 ```javascript
 layer.source(data, {
   parser: {
     type: 'csv',
     x: 'lng',
-        y: 'lat'
+    y: 'lat',
   },
   transforms: [
     {
@@ -89,48 +89,43 @@ layer.source(data, {
         item.v = item.v * 1;
         item.coordinates = [x * 1, y * 1];
         return item;
-          }
+      },
-
     },
     {
       type: 'hexagon',
       size: 6000,
       field: 'v',
-          method:'sum'
+      method: 'sum',
-       }
+    },
-      ]
+  ],
-    })
+});
 ```
 
 ###
 
 ### scale
 
-
 cscle('field', scaleConfig)
 
 (field: string, scaleConfig: object)
 
 为指定的数据字段进行列定义，返回 layer 实例。
 
-
-
 - `field` 字段名。
 
 - `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
 
 ```javascript
 {
-  type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize
+  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize
 }
-
 ```
 
 ### size
 
 将数据值映射到图形的大小上的方法。
 
-**注意：** 
+**注意：**
 
 不同图层的 size 的含义有所差别：
 
@@ -140,13 +135,12 @@ cscle('field', scaleConfig)
 
 - polygon size 影响的是高度
 
-
-
 ```javascript
 pointLayer.size(10); // 常量
 pointLayer.size('type'); // 使用字段映射到大小
 pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
-pointLayer.size('type', (type) => { // 回调函数
+pointLayer.size('type', (type) => {
+  // 回调函数
   if (type === 'a') {
     return 10;
   }
@@ -154,15 +148,16 @@ pointLayer.size('type', (type) => { // 回调函数
 });
 ```
 
-
 #### size(value）
 
 传入数字常量，如  `pointLayer.size(20)`
 
 #### size(field)
+
 根据 field 字段的值映射大小，使用默认的`最大值 max:10`  和`最小值 min: 1`。
 
 #### size(field, callback)
+
 使用回调函数控制图形大小。
 
 - `callback`: function 回调函数。
@@ -183,14 +178,16 @@ pointLayer.size('age', (value) => {
 ```javascript
 layer.color('red'); // 常量颜色
 layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
-layer.color('type', [ 'red', 'blue' ]) // 指定颜色
+layer.color('type', ['red', 'blue']); // 指定颜色
-layer.color('type', (type) => { // 通过回调函数
+layer.color('type', (type) => {
+  // 通过回调函数
   if (type === 'a') {
     return 'red';
   }
   return 'blue';
 });
-layer.color('type*value', (type, value) => { //多个参数，通过回调函数
+layer.color('type*value', (type, value) => {
+  //多个参数，通过回调函数
   if (type === 'a' && value > 100) {
     return 'red';
   }
@@ -198,10 +195,8 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
 });
 ```
 
-
 #### color(value)
 
-
 参数：`value` ：string
 只支持接收一个参数，value 可以是：
 
@@ -209,13 +204,12 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
 
 - 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
 
-
 示例
-```javascript
-layer.color('name') // 映射数据字段
-layer.color('white') // 指定颜色
-```
 
+```javascript
+layer.color('name'); // 映射数据字段
+layer.color('white'); // 指定颜色
+```
 
 #### color(field, colors)
 
@@ -223,8 +217,7 @@ layer.color('white') // 指定颜色
 
 - `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
 
--  `colors`: string | array | function
+- `colors`: string | array | function
-
 
 colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
 
@@ -235,24 +228,23 @@ layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
 
 - colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
 
-
-
 ```javascript
 layer.color('gender', (value) => {
   if (value === 1) {
-    return 'red'
+    return 'red';
   }
   return 'blue';
 });
 layer.color('gender*age', (gender, age) => {
   if (age === 20 && gender == ' 男') {
-    return 'red'
+    return 'red';
   }
   return 'blue';
 });
 ```
 
 ### shape
+
 将数据值映射到图形的形状上的方法。
 
 **shape(shape)**
@@ -262,17 +254,15 @@ layer.color('gender*age', (gender, age) => {
 只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
 
 | layer 类型 | shape 类型                                                                             | 备注 |
-| --- | --- | --- |
+| ---------- | -------------------------------------------------------------------------------------- | ---- |
 | point      | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square |      |
 | line       | line,arc, arc3d, greatcircle                                                           |      |
 | polygon    | fill,line, extrude                                                                     |      |
 
-
 **shape(field, shapes)**
 
 **shape(field, callback)**
 
-
 ### style
 
 用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
@@ -285,24 +275,22 @@ layer.color('gender*age', (gender, age) => {
 
 - strokeWidth 线的宽度
 
-
 ```javascript
 layer.style({
   fill: 'red',
   opacity: 0.8,
-    stroke:'white'
+  stroke: 'white',
-})
+});
 ```
 
-
 ### show
+
 图层显示
 
 ```javascript
 layer.show();
 ```
 
-
 ### hide
 
 图层隐藏
@@ -311,12 +299,10 @@ layer.show();
 layer.hide();
 ```
 
-
 ### fitBounds
 
 缩放到图层范围
 
 ```javascript
-layer.fitBounds()
+layer.fitBounds();
-
 ```

docs/api/layer/linelayer.en.md

@@ -2,6 +2,7 @@
 title: LineLayer
 order: 2
 ---
+
 ## 线图层
 
 ### shape
@@ -29,6 +30,7 @@ order: 2
 ```
 
 如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
+
 ```
 {
   "type": "FeatureCollection",
@@ -63,10 +65,6 @@ order: 2
 - size 类型为 [number , number] 分别表示宽度和高度
 
 ```javascript
-
 lineLayer.size(1); // 线的宽度为 1
 lineLayer.size([1, 2]); // 宽度为1，高度2
-
 ```
-
-

docs/api/layer/linelayer.zh.md

@@ -2,6 +2,7 @@
 title: LineLayer
 order: 2
 ---
+
 ## 线图层
 
 ### shape
@@ -29,6 +30,7 @@ order: 2
 ```
 
 如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
+
 ```
 {
   "type": "FeatureCollection",
@@ -63,10 +65,6 @@ order: 2
 - size 类型为 [number , number] 分别表示宽度和高度
 
 ```javascript
-
 lineLayer.size(1); // 线的宽度为 1
 lineLayer.size([1, 2]); // 宽度为1，高度2
-
 ```
-
-

docs/api/layer/pointlayer.en.md

@@ -2,10 +2,11 @@
 title: PointLayer
 order: 1
 ---
+
 # PointLayer
 
-
 ## 简介
+
 点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
 
 shape 支持
@@ -26,19 +27,17 @@ shape 支持
 
 **图片标注**
 
-通过 ```Scene.addImage()``` 可以添加图片资源， 
+通过 `Scene.addImage()` 可以添加图片资源，
-
 
 ### 代码示例
 
-
 #### 基本图形显示示例
 
 ```javascript
-import { PointLayer } from "@antv/l7"
+import { PointLayer } from '@antv/l7';
 
 const layer = PointLayer({
-      zIndex: 2
+  zIndex: 2,
 })
   .source(data.list, {
     type: 'array',
@@ -47,31 +46,35 @@ const layer = PointLayer({
   })
   .shape('cylinder')
   .size('t', (level) => {
-      return [4,4,(level+40)];
+    return [4, 4, level + 40];
   })
-    .color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+  .color('t', [
-
+    '#002466',
+    '#105CB3',
+    '#2894E0',
+    '#CFF6FF',
+    '#FFF5B8',
+    '#FFAB5C',
+    '#F27049',
+    '#730D1C',
+  ]);
 ```
 
-
 #### 符号图
 
 使用图片添加地图标注
 
 ```javascript
-
+scene.addImage(
-scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
+  'local',
-
+  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',
+);
 
 const layer = new PointLayer({
-      zIndex: 4
+  zIndex: 4,
 })
   .source(city)
   .size(20.0)
   .shape('local')
-    .color('#0D408C')
+  .color('#0D408C');
-  
 ```
-
-
-

docs/api/layer/pointlayer.zh.md

@@ -5,8 +5,8 @@ order: 1
 
 # PointLayer
 
-
 ## 简介
+
 点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
 
 shape 支持
@@ -27,19 +27,17 @@ shape 支持
 
 **图片标注**
 
-通过 ```Scene.addImage()``` 可以添加图片资源， 
+通过 `Scene.addImage()` 可以添加图片资源，
-
 
 ### 代码示例
 
-
 #### 基本图形显示示例
 
 ```javascript
-import { PointLayer } from "@antv/l7"
+import { PointLayer } from '@antv/l7';
 
 const layer = PointLayer({
-      zIndex: 2
+  zIndex: 2,
 })
   .source(data.list, {
     type: 'array',
@@ -48,31 +46,35 @@ const layer = PointLayer({
   })
   .shape('cylinder')
   .size('t', (level) => {
-      return [4,4,(level+40)];
+    return [4, 4, level + 40];
   })
-    .color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+  .color('t', [
-
+    '#002466',
+    '#105CB3',
+    '#2894E0',
+    '#CFF6FF',
+    '#FFF5B8',
+    '#FFAB5C',
+    '#F27049',
+    '#730D1C',
+  ]);
 ```
 
-
 #### 符号图
 
 使用图片添加地图标注
 
 ```javascript
-
+scene.addImage(
-scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
+  'local',
-
+  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',
+);
 
 const layer = new PointLayer({
-      zIndex: 4
+  zIndex: 4,
 })
   .source(city)
   .size(20.0)
   .shape('local')
-    .color('#0D408C')
+  .color('#0D408C');
-  
 ```
-
-
-

docs/api/layer/polygonlayer.en.md

@@ -2,6 +2,7 @@
 title: PolygonLayer
 order: 3
 ---
+
 # 填充图
 
 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
@@ -18,9 +19,6 @@ order: 3
 PolyonLayer.shape('fill');
 PolyonLayer.shape('line').size(1); // size 表示线宽度
 PolyonLayer.shape('extrude'); // size 表示高度
-
 ```
 
 其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)
-
-

docs/api/layer/polygonlayer.zh.md

@@ -2,6 +2,7 @@
 title: PolygonLayer
 order: 3
 ---
+
 # 填充图
 
 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
@@ -18,9 +19,6 @@ order: 3
 PolyonLayer.shape('fill');
 PolyonLayer.shape('line').size(1); // size 表示线宽度
 PolyonLayer.shape('extrude'); // size 表示高度
-
 ```
 
 其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)
-
-

docs/api/source/geojson.en.md

@@ -3,13 +3,185 @@ title: geojson
 order: 1
 ---
 
-
-# geojson 数据介绍
-
-
 ## 简介
 
 GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
+[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06)
+
+L7 数据 source 支持   传入 Geometry 集合 FeatureCollection
+
+### Feature Collection Object
+
+```json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "tom"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [-2.8125, 34.59704151614417],
+            [65.390625, 34.59704151614417],
+            [65.390625, 61.10078883158897],
+            [-2.8125, 61.10078883158897],
+            [-2.8125, 34.59704151614417]
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
+
+### Feature Object
+
+```json
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {}
+}
+```
+
+### Gemetry Object
+
+支持 Gemetry Object 类型
+
+### Point
+
+```json
+{
+  "type": "Point",
+  "coordinates": [100.0, 0.0]
+}
+```
+
+### MultiPoint
+
+```json
+{
+  "type": "MultiPoint",
+  "coordinates": [
+    [100.0, 0.0],
+    [101.0, 1.0]
+  ]
+}
+```
+
+Line
+
+### LineSring
+
+```json
+{
+  "type": "LineString",
+  "coordinates": [
+    [100.0, 0.0],
+    [101.0, 1.0]
+  ]
+}
+```
+
+### MultiLineString
+
+```json
+{
+  "type": "MultiLineString",
+  "coordinates": [
+    [
+      [100.0, 0.0],
+      [101.0, 1.0]
+    ],
+    [
+      [102.0, 2.0],
+      [103.0, 3.0]
+    ]
+  ]
+}
+```
+
+Polygon
+
+### Polygon
+
+```json
+{
+  "type": "Polygon",
+  "coordinates": [
+    [
+      [100.0, 0.0],
+      [101.0, 0.0],
+      [101.0, 1.0],
+      [100.0, 1.0],
+      [100.0, 0.0]
+    ]
+  ]
+}
+```
+
+With holes:
+
+```json
+{
+  "type": "Polygon",
+  "coordinates": [
+    [
+      [-170.0, 10.0],
+      [170.0, 10.0],
+      [170.0, -10.0],
+      [-170.0, -10.0],
+      [-170.0, 10.0]
+    ],
+    [
+      [175.0, 5.0],
+      [-175.0, 5.0],
+      [-175.0, -5.0],
+      [175.0, -5.0],
+      [175.0, 5.0]
+    ]
+  ]
+}
+```
+
+### MultiPolygon
+
+```json
+{
+  "type": "MultiPolygon",
+  "coordinates": [
+    [
+      [
+        [102.0, 2.0],
+        [103.0, 2.0],
+        [103.0, 3.0],
+        [102.0, 3.0],
+        [102.0, 2.0]
+      ]
+    ],
+    [
+      [
+        [100.0, 0.0],
+        [101.0, 0.0],
+        [101.0, 1.0],
+        [100.0, 1.0],
+        [100.0, 0.0]
+      ],
+      [
+        [100.2, 0.2],
+        [100.8, 0.2],
+        [100.8, 0.8],
+        [100.2, 0.8],
+        [100.2, 0.2]
+      ]
+    ]
+  ]
+}
+```
 
 [geojson 详细文档]()
 
@@ -19,7 +191,6 @@ GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象
 
 [turfjs](http://turfjs.org/):   地理数据计算，处理，统计，分析的 Javascript 库
 
-
 ### 在线工具：
 
 [http://geojson.io/](http://geojson.io/)     可以在线查看，绘制，修改 GeoJSON 数据

docs/api/source/geojson.zh.md

@@ -2,14 +2,189 @@
 title: geojson
 order: 1
 ---
-
-
-# geojson 数据介绍
-
-
 ## 简介
 
 GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
+[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06)
+
+L7 数据 source 支持   传入 Geometry 集合 FeatureCollection
+
+### Feature Collection Object
+
+一个 feature Colletion 由对个 feature 组成
+
+```json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "tom"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [-2.8125, 34.59704151614417],
+            [65.390625, 34.59704151614417],
+            [65.390625, 61.10078883158897],
+            [-2.8125, 61.10078883158897],
+            [-2.8125, 34.59704151614417]
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
+
+### Feature Object
+
+一个 feature 有 geometry 空间信息，properties 属性信息，其中 geometry 是必须字段
+
+```json
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {}
+}
+```
+
+### Gemetry Object
+
+支持 Gemetry Object 类型
+
+#### Point
+
+```json
+{
+  "type": "Point",
+  "coordinates": [100.0, 0.0]
+}
+```
+
+#### MultiPoint
+
+```json
+{
+  "type": "MultiPoint",
+  "coordinates": [
+    [100.0, 0.0],
+    [101.0, 1.0]
+  ]
+}
+```
+
+Line
+
+#### LineSring
+
+```json
+{
+  "type": "LineString",
+  "coordinates": [
+    [100.0, 0.0],
+    [101.0, 1.0]
+  ]
+}
+```
+
+#### MultiLineString
+
+```json
+{
+  "type": "MultiLineString",
+  "coordinates": [
+    [
+      [100.0, 0.0],
+      [101.0, 1.0]
+    ],
+    [
+      [102.0, 2.0],
+      [103.0, 3.0]
+    ]
+  ]
+}
+```
+
+Polygon
+
+#### Polygon
+
+```json
+{
+  "type": "Polygon",
+  "coordinates": [
+    [
+      [100.0, 0.0],
+      [101.0, 0.0],
+      [101.0, 1.0],
+      [100.0, 1.0],
+      [100.0, 0.0]
+    ]
+  ]
+}
+```
+
+With holes:
+
+```json
+{
+  "type": "Polygon",
+  "coordinates": [
+    [
+      [-170.0, 10.0],
+      [170.0, 10.0],
+      [170.0, -10.0],
+      [-170.0, -10.0],
+      [-170.0, 10.0]
+    ],
+    [
+      [175.0, 5.0],
+      [-175.0, 5.0],
+      [-175.0, -5.0],
+      [175.0, -5.0],
+      [175.0, 5.0]
+    ]
+  ]
+}
+```
+
+#### MultiPolygon
+
+```json
+{
+  "type": "MultiPolygon",
+  "coordinates": [
+    [
+      [
+        [102.0, 2.0],
+        [103.0, 2.0],
+        [103.0, 3.0],
+        [102.0, 3.0],
+        [102.0, 2.0]
+      ]
+    ],
+    [
+      [
+        [100.0, 0.0],
+        [101.0, 0.0],
+        [101.0, 1.0],
+        [100.0, 1.0],
+        [100.0, 0.0]
+      ],
+      [
+        [100.2, 0.2],
+        [100.8, 0.2],
+        [100.8, 0.8],
+        [100.2, 0.8],
+        [100.2, 0.2]
+      ]
+    ]
+  ]
+}
+```
 
 [geojson 详细文档]()
 
@@ -19,7 +194,6 @@ GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象
 
 [turfjs](http://turfjs.org/):   地理数据计算，处理，统计，分析的 Javascript 库
 
-
 ### 在线工具：
 
 [http://geojson.io/](http://geojson.io/)     可以在线查看，绘制，修改 GeoJSON 数据

docs/api/source/source.en.md

@@ -3,10 +3,6 @@ title: Source
 order: 0
 ---
 
-
-# Source
-
-
 ### 概述
 
 source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
@@ -19,7 +15,6 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 数据转换，数据统计，网格布局，数据聚合等数据操作。
 
-
 ## API
 
 ### parser
@@ -30,8 +25,6 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 - 栅格数据 支持 image，Raster
 
-
-
 #### geojson
 
 [geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
@@ -39,10 +32,9 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 不需要设置 parser 参数
 
 ```javascript
-layer.source(data)
+layer.source(data);
 ```
 
-
 #### json
 
 json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
@@ -54,27 +46,26 @@ x: 经度字段
 y: 纬度字段
 
 ```javascript
-
+const data = [
-const data = [{
+  {
     lng: 112.345,
     lat: 30.455,
-   value: 10
+    value: 10,
- },{
+  },
-   lng:114.345,
-   lat:31.455,
-   value: 10
-  }    
-]
-
-layer.source(
-  data, 
   {
+    lng: 114.345,
+    lat: 31.455,
+    value: 10,
+  },
+];
+
+layer.source(data, {
   parser: {
     type: 'json',
     x: 'lng',
     y: 'lat',
-    }
+  },
-})
+});
 ```
 
 **线段数据**
@@ -125,92 +116,73 @@ layer.source(
 **注意面数据 coord  是三层数据结构**
 
 ```javascript
-
-[ {
-  		type: "Polygon",
-        'geometryCoord': [
 [
+  {
+    type: 'Polygon',
+    geometryCoord: [
       [
-              115.1806640625,
+        [115.1806640625, 30.637912028341123],
-              30.637912028341123
+        [114.9609375, 29.152161283318915],
+        [117.79541015625001, 27.430289738862594],
+        [118.740234375, 29.420460341013133],
+        [117.46582031249999, 31.50362930577303],
+        [115.1806640625, 30.637912028341123],
       ],
-            [
-              114.9609375,
-              29.152161283318915
     ],
-            [
+  },
-              117.79541015625001,
+];
-              27.430289738862594
-            ],
-            [
-              118.740234375,
-              29.420460341013133
-            ],
-            [
-              117.46582031249999,
-              31.50362930577303
-            ],
-            [
-              115.1806640625,
-              30.637912028341123
-            ]
-          ]
-        ]
-    }
-  ]
 
 layer.source(data, {
   parser: {
     type: 'json',
-        coordinates:'geometryCoord'
+    coordinates: 'geometryCoord',
-      }
+  },
-   })
+});
 ```
 
-
-
-
 #### csv
+
 点，线数据配置项同 json 数据类型
 
 ```javascript
-layer.source(
+layer.source(data, {
-   data,
-  {
   parser: {
     type: 'csv',
     x: 'lng1',
     y: 'lat1',
-        x1:'lng1',
+    x1: 'lng1',
     y1: 'lat2',
-    }
+  },
-})
+});
 ```
 
-**栅格数据类型****
+**栅格数据类型\*\***
 
 #### image
- 根据图片的经纬度范围，将图片添加到地图上。 配置项
 
--  type: image
+根据图片的经纬度范围，将图片添加到地图上。  配置项
--  extent: 图像的经纬度范围 []
+
+- type: image
+- extent: 图像的经纬度范围 []
 
 ```javascript
-layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
     parser: {
       type: 'image',
-          extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
+      extent: [121.168, 30.2828, 121.384, 30.4219],
-       }
+    },
-
+  },
-  })
+);
 ```
- 
 
 #### raster
+
 栅格数据类型，主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项
 
 - type  raster
-- width  数据宽度二维矩阵 columns 
+- width  数据宽度二维矩阵 columns
 - height 数据高度
 - min 数据最大值
 - max 数据最小值
@@ -224,20 +196,20 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
     height: m,
     min: 0,
     max: 8000,
-         extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
+    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-       }
+  },
-     })
+});
 ```
 
-
 ### transforms
+
 目前支持三种数据处理方法 map，grid，hexagon transform 配置项
 
 - type 数据处理类型
--  tansform cfg  数据处理配置项
+- tansform cfg  数据处理配置项
-
 
 #### map
+
 数据处理，支持自定义 callback 函数
 
 - callback:function 回调函数
@@ -259,15 +231,14 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
       },
 ```
 
-
 #### grid
 
 生成方格网布局，根据数据字段统计，主要在网格热力图中使用
 
--  type: 'grid',
+- type: 'grid',
--  size: 网格半径
+- size: 网格半径
--  field: 数据统计字段
+- field: 数据统计字段
--  method:聚合方法  count,max,min,sum,mean5个统计维度
+- method:聚合方法   count,max,min,sum,mean5 个统计维度
 
 ```javascript
  layer.source(data, {
@@ -282,17 +253,15 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
     }
 ```
 
-
 #### hexagon
+
 生成六边形网格布局，根据数据字段统计
 
--  type: 'hexagon',
+- type: 'hexagon',
--  size: 网格半径
+- size: 网格半径
--  field: 数据统计字段
+- field: 数据统计字段
--  method:聚合方法  count,max,min,sum,mean5个统计维度
+- method:聚合方法   count,max,min,sum,mean5 个统计维度
-
 
 ```
 
-
+```
-

docs/api/source/source.zh.md

@@ -3,10 +3,6 @@ title: Source
 order: 0
 ---
 
-
-# Source
-
-
 ### 概述
 
 source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
@@ -19,7 +15,6 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 数据转换，数据统计，网格布局，数据聚合等数据操作。
 
-
 ## API
 
 ### parser
@@ -30,8 +25,6 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 - 栅格数据 支持 image，Raster
 
-
-
 #### geojson
 
 [geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
@@ -42,7 +35,6 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 layer.source(data);
 ```
 
-
 #### json
 
 json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
@@ -54,27 +46,26 @@ x: 经度字段
 y: 纬度字段
 
 ```javascript
-
+const data = [
-const data = [{
+  {
     lng: 112.345,
     lat: 30.455,
-   value: 10
+    value: 10,
- },{
+  },
-   lng:114.345,
-   lat:31.455,
-   value: 10
-  }    
-]
-
-layer.source(
-  data, 
   {
+    lng: 114.345,
+    lat: 31.455,
+    value: 10,
+  },
+];
+
+layer.source(data, {
   parser: {
     type: 'json',
     x: 'lng',
     y: 'lat',
-    }
+  },
-})
+});
 ```
 
 **线段数据**
@@ -126,91 +117,73 @@ layer.source(
 **注意面数据 coord  是三层数据结构**
 
 ```javascript
-
-[ {
-  		type: "Polygon",
-        'geometryCoord': [
 [
+  {
+    type: 'Polygon',
+    geometryCoord: [
       [
-              115.1806640625,
+        [115.1806640625, 30.637912028341123],
-              30.637912028341123
+        [114.9609375, 29.152161283318915],
+        [117.79541015625001, 27.430289738862594],
+        [118.740234375, 29.420460341013133],
+        [117.46582031249999, 31.50362930577303],
+        [115.1806640625, 30.637912028341123],
       ],
-            [
-              114.9609375,
-              29.152161283318915
     ],
-            [
+  },
-              117.79541015625001,
-              27.430289738862594
-            ],
-            [
-              118.740234375,
-              29.420460341013133
-            ],
-            [
-              117.46582031249999,
-              31.50362930577303
-            ],
-            [
-              115.1806640625,
-              30.637912028341123
-            ]
-          ]
-        ]
-    }
 ];
 
 layer.source(data, {
   parser: {
     type: 'json',
-        coordinates:'geometryCoord'
+    coordinates: 'geometryCoord',
-      }
+  },
 });
 ```
 
-
-
-
 #### csv
+
 点，线数据配置项同 json 数据类型
 
 ```javascript
-layer.source(
+layer.source(data, {
-   data,
-  {
   parser: {
     type: 'csv',
     x: 'lng1',
     y: 'lat1',
-        x1:'lng1',
+    x1: 'lng1',
     y1: 'lat2',
-    }
+  },
-})
-```
-
-**栅格数据类型****
-
-#### image
- 根据图片的经纬度范围，将图片添加到地图上。 配置项
-
--  type: image
--  extent: 图像的经纬度范围 []
-
-```javascript
-layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
-     parser:{
-          type:'image',
-          extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
-       }
 });
 ```
- 
+
+**栅格数据类型\*\***
+
+#### image
+
+根据图片的经纬度范围，将图片添加到地图上。  配置项
+
+- type: image
+- extent: 图像的经纬度范围 []
+
+```javascript
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'image',
+      extent: [121.168, 30.2828, 121.384, 30.4219],
+    },
+  },
+);
+```
 
 #### raster
+
 栅格数据类型，主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项
 
 - type  raster
-- width  数据宽度二维矩阵 columns 
+- width  数据宽度二维矩阵 columns
 - height 数据高度
 - min 数据最大值
 - max 数据最小值
@@ -224,21 +197,20 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
     height: m,
     min: 0,
     max: 8000,
-         extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
+    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-       }
+  },
 });
 ```
 
-
 ### transforms
 
 目前支持三种数据处理方法 map，grid，hexagon transform 配置项
 
 - type 数据处理类型
--  tansform cfg  数据处理配置项
+- tansform cfg  数据处理配置项
-
 
 #### map
+
 数据处理，支持自定义 callback 函数
 
 - callback:function 回调函数
@@ -255,21 +227,20 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
         item.v = item.v * 1;
         item.coordinates = [x * 1, y * 1];
         return item;
-          }
+      },
-        }
+    },
-      ]
+  ],
 });
 ```
 
-
 #### grid
 
 生成方格网布局，根据数据字段统计，主要在网格热力图中使用
 
--  type: 'grid',
+- type: 'grid',
--  size: 网格半径
+- size: 网格半径
--  field: 数据统计字段
+- field: 数据统计字段
--  method:聚合方法  count,max,min,sum,mean5个统计维度
+- method:聚合方法   count,max,min,sum,mean5 个统计维度
 
 ```javascript
 layer.source(data, {
@@ -278,22 +249,21 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp
       type: 'grid',
       size: 15000,
       field: 'v',
-        method:'sum'
+      method: 'sum',
-      }
+    },
   ],
-    })
+});
 ```
 
-
 #### hexagon
+
 生成六边形网格布局，根据数据字段统计
 
--  type: 'hexagon',
+- type: 'hexagon',
--  size: 网格半径
+- size: 网格半径
--  field: 数据统计字段
+- field: 数据统计字段
--  method:聚合方法  count,max,min,sum,mean5个统计维度
+- method:聚合方法   count,max,min,sum,mean5 个统计维度
 
 ```
 
-
+```
-

docs/tutorial/map/mapbox.en.md

@@ -40,6 +40,7 @@ order: 0
 
 
 ```javascript
+
   const scene = new L7.Scene({
     id: 'map',
     map: new L7.Mapbox({

docs/tutorial/map/mapbox.zh.md

@@ -39,8 +39,6 @@ order: 0
 ### 初始化 L7 Scene
 
 
-``` javascript
-
 ```javascript
   const scene = new L7.Scene({
     id: 'map',

docs/tutorial/quickstart.en.md

@@ -1,5 +1,5 @@
 ---
-title: 快速上手
+title: QuickStart
 order: 0
 redirect_from:
   - /en/docs/tutorial

examples/gallery/basic/demo/arcCircle.js

@@ -7,13 +7,13 @@ const scene = new Scene({
     style: 'dark',
     pitch: 0,
     center: [107.77791556935472, 35.443286920228644],
-    zoom: 2.9142882493605033
+    zoom: 2.9142882493605033,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data, {
         parser: {
@@ -21,15 +21,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
           x: 'lng1',
           y: 'lat1',
           x1: 'lng2',
-          y1: 'lat2'
+          y1: 'lat2',
-        }
+        },
       })
       .size(1)
       .shape('arc')
       .color('#8C1EB2')
       .style({
         opacity: 0.8,
-        blur: 0.99
+        blur: 0.99,
       });
     scene.addLayer(layer);
   });

examples/gallery/basic/demo/bus_dark.js

@@ -8,23 +8,23 @@ const scene = new Scene({
     center: [103.83735604457024, 1.360253881403068],
     pitch: 4.00000000000001,
     zoom: 10.210275860702593,
-    rotation: 19.313180925794313
+    rotation: 19.313180925794313,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
+  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data, {
         parser: {
           coordinates: 'path',
-          type: 'json'
+          type: 'json',
-        }
+        },
       })
-      .size('level', level => {
+      .size('level', (level) => {
         return [1.0, level * 1];
       })
       .shape('line')
@@ -40,8 +40,8 @@ fetch(
           '#DEB8D4',
           '#F5D4E6',
           '#FAE4F1',
-          '#FFF3FC'
+          '#FFF3FC',
-        ].slice(0, 8)
+        ].slice(0, 8),
       );
     scene.addLayer(layer);
   });

examples/gallery/basic/demo/column_dark.js

@@ -7,20 +7,20 @@ const scene = new Scene({
     pitch: 35.210526315789465,
     style: 'dark',
     center: [104.288144, 31.239692],
-    zoom: 4.4
+    zoom: 4.4,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data.list, {
         parser: {
           type: 'json',
           x: 'j',
-          y: 'w'
+          y: 'w',
-        }
+        },
       })
       .shape('cylinder')
       .size('t', function(level) {
@@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
         '#5FD3A6',
         '#7BE39E',
         '#A1EDB8',
-        '#CEF8D6'
+        '#CEF8D6',
       ])
       .style({
-        opacity: 1.0
+        opacity: 1.0,
       });
     scene.addLayer(pointLayer);
   });

examples/gallery/basic/demo/light.js

@@ -7,39 +7,39 @@ const scene = new Scene({
     style: 'dark',
     pitch: 43,
     center: [120.13383079335335, 29.651873105004427],
-    zoom: 7.068989519212174
+    zoom: 7.068989519212174,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           x: 'lng',
-          y: 'lat'
+          y: 'lat',
         },
         transforms: [
           {
             type: 'hexagon',
             size: 2500,
             field: 'v',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
-      .size('sum', sum => {
+      .size('sum', (sum) => {
         return sum * 200;
       })
       .shape('hexagonColumn')
       .style({
         coverage: 0.8,
         angle: 0,
-        opacity: 1.0
+        opacity: 1.0,
       })
       .color('sum', [
         '#094D4A',
@@ -53,7 +53,7 @@ fetch(
         '#A1EDB8',
         '#C3F9CC',
         '#DEFAC0',
-        '#ECFFB1'
+        '#ECFFB1',
       ]);
     scene.addLayer(layer);
   });

examples/gallery/basic/demo/normal.js

@@ -6,25 +6,25 @@ const scene = new Scene({
   map: new GaodeMap({
     center: [121.417463, 31.215175],
     pitch: 0,
-    zoom: 11
+    zoom: 11,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           y: 'lat',
-          x: 'lng'
+          x: 'lng',
-        }
+        },
       })
       .size(0.5)
       .color('#080298')
       .style({
-        opacity: 1
+        opacity: 1,
       });
 
     scene.addLayer(pointLayer);

examples/gallery/basic/demo/point.js

@@ -7,15 +7,15 @@ const scene = new Scene({
     pitch: 64.88,
     style: 'dark',
     center: [114.060288, 22.53684],
-    zoom: 15.63
+    zoom: 15.63,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
+  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data)
       .size(2)
@@ -29,10 +29,10 @@ fetch(
         '#83CED6',
         '#A6E1E0',
         '#B8EFE2',
-        '#D7F9F0'
+        '#D7F9F0',
       ])
       .style({
-        opacity: 1
+        opacity: 1,
       });
 
     scene.addLayer(pointLayer);

examples/heatmap/grid/demo/china.js

@@ -7,38 +7,38 @@ const scene = new Scene({
     style: 'light',
     pitch: 0,
     center: [107.054293, 35.246265],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           x: 'lng',
-          y: 'lat'
+          y: 'lat',
         },
         transforms: [
           {
             type: 'grid',
             size: 20000,
             field: 'v',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
-      .size('count', value => {
+      .size('count', (value) => {
         return value * 0;
       })
       .shape('square')
       .style({
         coverage: 1,
-        angle: 0
+        angle: 0,
       })
       .color(
         'count',
@@ -56,8 +56,8 @@ fetch(
           '#30C7C4',
           '#6BD5A0',
           '#A7ECB2',
-          '#D0F4CA'
+          '#D0F4CA',
-        ].reverse()
+        ].reverse(),
       );
 
     scene.addLayer(layer);

examples/heatmap/grid/demo/grid1.js

@@ -7,38 +7,38 @@ const scene = new Scene({
     style: 'dark',
     pitch: 0,
     center: [110.097892, 33.853662],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           x: 'lng',
-          y: 'lat'
+          y: 'lat',
         },
         transforms: [
           {
             type: 'grid',
             size: 10000,
             field: 'v',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
-      .size('count', value => {
+      .size('count', (value) => {
         return value * 0;
       })
       .shape('square')
       .style({
         coverage: 1,
-        angle: 0
+        angle: 0,
       })
       .color(
         'count',
@@ -48,8 +48,8 @@ fetch(
           '#FFF598',
           '#FF40F3',
           '#9415FF',
-          '#421EB2'
+          '#421EB2',
-        ].reverse()
+        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/heatmap/grid/demo/heatmap3.js

@@ -7,38 +7,38 @@ const scene = new Scene({
     style: 'light',
     pitch: 0,
     center: [110.097892, 33.853662],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           x: 'lng',
-          y: 'lat'
+          y: 'lat',
         },
         transforms: [
           {
             type: 'grid',
             size: 20000,
             field: 'v',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
-      .size('count', value => {
+      .size('count', (value) => {
         return value * 0;
       })
       .shape('circle')
       .style({
         coverage: 0.9,
-        angle: 0
+        angle: 0,
       })
       .color(
         'count',
@@ -54,8 +54,8 @@ fetch(
           '#F77B00',
           '#ED9909',
           '#ECC357',
-          '#EDE59C'
+          '#EDE59C',
-        ].reverse()
+        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/heatmap/grid/demo/world.js

@@ -7,38 +7,38 @@ const scene = new Scene({
     style: 'dark',
     pitch: 0,
     center: [110.097892, 33.853662],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           x: 'lng',
-          y: 'lat'
+          y: 'lat',
         },
         transforms: [
           {
             type: 'grid',
             size: 10000,
             field: 'v',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
-      .size('count', value => {
+      .size('count', (value) => {
         return value * 0;
       })
       .shape('square')
       .style({
         coverage: 1,
-        angle: 0
+        angle: 0,
       })
       .color(
         'count',
@@ -50,8 +50,8 @@ fetch(
           '#46F3FF',
           '#02BEFF',
           '#1A7AFF',
-          '#0A1FB2'
+          '#0A1FB2',
-        ].reverse()
+        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/heatmap/heatmap/demo/heatmap.js

@@ -7,15 +7,15 @@ const scene = new Scene({
     style: 'dark',
     pitch: 0,
     center: [127.5671666579043, 7.445038892195569],
-    zoom: 2.632456779444394
+    zoom: 2.632456779444394,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
+  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data)
       .shape('heatmap')
@@ -31,10 +31,10 @@ fetch(
             '#FFF598',
             '#91EABC',
             '#2EA9A1',
-            '#206C7C'
+            '#206C7C',
           ].reverse(),
-          positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+          positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-        }
+        },
       });
     scene.addLayer(layer);
   });

examples/heatmap/heatmap/demo/heatmap3d.js

@@ -8,15 +8,15 @@ const scene = new Scene({
     pitch: 58.5,
     center: [111.8759, 30.6942],
     rotation: 0.519,
-    zoom: 3.6116
+    zoom: 3.6116,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
+  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data)
       .size('capacity', [0, 1])
@@ -33,10 +33,10 @@ fetch(
             '#DAF291',
             '#FFD591',
             '#FF7A45',
-            '#CF1D49'
+            '#CF1D49',
           ],
-          positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+          positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-        }
+        },
       });
     scene.addLayer(layer);
   });

examples/heatmap/heatmap/demo/heatmap_purple.js

@@ -7,15 +7,15 @@ const scene = new Scene({
     style: 'dark',
     pitch: 0,
     center: [127.5671666579043, 7.445038892195569],
-    zoom: 2.632456779444394
+    zoom: 2.632456779444394,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
+  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data)
       .shape('heatmap')
@@ -31,10 +31,10 @@ fetch(
             '#FFF598',
             '#F27DEB',
             '#8C1EB2',
-            '#421EB2'
+            '#421EB2',
           ].reverse(),
-          positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+          positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-        }
+        },
       });
     scene.addLayer(layer);
   });

examples/heatmap/hexagon/demo/china.js

@@ -7,32 +7,32 @@ const scene = new Scene({
     style: 'dark',
     pitch: 47.49999999999995,
     center: [112.50447776627743, 30.830476390931125],
-    zoom: 3.9879693680088626
+    zoom: 3.9879693680088626,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           x: 'lng',
-          y: 'lat'
+          y: 'lat',
         },
         transforms: [
           {
             type: 'hexagon',
             size: 17000,
             field: 'v',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
-      .size('sum', value => {
+      .size('sum', (value) => {
         return value * 20;
       })
       .shape('hexagonColumn')
@@ -44,12 +44,12 @@ fetch(
           '#FFF598',
           '#FF40F3',
           '#9415FF',
-          '#421EB2'
+          '#421EB2',
-        ].reverse()
+        ].reverse(),
       )
       .style({
         coverage: 0.9,
-        angle: 0
+        angle: 0,
       });
 
     scene.addLayer(layer);

examples/heatmap/hexagon/demo/hexagon.js

@@ -8,15 +8,15 @@ const scene = new Scene({
     pitch: 56.499,
     center: [114.07737552216226, 22.542656745583486],
     rotation: 39.19,
-    zoom: 12.47985
+    zoom: 12.47985,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
+  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         transforms: [
@@ -24,16 +24,16 @@ fetch(
             type: 'hexagon',
             size: 100,
             field: 'h12',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
       .size('sum', [0, 600])
       .shape('hexagonColumn')
       .style({
         coverage: 0.8,
         angle: 0,
-        opacity: 1.0
+        opacity: 1.0,
       })
       .color(
         'sum',
@@ -47,8 +47,8 @@ fetch(
           '#5FD3A6',
           '#7BE39E',
           '#A1EDB8',
-          '#CEF8D6'
+          '#CEF8D6',
-        ].reverse()
+        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/heatmap/hexagon/demo/light.js

@@ -7,39 +7,39 @@ const scene = new Scene({
     style: 'dark',
     pitch: 43,
     center: [120.13383079335335, 29.651873105004427],
-    zoom: 7.068989519212174
+    zoom: 7.068989519212174,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           x: 'lng',
-          y: 'lat'
+          y: 'lat',
         },
         transforms: [
           {
             type: 'hexagon',
             size: 2500,
             field: 'v',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
-      .size('sum', sum => {
+      .size('sum', (sum) => {
         return sum * 200;
       })
       .shape('hexagonColumn')
       .style({
         coverage: 0.8,
         angle: 0,
-        opacity: 1.0
+        opacity: 1.0,
       })
       .color('sum', [
         '#094D4A',
@@ -53,7 +53,7 @@ fetch(
         '#A1EDB8',
         '#C3F9CC',
         '#DEFAC0',
-        '#ECFFB1'
+        '#ECFFB1',
       ]);
     scene.addLayer(layer);
   });

examples/heatmap/hexagon/demo/world.js

@@ -7,15 +7,15 @@ const scene = new Scene({
     style: 'light',
     pitch: 0,
     center: [104.995156, 31.450658],
-    zoom: 3.79
+    zoom: 3.79,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
+  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new HeatmapLayer({})
       .source(data, {
         transforms: [
@@ -23,18 +23,18 @@ fetch(
             type: 'hexagon',
             size: 90000,
             field: 'capacity',
-            method: 'sum'
+            method: 'sum',
-          }
+          },
-        ]
+        ],
       })
-      .size('sum', value => {
+      .size('sum', (value) => {
         return value * 50;
       })
       .shape('hexagon')
       .style({
         coverage: 0.9,
         angle: 0,
-        opacity: 1.0
+        opacity: 1.0,
       })
       .color(
         'sum',
@@ -50,8 +50,8 @@ fetch(
           '#0F62FF',
           '#30B2E9',
           '#30B2E9',
-          '#40C4CE'
+          '#40C4CE',
-        ].reverse()
+        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/line/arc/demo/arc.js

@@ -7,35 +7,35 @@ const scene = new Scene({
     pitch: 0,
     style: 'dark',
     center: [0, 23.107329],
-    zoom: 0
+    zoom: 0,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'
+  'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     function getAirportCoord(idx) {
       return [data.airports[idx][3], data.airports[idx][4]];
     }
     const routes = data.routes.map(function(airline) {
       return {
-        coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ]
+        coord: [getAirportCoord(airline[1]), getAirportCoord(airline[2])],
       };
     });
     const layer = new LineLayer({})
       .source(routes, {
         parser: {
           type: 'json',
-          coordinates: 'coord'
+          coordinates: 'coord',
-        }
+        },
       })
       .size(0.6)
       .shape('arc')
       .color('rgb(5, 5, 50)')
       .style({
-        opacity: 0.05
+        opacity: 0.05,
       });
     scene.addLayer(layer);
   });

examples/line/arc/demo/arcCircle.js

@@ -7,12 +7,12 @@ const scene = new Scene({
     pitch: 0,
     style: 'dark',
     center: [107.77791556935472, 35.443286920228644],
-    zoom: 2.9142882493605033
+    zoom: 2.9142882493605033,
-  })
+  }),
 });
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data, {
         parser: {
@@ -20,15 +20,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
           x: 'lng1',
           y: 'lat1',
           x1: 'lng2',
-          y1: 'lat2'
+          y1: 'lat2',
-        }
+        },
       })
       .size(1)
       .shape('greatcircle')
       .color('#8C1EB2')
       .style({
         opacity: 0.8,
-        blur: 0.99
+        blur: 0.99,
       });
     scene.addLayer(layer);
   });

examples/line/arc/demo/trip_arc.js

@@ -8,14 +8,14 @@ const scene = new Scene({
     type: 'mapbox',
     style: 'light',
     center: [-74.06967, 40.720399],
-    zoom: 12.45977
+    zoom: 12.45977,
-  })
+  }),
 });
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data, {
         parser: {
@@ -23,15 +23,15 @@ fetch(
           x: 'start station longitude',
           y: 'start station latitude',
           x1: 'end station longitude',
-          y1: 'end station latitude'
+          y1: 'end station latitude',
-        }
+        },
       })
       .size(1)
       .shape('arc3d')
       .color('#0C47BF')
       .style({
         opacity: 1,
-        blur: 0.9
+        blur: 0.9,
       });
     scene.addLayer(layer);
   });

examples/line/arc/demo/trip_arc_dark.js

@@ -8,13 +8,13 @@ const scene = new Scene({
     style: 'dark',
     center: [104.34278, 41.12554],
     zoom: 2.94888,
-    rotation: 42.3999
+    rotation: 42.3999,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data, {
         parser: {
@@ -22,14 +22,14 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
           x: 'lng1',
           y: 'lat1',
           x1: 'lng2',
-          y1: 'lat2'
+          y1: 'lat2',
-        }
+        },
       })
       .size(1)
       .shape('arc3d')
       .color('#FF7C6A')
       .style({
-        opacity: 0.8
+        opacity: 0.8,
       });
     scene.addLayer(layer);
   });

examples/line/isoline/demo/ele.js

@@ -7,21 +7,21 @@ const scene = new Scene({
     pitch: 53.6305,
     style: 'light',
     center: [102.600579, 23.114887],
-    zoom: 14.66
+    zoom: 14.66,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data)
-      .size('ELEV', h => {
+      .size('ELEV', (h) => {
         return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];
       })
       .shape('line')
       .scale('ELEV', {
-        type: 'quantize'
+        type: 'quantize',
       })
       .color(
         'ELEV',
@@ -35,8 +35,8 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
           '#C8D7F5',
           '#A5C1FC',
           '#7FA7F9',
-          '#5F8AE5'
+          '#5F8AE5',
-        ].reverse()
+        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/line/isoline/demo/ele_dark.js

@@ -7,21 +7,21 @@ const scene = new Scene({
     pitch: 26.842105263157915,
     style: 'dark',
     center: [102.599436, 23.116371],
-    zoom: 14.78
+    zoom: 14.78,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data)
-      .size('ELEV', h => {
+      .size('ELEV', (h) => {
         return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];
       })
       .shape('line')
       .scale('ELEV', {
-        type: 'quantize'
+        type: 'quantize',
       })
       .color('ELEV', [
         '#094D4A',
@@ -33,7 +33,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
         '#5FD3A6',
         '#7BE39E',
         '#A1EDB8',
-        '#CEF8D6'
+        '#CEF8D6',
       ]);
     scene.addLayer(layer);
   });

examples/line/isoline/demo/isoline.js

@@ -7,19 +7,19 @@ const scene = new Scene({
     pitch: 0,
     style: 'light',
     center: [104.117492, 36.492696],
-    zoom: 3.89
+    zoom: 3.89,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
+  'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data)
       .scale('value', {
-        type: 'quantile'
+        type: 'quantile',
       })
       .size('value', [0.5, 1, 1.5, 2])
       .shape('line')
@@ -35,8 +35,8 @@ fetch(
           '#83CED6',
           '#A6E1E0',
           '#B8EFE2',
-          '#D7F9F0'
+          '#D7F9F0',
-        ].reverse()
+        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/line/line/demo/isoline.js

@@ -7,19 +7,19 @@ const scene = new Scene({
     pitch: 0,
     style: 'light',
     center: [104.117492, 36.492696],
-    zoom: 3.89
+    zoom: 3.89,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
+  'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data)
       .scale('value', {
-        type: 'quantile'
+        type: 'quantile',
       })
       .size('value', [0.5, 1, 1.5, 2])
       .shape('line')
@@ -35,8 +35,8 @@ fetch(
           '#83CED6',
           '#A6E1E0',
           '#B8EFE2',
-          '#D7F9F0'
+          '#D7F9F0',
-        ].reverse()
+        ].reverse(),
       );
     scene.addLayer(layer);
   });

examples/line/path/demo/bus_dark.js

@@ -8,23 +8,23 @@ const scene = new Scene({
     pitch: 4.00000000000001,
     zoom: 10.210275860702593,
     rotation: 19.313180925794313,
-    style: 'dark'
+    style: 'dark',
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
+  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data, {
         parser: {
           type: 'json',
-          coordinates: 'path'
+          coordinates: 'path',
-        }
+        },
       })
-      .size('level', level => {
+      .size('level', (level) => {
         return [0.8, level * 1];
       })
       .shape('line')
@@ -40,8 +40,8 @@ fetch(
           '#DEB8D4',
           '#F5D4E6',
           '#FAE4F1',
-          '#FFF3FC'
+          '#FFF3FC',
-        ].slice(0, 8)
+        ].slice(0, 8),
       );
     scene.addLayer(layer);
   });

examples/line/path/demo/bus_light.js

@@ -8,23 +8,23 @@ const scene = new Scene({
     pitch: 4.00000000000001,
     zoom: 10.210275860702593,
     rotation: 19.313180925794313,
-    style: 'light'
+    style: 'light',
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
+  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data, {
         parser: {
           type: 'json',
-          coordinates: 'path'
+          coordinates: 'path',
-        }
+        },
       })
-      .size('level', level => {
+      .size('level', (level) => {
         return [0.8, level * 1];
       })
       .shape('line')
@@ -40,10 +40,10 @@ fetch(
           '#83CED6',
           '#A6E1E0',
           '#B8EFE2',
-          '#D7F9F0'
+          '#D7F9F0',
         ]
           .reverse()
-          .slice(0, 8)
+          .slice(0, 8),
       );
     scene.addLayer(layer);
   });

examples/line/path/demo/road_dark.js

@@ -8,15 +8,15 @@ const scene = new Scene({
     pitch: 0,
     zoom: 10,
     rotation: 0,
-    style: 'dark'
+    style: 'dark',
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
+  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data)
       .size(1.5)

examples/line/path/demo/road_light.js

@@ -8,15 +8,15 @@ const scene = new Scene({
     pitch: 0,
     zoom: 10,
     rotation: 0,
-    style: 'light'
+    style: 'light',
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
+  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new LineLayer({})
       .source(data)
       .size(1.5)

examples/point/bubble/demo/color.js

@@ -8,21 +8,21 @@ const scene = new Scene({
     style: 'light',
     center: [121.435159, 31.256971],
     zoom: 14.89,
-    minZoom: 10
+    minZoom: 10,
-  })
+  }),
 });
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data, {
         parser: {
           type: 'json',
           x: 'longitude',
-          y: 'latitude'
+          y: 'latitude',
-        }
+        },
       })
       .shape('name', [
         'circle',
@@ -33,13 +33,13 @@ fetch(
         'octogon',
         'hexagram',
         'rhombus',
-        'vesica'
+        'vesica',
       ])
       .size('unit_price', [10, 25])
       .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
       .style({
         opacity: 0.3,
-        strokeWidth: 2
+        strokeWidth: 2,
       });
 
     scene.addLayer(pointLayer);

examples/point/bubble/demo/point.js

@@ -9,25 +9,25 @@ const scene = new Scene({
     style: 'light',
     center: [140.067171, 36.26186],
     zoom: 5.32,
-    maxZoom: 10
+    maxZoom: 10,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
+  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data)
       .shape('circle')
       .size('mag', [1, 25])
-      .color('mag', mag => {
+      .color('mag', (mag) => {
         return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
       })
       .style({
         opacity: 0.3,
-        strokeWidth: 1
+        strokeWidth: 1,
       });
 
     scene.addLayer(pointLayer);

examples/point/bubble/demo/scatter.js

@@ -7,22 +7,22 @@ const scene = new Scene({
     style: 'light',
     center: [-121.24357, 37.58264],
     pitch: 0,
-    zoom: 6.45
+    zoom: 6.45,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
 )
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           x: 'Longitude',
-          y: 'Latitude'
+          y: 'Latitude',
-        }
+        },
       })
       .shape('circle')
       .size(4)
@@ -36,11 +36,11 @@ fetch(
         '#83CED6',
         '#A6E1E0',
         '#B8EFE2',
-        '#D7F9F0'
+        '#D7F9F0',
       ])
       .style({
         opacity: 0.5,
-        strokeWidth: 0
+        strokeWidth: 0,
       });
 
     scene.addLayer(pointLayer);

examples/point/bubble/demo/world.js

@@ -8,15 +8,15 @@ const scene = new Scene({
     style: 'dark',
     center: [96.99215001469588, 29.281597225674773],
     zoom: 2.194613775109773,
-    maxZoom: 10
+    maxZoom: 10,
-  })
+  }),
 });
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
+  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
-    data.features = data.features.filter(item => {
+    data.features = data.features.filter((item) => {
       return item.properties.capacity > 800;
     });
     const pointLayer = new PointLayer({})
@@ -29,11 +29,11 @@ fetch(
         '#5FD3A6',
         '#7BE39E',
         '#A1EDB8',
-        '#CEF8D6'
+        '#CEF8D6',
       ])
       .style({
         opacity: 0.5,
-        strokeWidth: 0
+        strokeWidth: 0,
       });
 
     scene.addLayer(pointLayer);

examples/point/chart/demo/bar.js

@@ -8,19 +8,18 @@ const scene = new Scene({
     style: 'light',
     center: [2.6125016864608597, 49.359131],
     pitch: 0,
-    zoom: 4.19
+    zoom: 4.19,
-  })
+  }),
 });
 addChart();
 scene.render();
 
-
 function addChart() {
   fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
+    'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
   )
-    .then(res => res.json())
+    .then((res) => res.json())
-    .then(data => {
+    .then((data) => {
       data.nodes.forEach(function(item) {
         const el = document.createElement('div');
         const total =
@@ -34,18 +33,18 @@ function addChart() {
           {
             item: 'Agriculture',
             count: item.gdp.Agriculture,
-            percent: item.gdp.Agriculture / total
+            percent: item.gdp.Agriculture / total,
           },
           {
             item: 'Industry',
             count: item.gdp.Industry,
-            percent: item.gdp.Industry / total
+            percent: item.gdp.Industry / total,
           },
           {
             item: 'Service',
             count: item.gdp.Service,
-            percent: item.gdp.Service / total
+            percent: item.gdp.Service / total,
-          }
+          },
         ];
 
         const chart = new G2.Chart({
@@ -53,13 +52,13 @@ function addChart() {
           width: size,
           height: size,
           render: 'svg',
-          padding: 0
+          padding: 0,
         });
         chart.legend(false);
         chart.source(itemData);
         chart.tooltip(false);
         chart.axis('count', {
-          grid: false
+          grid: false,
         });
         chart
           .interval()
@@ -68,11 +67,10 @@ function addChart() {
           .opacity(1);
         chart.render();
         const marker = new Marker({
-          element: el
+          element: el,
-        })
+        }).setLnglat({
-          .setLnglat({
           lng: item.coordinates[0],
-            lat: item.coordinates[1]
+          lat: item.coordinates[1],
         });
         scene.addMarker(marker);
       });

examples/point/chart/demo/chart.js

@@ -8,18 +8,18 @@ const scene = new Scene({
     style: 'light',
     center: [2.6125016864608597, 49.359131],
     pitch: 0,
-    zoom: 4.19
+    zoom: 4.19,
-  })
+  }),
 });
 addChart();
 scene.render();
 
 function addChart() {
   fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
+    'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
   )
-    .then(res => res.json())
+    .then((res) => res.json())
-    .then(data => {
+    .then((data) => {
       data.nodes.forEach(function(item) {
         const el = document.createElement('div');
         const total =
@@ -33,18 +33,18 @@ function addChart() {
           {
             item: 'Agriculture',
             count: item.gdp.Agriculture,
-            percent: item.gdp.Agriculture / total
+            percent: item.gdp.Agriculture / total,
           },
           {
             item: 'Industry',
             count: item.gdp.Industry,
-            percent: item.gdp.Industry / total
+            percent: item.gdp.Industry / total,
           },
           {
             item: 'Service',
             count: item.gdp.Service,
-            percent: item.gdp.Service / total
+            percent: item.gdp.Service / total,
-          }
+          },
         ];
 
         const sliceNumber = 0.02;
@@ -63,10 +63,10 @@ function addChart() {
             return container.addShape('path', {
               attrs: {
                 fill: cfg.color,
-                path
+                path,
-              }
+              },
             });
-          }
+          },
         });
 
         const chart = new G2.Chart({
@@ -74,12 +74,12 @@ function addChart() {
           width: size,
           height: size,
           render: 'svg',
-          padding: 0
+          padding: 0,
         });
         chart.legend(false);
         chart.source(itemData);
         chart.coord('theta', {
-          innerRadius: 0.6
+          innerRadius: 0.6,
         });
         chart.tooltip(false);
         chart
@@ -89,11 +89,10 @@ function addChart() {
           .shape('sliceShape');
         chart.render();
         const marker = new Marker({
-          element: el
+          element: el,
-        })
+        }).setLnglat({
-          .setLnglat({
           lng: item.coordinates[0],
-            lat: item.coordinates[1]
+          lat: item.coordinates[1],
         });
         scene.addMarker(marker);
       });

examples/point/chart/demo/ring.js

@@ -41,57 +41,59 @@ const scene = new Scene({
     pitch: 0,
     style: 'dark',
     center: [52.21496184144132, 24.121126851768906],
-    zoom: 3.802
+    zoom: 3.802,
-  })
+  }),
 });
 Promise.all([
   fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
+    'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json',
-  ).then(d => d.json()),
+  ).then((d) => d.json()),
   fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
+    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json',
-  ).then(d => d.json())
+  ).then((d) => d.json()),
 ]).then(function onLoad([center, population]) {
   const popobj = {};
-  population.forEach(element => {
+  population.forEach((element) => {
     popobj[element.Code] =
       element['Population, female (% of total) (% of total)'];
   });
   // 数据绑定
 
-  center.features = center.features.map(fe => {
+  center.features = center.features.map((fe) => {
     fe.properties.female = popobj[fe.properties.id] * 1 || 0;
     return fe;
   });
-  center.features.forEach(point => {
+  center.features.forEach((point) => {
     const el = document.createElement('div');
     const coord = point.geometry.coordinates;
     const v = point.properties.female * 1;
-    if (v < 1 || (v > 46 && v < 54)) { return; }
+    if (v < 1 || (v > 46 && v < 54)) {
+      return;
+    }
     const size = 60;
     const data = [
       {
         type: '男性',
-        value: 100.0 - v.toFixed(2)
+        value: 100.0 - v.toFixed(2),
       },
       {
         type: '女性',
-        value: v.toFixed(2) * 1
+        value: v.toFixed(2) * 1,
-      }
+      },
     ];
     const chart = new G2.Chart({
       container: el,
       width: size,
       height: size,
       render: 'svg',
-      padding: 0
+      padding: 0,
     });
     chart.source(data);
     chart.legend(false);
     chart.tooltip(false);
     chart.coord('theta', {
       radius: 0.9,
-      innerRadius: 0.6
+      innerRadius: 0.6,
     });
     chart
       .intervalStack()
@@ -99,10 +101,9 @@ Promise.all([
       .color('type', ['#5CCEA1', '#5B8FF9'])
       .opacity(1);
     chart.render();
-    const marker = new Marker({ element: el })
+    const marker = new Marker({ element: el }).setLnglat({
-      .setLnglat({
       lng: coord[0],
-        lat: coord[1]
+      lat: coord[1],
     });
     scene.addMarker(marker);
   });

examples/point/column/demo/clumn_shape.js

@@ -8,35 +8,35 @@ const scene = new Scene({
     style: 'dark',
     center: [121.400257, 31.25287],
     zoom: 14.55,
-    rotation: 134.9507
+    rotation: 134.9507,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data, {
         parser: {
           type: 'json',
           x: 'longitude',
-          y: 'latitude'
+          y: 'latitude',
-        }
+        },
       })
       .shape('name', [
         'cylinder',
         'triangleColumn',
         'hexagonColumn',
-        'squareColumn'
+        'squareColumn',
       ])
-      .size('unit_price', h => {
+      .size('unit_price', (h) => {
         return [6, 6, h / 500];
       })
       .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
       .style({
-        opacity: 1.0
+        opacity: 1.0,
       });
 
     scene.addLayer(pointLayer);

examples/point/column/demo/clumn_shape_light.js

@@ -8,35 +8,35 @@ const scene = new Scene({
     style: 'light',
     center: [121.412224, 31.26192438],
     zoom: 13.13438,
-    rotation: 35.97133
+    rotation: 35.97133,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data, {
         parser: {
           type: 'json',
           x: 'longitude',
-          y: 'latitude'
+          y: 'latitude',
-        }
+        },
       })
       .shape('name', [
         'cylinder',
         'triangleColumn',
         'hexagonColumn',
-        'squareColumn'
+        'squareColumn',
       ])
-      .size('unit_price', h => {
+      .size('unit_price', (h) => {
         return [6, 6, h / 500];
       })
       .color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
       .style({
-        opacity: 1.0
+        opacity: 1.0,
       });
 
     scene.addLayer(pointLayer);

examples/point/column/demo/column_dark.js

@@ -7,20 +7,20 @@ const scene = new Scene({
     pitch: 35.210526315789465,
     style: 'dark',
     center: [104.288144, 31.239692],
-    zoom: 4.4
+    zoom: 4.4,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data.list, {
         parser: {
           type: 'json',
           x: 'j',
-          y: 'w'
+          y: 'w',
-        }
+        },
       })
       .shape('cylinder')
       .size('t', function(level) {
@@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
         '#5FD3A6',
         '#7BE39E',
         '#A1EDB8',
-        '#CEF8D6'
+        '#CEF8D6',
       ])
       .style({
-        opacity: 1.0
+        opacity: 1.0,
       });
     scene.addLayer(pointLayer);
   });

examples/point/column/demo/column_light.js

@@ -8,20 +8,20 @@ const scene = new Scene({
     style: 'light',
     center: [104.026043, 31.847],
     rotation: -0.76,
-    zoom: 4.48
+    zoom: 4.48,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data.list, {
         parser: {
           type: 'json',
           x: 'j',
-          y: 'w'
+          y: 'w',
-        }
+        },
       })
       .shape('cylinder')
       .size('t', function(level) {
@@ -29,7 +29,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
       })
       .color('#006CFF')
       .style({
-        opacity: 1.0
+        opacity: 1.0,
       });
     scene.addLayer(pointLayer);
   });

examples/point/image/demo/image.js

@@ -7,34 +7,34 @@ const scene = new Scene({
     pitch: 0,
     style: 'light',
     center: [121.434765, 31.256735],
-    zoom: 14.83
+    zoom: 14.83,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     scene.addImage(
       '00',
-      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
     );
     scene.addImage(
       '01',
-      'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
+      'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
     );
     scene.addImage(
       '02',
-      'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
+      'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
     );
     const imageLayer = new PointLayer()
       .source(data, {
         parser: {
           type: 'json',
           x: 'longitude',
-          y: 'latitude'
+          y: 'latitude',
-        }
+        },
       })
       .shape('name', ['00', '01', '02'])
       .size(20);

examples/point/image/demo/locate.js

@@ -7,18 +7,18 @@ const scene = new Scene({
     pitch: 0,
     style: 'light',
     center: [116.276227, 35.256776],
-    zoom: 6
+    zoom: 6,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'
+  'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     scene.addImage(
       'marker',
-      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
+      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
     );
     const imageLayer = new PointLayer()
       .source(data)

examples/point/image/demo/weather.js

@@ -8,62 +8,62 @@ const scene = new Scene({
     center: [120.5969, 29.7918],
     pitch: 35,
     zoom: 7,
-    rotation: 4.183582
+    rotation: 4.183582,
-  })
+  }),
 });
 scene.addImage(
   '00',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '01',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '02',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '04',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '11',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '15',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '07',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '16',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '06',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '08',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '17',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ',
 );
 scene.addImage(
   '05',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ'
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ',
 );
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'
+  'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const imageLayer = new PointLayer()
       .source(data)
       .shape('w', function(w) {

examples/point/marker/demo/marker.js

@@ -7,30 +7,30 @@ const scene = new Scene({
     style: 'light',
     center: [105.790327, 36.495636],
     pitch: 0,
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });
 addMarkers();
 scene.render();
 
-
 function addMarkers() {
   fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
+    'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json',
   )
-    .then(res => res.json())
+    .then((res) => res.json())
-    .then(nodes => {
+    .then((nodes) => {
       for (let i = 0; i < nodes.length; i++) {
-        if (nodes[i].g !== '1' || nodes[i].v === '') { continue; }
+        if (nodes[i].g !== '1' || nodes[i].v === '') {
+          continue;
+        }
         const el = document.createElement('label');
         el.className = 'lableclass';
         el.textContent = nodes[i].v + '℃';
         el.style.background = getColor(nodes[i].v);
         el.style.borderColor = getColor(nodes[i].v);
         const marker = new Marker({
-          element: el
+          element: el,
-        })
+        }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
-          .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
         scene.addMarker(marker);
       }
     });

examples/point/scatter/demo/normal.js

@@ -7,25 +7,25 @@ const scene = new Scene({
     style: 'dark',
     center: [121.417463, 31.215175],
     pitch: 0,
-    zoom: 11
+    zoom: 11,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
-  .then(res => res.text())
+  .then((res) => res.text())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data, {
         parser: {
           type: 'csv',
           y: 'lat',
-          x: 'lng'
+          x: 'lng',
-        }
+        },
       })
       .size(0.5)
       .color('#080298')
       .style({
-        opacity: 1
+        opacity: 1,
       });
 
     scene.addLayer(pointLayer);

examples/point/scatter/demo/normal2.js

@@ -7,15 +7,15 @@ const scene = new Scene({
     pitch: 64.88,
     style: 'dark',
     center: [114.060288, 22.53684],
-    zoom: 15.63
+    zoom: 15.63,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
+  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const pointLayer = new PointLayer({})
       .source(data)
       .size(2)
@@ -29,10 +29,10 @@ fetch(
         '#83CED6',
         '#A6E1E0',
         '#B8EFE2',
-        '#D7F9F0'
+        '#D7F9F0',
       ])
       .style({
-        opacity: 1
+        opacity: 1,
       });
 
     scene.addLayer(pointLayer);

examples/polygon/3d/demo/polygon.js

@@ -7,15 +7,15 @@ const scene = new Scene({
     pitch: 0,
     style: 'dark',
     center: [114.050008, 22.529272],
-    zoom: 14.1
+    zoom: 14.1,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
+  'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new PolygonLayer({})
       .source(data)
       .shape('extrude')
@@ -27,10 +27,10 @@ fetch(
         '#DEB8D4',
         '#F5D4E6',
         '#FAE4F1',
-        '#FFF3FC'
+        '#FFF3FC',
       ])
       .style({
-        opacity: 1.0
+        opacity: 1.0,
       });
     scene.addLayer(layer);
   });

examples/polygon/fill/demo/fill.js

@@ -7,15 +7,15 @@ const scene = new Scene({
     pitch: 0,
     style: 'light',
     center: [116.368652, 39.93866],
-    zoom: 10.07
+    zoom: 10.07,
-  })
+  }),
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
+  'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json',
 )
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const layer = new PolygonLayer({})
       .source(data)
       .color(
@@ -30,21 +30,21 @@ fetch(
           '#98B7F7',
           '#BDD0F8',
           '#DDE6F7',
-          '#F2F5FC'
+          '#F2F5FC',
-        ].reverse()
+        ].reverse(),
       )
       .shape('fill')
       .style({
-        opacity: 1
+        opacity: 1,
       });
     const layer2 = new LineLayer({
-      zIndex: 2
+      zIndex: 2,
     })
       .source(data)
       .color('#fff')
       .size(0.3)
       .style({
-        opacity: 1
+        opacity: 1,
       });
 
     scene.addLayer(layer);

examples/polygon/fill/demo/polygon.js

@@ -7,13 +7,13 @@ const scene = new Scene({
     pitch: 0,
     style: 'light',
     center: [107.042225, 37.66565],
-    zoom: 3.87
+    zoom: 3.87,
-  })
+  }),
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
-  .then(res => res.json())
+  .then((res) => res.json())
-  .then(data => {
+  .then((data) => {
     const colors = [
       '#D7F9F0',
       '#A6E1E0',
@@ -22,24 +22,24 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
       '#3474DB',
       '#005CBE',
       '#00419F',
-      '#00287E'
+      '#00287E',
     ];
     const layer = new PolygonLayer({})
       .source(data)
       .color('name', colors)
       .shape('fill')
       .style({
-        opacity: 0.9
+        opacity: 0.9,
       });
 
     const layer2 = new LineLayer({
-      zIndex: 2
+      zIndex: 2,
     })
       .source(data)
       .color('#fff')
       .size(0.3)
       .style({
-        opacity: 1
+        opacity: 1,
       });
 
     scene.addLayer(layer);

examples/polygon/fill/demo/population.js

@@ -7,24 +7,24 @@ const scene = new Scene({
     pitch: 0,
     style: 'light',
     center: [3.438, 40.16797],
-    zoom: 0.51329
+    zoom: 0.51329,
-  })
+  }),
 });
 Promise.all([
   fetch(
-    'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'
+    'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json',
-  ).then(d => d.json()),
+  ).then((d) => d.json()),
   fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
+    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json',
-  ).then(d => d.json())
+  ).then((d) => d.json()),
 ]).then(function onLoad([world, population]) {
   const popobj = {};
-  population.forEach(element => {
+  population.forEach((element) => {
     popobj[element.Code] =
       element['Population, female (% of total) (% of total)'];
   });
   // 数据绑定
-  world.features = world.features.map(fe => {
+  world.features = world.features.map((fe) => {
     fe.properties.female = popobj[fe.id] * 1 || 0;
     return fe;
   });
@@ -38,27 +38,27 @@ Promise.all([
     '#83CED6',
     '#A6E1E0',
     '#B8EFE2',
-    '#D7F9F0'
+    '#D7F9F0',
   ];
   const layer = new PolygonLayer({})
     .source(world)
     .scale('female', {
-      type: 'quantile'
+      type: 'quantile',
     })
     .color('female', colors)
     .shape('fill')
     .style({
-      opacity: 0.9
+      opacity: 0.9,
     });
 
   const layer2 = new LineLayer({
-    zIndex: 2
+    zIndex: 2,
   })
     .source(world)
     .color('#fff')
     .size(0.3)
     .style({
-      opacity: 1
+      opacity: 1,
     });
 
   scene.addLayer(layer);

examples/raster/basic/demo/image.js

@@ -7,8 +7,8 @@ const scene = new Scene({
     pitch: 0,
     style: 'light',
     center: [121.268, 30.3628],
-    zoom: 13
+    zoom: 13,
-  })
+  }),
 });
 
 const layer = new ImageLayer({});
@@ -17,8 +17,8 @@ layer.source(
   {
     parser: {
       type: 'image',
-      extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
+      extent: [121.168, 30.2828, 121.384, 30.4219],
-    }
+    },
-  }
+  },
 );
 scene.addLayer(layer);

examples/raster/basic/demo/radar.js

@@ -7,8 +7,8 @@ const scene = new Scene({
     pitch: 0,
     style: 'dark',
     center: [115.5268, 34.3628],
-    zoom: 7
+    zoom: 7,
-  })
+  }),
 });
 
 const layer = new ImageLayer({});
@@ -17,9 +17,8 @@ layer.source(
   {
     parser: {
       type: 'image',
-      extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]
+      extent: [113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137],
-    }
+    },
-  }
+  },
 );
 scene.addLayer(layer);
-

examples/tutorial/control/demo/amap.js

@@ -6,48 +6,46 @@ const scene = new Scene({
     style: 'light',
     pitch: 0,
     center: [121.4316962, 31.26082325],
-    zoom: 15.056
+    zoom: 15.056,
-  })
+  }),
 });
-fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+fetch(
-  .then(res => res.json())
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-  .then(data => {
+)
-    const pointLayer =
+  .then((res) => res.json())
-      new PointLayer({
+  .then((data) => {
-      })
+    const pointLayer = new PointLayer({})
       .source(data, {
         parser: {
           type: 'json',
           x: 'longitude',
-            y: 'latitude'
+          y: 'latitude',
-          }
+        },
-        }).shape('circle')
+      })
+      .shape('circle')
       .size('unit_price', [5, 25])
       .color('name', ['#49B5AD', '#5B8FF9'])
       .style({
         opacity: 0.3,
-          strokeWidth: 1
+        strokeWidth: 1,
       });
 
     scene.addLayer(pointLayer);
     const overlayers = {
-      围栏填充: pointLayer
+      围栏填充: pointLayer,
     };
     const layersControl = new Layers({
-      overlayers
+      overlayers,
     });
 
     scene.addControl(layersControl);
-
   });
 
-
 const zoomControl = new Zoom({
-  position: 'topright'
+  position: 'topright',
 });
 const scaleControl = new Scale({
-  position: 'bottomright'
+  position: 'bottomright',
 });
 scene.addControl(zoomControl);
 scene.addControl(scaleControl);
-

examples/tutorial/control/demo/mapbox.js

@@ -6,12 +6,11 @@ const scene = new Scene({
     style: 'light',
     pitch: 0,
     center: [107.054293, 35.246265],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });
 
 const zoomControl = new Zoom();
 const scaleControl = new Scale();
 scene.addControl(zoomControl);
 scene.addControl(scaleControl);
-

examples/tutorial/data/demo/line.js

@@ -6,6 +6,6 @@ new Scene({
     style: 'light',
     pitch: 0,
     center: [107.054293, 35.246265],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });

examples/tutorial/map/demo/amap.js

@@ -6,6 +6,6 @@ new Scene({
     style: 'light',
     pitch: 0,
     center: [107.054293, 35.246265],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });

examples/tutorial/map/demo/mapbox.js

@@ -6,6 +6,6 @@ new Scene({
     style: 'light',
     pitch: 0,
     center: [107.054293, 35.246265],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });

examples/tutorial/marker/demo/amap.js

@@ -6,12 +6,12 @@ const scene = new Scene({
     style: 'light',
     pitch: 0,
     center: [121.4316962, 31.26082325],
-    zoom: 12.056
+    zoom: 12.056,
-  })
+  }),
 });
 // 创建默认 marker
 const popup = new Popup({
-  offsets: [ 0, 20 ]
+  offsets: [0, 20],
 }).setText('hello');
 
 const marker = new Marker()

examples/tutorial/marker/demo/mapbox.js

@@ -6,12 +6,11 @@ const scene = new Scene({
     style: 'light',
     pitch: 0,
     center: [107.054293, 35.246265],
-    zoom: 4.056
+    zoom: 4.056,
-  })
+  }),
 });
 
 const zoomControl = new Zoom();
 const scaleControl = new Scale();
 scene.addControl(zoomControl);
 scene.addControl(scaleControl);
-

gatsby-config.js

@@ -77,7 +77,7 @@ module.exports = {
           zh: '场景 Scene',
           en: 'Scene'
         },
-        order: 2
+        order: 1
       },
       {
         slug: 'api/layer',
@@ -85,7 +85,7 @@ module.exports = {
           zh: '图层 Layer',
           en: 'Layer'
         },
-        order: 2
+        order: 3
       },
       {
         slug: 'api/source',
@@ -93,7 +93,7 @@ module.exports = {
           zh: '数据 Source',
           en: 'Source'
         },
-        order: 3
+        order: 2
       },
       {
         slug: 'api/component',

package.json

@@ -123,8 +123,7 @@
     "site:clean": "gatsby clean",
     "site:deploy": "yarn run site:build && gh-pages -d public",
     "site:publish": "gh-pages -d public",
-    "lint-fix:examples": "prettier --write examples/**/**/*.js",
+    "lint:fix": "prettier --write examples/**/**/*.js docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx",
-    "lint:site": "eslint examples/**/**/*.js --fix",
     "prebuild": "run-p tsc lint",
     "build": "yarn clean && lerna run build",
     "postbuild": "yarn build:declarations",

packages/source/__tests__/data/multiLine.ts

@@ -0,0 +1,26 @@
+import { FeatureCollection, Geometries, Properties } from '@turf/helpers';
+
+const MultiLine: FeatureCollection<Geometries, Properties> = {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      properties: {},
+      geometry: {
+        type: 'MultiLineString',
+        coordinates: [
+          [
+            [100.0, 0.0],
+            [101.0, 1.0],
+          ],
+          [
+            [102.0, 2.0],
+            [103.0, 3.0],
+          ],
+        ],
+      },
+    },
+  ],
+};
+
+export default MultiLine;

packages/source/__tests__/parser/geojson.spec.ts

@@ -1,22 +1,19 @@
 import geojson from '../../src/parser/geojson';
+import multiLine from '../data/multiLine';
+import multiPolygon from '../data/multipolygon';
 import polygon from '../data/polygon';
-
 describe('parser.geojson', () => {
   it('parser json', () => {
     const result = geojson(polygon);
     expect(result.dataArray.length).toEqual(3);
   });
-  it('parser json hash id ', () => {
+  it('parser multiPolygon', () => {
-    const result = geojson(polygon, {
+    const result = geojson(multiPolygon);
-      idField: 'name',
+    expect(result.dataArray.length).toEqual(11);
+    expect(result.dataArray[0]._id).toEqual(0);
   });
-    expect(result.dataArray.length).toEqual(3);
+  it('parset multiLine', () => {
-    if (result.featureKeys) {
+    const result = geojson(multiLine);
-      expect(Object.keys(result.featureKeys)).toEqual([
+    expect(result.dataArray.length).toEqual(2);
-        '408534',
-        '410464',
-        '431974',
-      ]);
-    }
   });
 });

packages/source/src/parser/geojson.ts

@@ -1,4 +1,3 @@
-import { djb2hash } from '@antv/l7-utils';
 // @ts-ignore
 import rewind from '@mapbox/geojson-rewind';
 import {
@@ -36,33 +35,30 @@ export default function geoJSON(
     );
   });
   // 数据为空时处理
-  let i = 0;
+  const i = 0;
   // multi polygon 拆分
   turfMeta.flattenEach(
     data,
     (currentFeature: Feature<Geometries, Properties>, featureIndex: number) => {
       const coord = getCoords(currentFeature);
-      let id = featureIndex;
+      const id = featureIndex;
-      // 瓦片数据通过字段hash建立索引
+      if (currentFeature.geometry.type === 'Polygon') {
-      if (
+        coord.forEach((coor) => {
-        cfg &&
+          const dataItem = {
-        cfg.idField &&
+            ...currentFeature.properties,
-        currentFeature.properties &&
+            coordinates: [coor],
-        currentFeature.properties[cfg.idField]
+            _id: id,
-      ) {
-        const value = currentFeature.properties[cfg.idField];
-        id = djb2hash(value) % 1000019;
-        featureKeys[id] = {
-          index: i++,
-          idField: value,
           };
-      }
+          resultData.push(dataItem);
+        });
+      } else {
         const dataItem: IParseDataItem = {
           ...currentFeature.properties,
           coordinates: coord,
           _id: id,
         };
         resultData.push(dataItem);
+      }
     },
   );
   return {

stories/Layers/components/Polygon3D.tsx

@@ -25,7 +25,7 @@ export default class Polygon3D extends React.Component {
 
   public async componentDidMount() {
     const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
+      'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json',
     );
     const scene = new Scene({
       id: 'map',
@@ -33,8 +33,8 @@ export default class Polygon3D extends React.Component {
         pitch: 0,
         style: 'dark',
         center: [114.050008, 22.529272],
-        zoom: 14.1
+        zoom: 14.1,
-      })
+      }),
     });
 
     const layer = new PolygonLayer({})
@@ -48,13 +48,12 @@ export default class Polygon3D extends React.Component {
         '#DEB8D4',
         '#F5D4E6',
         '#FAE4F1',
-        '#FFF3FC'
+        '#FFF3FC',
       ])
       .style({
-        opacity: 1.0
+        opacity: 1.0,
       });
     scene.addLayer(layer);
-
   }
 
   public render() {

stories/Layers/components/column.tsx

@@ -19,39 +19,39 @@ export default class Column extends React.Component {
         style: 'dark',
         center: [121.400257, 31.25287],
         zoom: 14.55,
-        rotation: 134.9507
+        rotation: 134.9507,
-      })
+      }),
     });
 
     fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+      'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
     )
-      .then(res => res.json())
+      .then((res) => res.json())
-      .then(data => {
+      .then((data) => {
         const pointLayer = new PointLayer({})
           .source(data, {
             parser: {
               type: 'json',
               x: 'longitude',
-              y: 'latitude'
+              y: 'latitude',
-            }
+            },
           })
           .shape('name', [
             'cylinder',
             'triangleColumn',
             'hexagonColumn',
-            'squareColumn'
+            'squareColumn',
           ])
-          .size('unit_price', h => {
+          .size('unit_price', (h) => {
             return [6, 6, h / 500];
           })
           .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
           .style({
-            opacity: 1.0
+            opacity: 1.0,
           });
 
         scene.addLayer(pointLayer);
-   })
+      });
   }
 
   public render() {

stories/Source/Map.stories.tsx

@@ -0,0 +1,10 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import MultiPolygon from './components/multiPolygon';
+import MultiLine from './components/multiLine';
+// @ts-ignore
+import notes from './Map.md';
+// @ts-ignore
+storiesOf('数据', module)
+  .add('multiPolygon', () => <MultiPolygon />, {})
+  .add('MultiLine', () => <MultiLine />, {});

stories/Source/components/multiLine.tsx

@@ -0,0 +1,74 @@
+import { LineLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+function convertRGB2Hex(rgb: number[]) {
+  return (
+    '#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
+  );
+}
+
+export default class MultiLine extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 0,
+        style: 'dark',
+        center: [101.775374, 3],
+        zoom: 14.1,
+      }),
+    });
+
+    const layer = new LineLayer({})
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'MultiLineString',
+              coordinates: [
+                [
+                  [100, 0],
+                  [101, 1],
+                ],
+                [
+                  [102, 2],
+                  [103, 3],
+                ],
+              ],
+            },
+          },
+        ],
+      })
+      .shape('line')
+      .color('red')
+      .style({
+        opacity: 1.0,
+      });
+    scene.addLayer(layer);
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Source/components/multiPolygon.tsx

@@ -0,0 +1,58 @@
+import { PolygonLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+function convertRGB2Hex(rgb: number[]) {
+  return (
+    '#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
+  );
+}
+
+export default class MultiPolygon extends React.Component {
+  private gui: dat.GUI;
+  private $stats: Node;
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json',
+    );
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 0,
+        style: 'dark',
+        center: [121.775374, 31.31067],
+        zoom: 14.1,
+      }),
+    });
+
+    const layer = new PolygonLayer({})
+      .source(await response.json())
+      .shape('fill')
+      .color('red')
+      .style({
+        opacity: 1.0,
+      });
+    scene.addLayer(layer);
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}