Merge pull request #247 from antvis/docs

docs: fix marker popup docs

docs/api/component/control.zh.md

@@ -1,5 +1,5 @@
 ---
-title: Control
+title: Control 控件
 order: 3
 ---
 

docs/api/component/marker.en.md

@@ -30,10 +30,6 @@ scene.addMarker(marker);
 
 设置 marker 经纬度位置
 
-#### addTo
-
-将 marker 添加到地图 Scene
-
 #### remove
 
 移除 marker
@@ -74,8 +70,7 @@ el.style.background = getColor(data[i].v);
 new L7.Marker({
   element: el,
 })
-  .setLnglat([data[i].x * 1, data[i].y])
+  .setLnglat([data[i].x * 1, data[i].y]
-  .addTo(scene);
 ```
 
 #### 设置 popup

docs/api/component/marker.zh.md

@@ -1,5 +1,5 @@
 ---
-title: Marker
+title: Marker 标注
 order: 3
 ---
 
@@ -20,16 +20,18 @@ Marker
 - offsets    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
 - extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息
 
+### 添加到 Scene
+
+```javascript
+scene.addMarker(marker);
+```
+
 ## 方法
 
 #### setLnglat
 
 设置 marker 经纬度位置
 
-#### addTo
-
-将 marker 添加到地图 Scene
-
 #### remove
 
 移除 marker
@@ -89,11 +91,12 @@ var el = document.createElement('label');
 el.className = 'labelclass';
 el.textContent = data[i].v;
 el.style.background = getColor(data[i].v);
-new L7.Marker({
+
+const marker = new L7.Marker({
   element: el,
-})
+}).setLnglat([data[i].x * 1, data[i].y]);
-  .setLnglat([data[i].x * 1, data[i].y])
+
-  .addTo(scene);
+scene.addMarker(marker);
 ```
 
 #### 设置 popup
@@ -107,8 +110,7 @@ new L7.Marker({
   element: el,
 })
   .setLnglat(item.coordinates)
-  .setPopup(popup)
+  .setPopup(popup);
-  .addTo(scene);
 ```
 
 ## 事件

docs/api/component/popup.en.md

@@ -1,10 +1,8 @@
 ---
-title: popup
+title: Popup
 order: 0
 ---
 
-# popup
-
 地图标注信息窗口，用于展示地图要素的属性信息
 
 ## 构造函数
@@ -22,6 +20,12 @@ const popup = new L7.Popup(option);
 - maxWidth
 - anchor
 
+#### 添加到地图
+
+```javascript
+scene.addPopup(popup);
+```
+
 ## 方法
 
 #### setLnglat
@@ -49,16 +53,6 @@ const lnglat = {
 popup.setLnglat([112, 32]);
 ```
 
-#### addTo
-
-**参数**：scene 地图 scene 实例
-
-将 popup 添加到地图 scene 显示
-
-```javascript
-popup.addTo(scene);
-```
-
 #### setHTML
 
 **参数**：html 字符串

docs/api/component/popup.zh.md

@@ -1,10 +1,8 @@
 ---
-title: popup
+title: Popup 信息框
 order: 0
 ---
 
-# popup
-
 地图标注信息窗口，用于展示地图要素的属性信息
 
 ## 构造函数
@@ -22,6 +20,12 @@ const popup = new L7.Popup(option);
 - maxWidth
 - anchor
 
+#### 添加到地图
+
+```javascript
+scene.addPopup(popup);
+```
+
 ## 方法
 
 #### setLnglat
@@ -49,16 +53,6 @@ const lnglat = {
 popup.setLnglat([112, 32]);
 ```
 
-#### addTo
-
-**参数**：scene 地图 scene 实例
-
-将 popup 添加到地图 scene 显示
-
-```javascript
-popup.addTo(scene);
-```
-
 #### setHTML
 
 **参数**：html 字符串

docs/api/react/layer.en.md

@@ -1,4 +1,4 @@
 ---
 title: Layer Component
-order: 1
+order: 2
 ---

docs/api/react/layer.zh.md

@@ -1,6 +1,6 @@
 ---
 title: Layer 组件
-order: 1
+order: 2
 ---
 
 ## Scene Props
@@ -21,9 +21,7 @@ order: 1
 
 ### attributeOption
 
-color, size, shape 等图形映射通道配置项
+color, size, shape 等图形映射通道，通过下面参数配置
-
-#### option
 
 - field 映射字段，如果是常量设置为 null
 - values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
@@ -32,12 +30,12 @@ color, size, shape 等图形映射通道配置项
 
 数据源配置项
 
-#### Option
-
 - data 支持 geojson、csv、json
 - parser 数据解析配置项
 - transforms 数据处理配置项
 
+具体配置项
+
 ```jsx
 import { PolygonLayer } from '@antv/l7-react';
 <PolygonLayer

docs/api/source/source.zh.md

@@ -178,10 +178,12 @@ const data2 = [
 layer
   .source(data, {
     transforms: [
-      (type: 'join'),
+      {
-      (sourceField: 'name'), //data1 对应字段名
+      type: 'join',
-      (targetField: 'city'), // data 对应字段名
+      sourceField: 'name', //data1 对应字段名
-      (data: data2),
+      targetField: 'city', // data 对应字段名 绑定到的地理数据
+      data: data2
+      }
     ],
   })
   .color('value'); // 可以采用data1的value字段进行数据到颜色的映射

gatsby-config.js

@@ -80,10 +80,10 @@ module.exports = {
       {
         slug: 'api/react',
         title: {
-          zh: 'react 组件',
+          zh: 'React 组件',
           en: 'react component'
         },
-        order: 10
+        order: 6
       },
       {
         slug: 'api/layer',
@@ -155,7 +155,7 @@ module.exports = {
           zh: '数据 Source',
           en: 'Source'
         },
-        order: 2
+        order: 4
       },
       {
         slug: 'api/component',
@@ -163,7 +163,7 @@ module.exports = {
           zh: '组件 Component',
           en: 'Component'
         },
-        order: 4
+        order: 5
       }
     ],
     examples: [

stories/Layers/components/data_update.tsx

@@ -54,15 +54,13 @@ export default class DataUpdate extends React.Component {
       });
     scene.addLayer(layer);
     layer.setData(pointOnCircle(1000));
-    scene.render();
+    this.scene = scene;
     function animateMarker(timestamp: number) {
       layer.setData(pointOnCircle(timestamp / 1000));
       scene.render();
       requestAnimationFrame(animateMarker);
     }
-    // layer.on('inited', () => {
     animateMarker(0);
-    // });
   }
 
   public render() {