Merge pull request #245 from antvis/react

React

demos/react/scene/demo/amap.jsx

@@ -0,0 +1,56 @@
+import { AMapScene, LineLayer } from '@antv/l7-react';
+import * as React from 'react';
+
+export default React.memo(function Map() {
+  const [ data, setData ] = React.useState();
+  React.useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json'
+      );
+      const raw = await response.json();
+      setData(raw);
+    };
+    fetchData();
+  }, []);
+  return (
+    <>
+      <AMapScene
+        map={{
+          center: [ 110.19382669582967, 50.258134 ],
+          pitch: 0,
+          style: 'dark',
+          zoom: 1
+        }}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        }}
+      >
+        <LineLayer
+          key={'2'}
+          source={{
+            data
+          }}
+          size={{
+            values: 1
+          }}
+          color={{
+            values: '#fff'
+          }}
+          shape={{
+            values: 'line'
+          }}
+          style={{
+            opacity: 1
+          }}
+        />
+        )}
+      </AMapScene>
+    </>
+  );
+});
+

demos/react/scene/demo/meta.json

@@ -0,0 +1,14 @@
+{
+  "title": {
+    "zh": "Scene 组件",
+    "en": "Scene Component"
+  },
+  "demos": [
+
+    {
+      "filename": "amap.jsx",
+      "title": "高德地图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

demos/react/scene/index.en.md

@@ -0,0 +1,4 @@
+---
+title: React Map
+order: 0
+---

demos/react/scene/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: React 地图
+order: 0
+---

docs/api/layer/layer.zh.md

@@ -69,7 +69,7 @@ scene.addLayer(layer);
   - parser 数据解析，默认是解析层 geojson
   - transforms [transform，transform ]  数据处理转换 可设置多个
 
-parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
+parser 和  transforms [见 source 文档](../source/source)
 
 ```javascript
 layer.source(data, {

docs/api/react/layer.en.md

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

docs/api/react/layer.zh.md

@@ -0,0 +1,59 @@
+---
+title: Layer 组件
+order: 1
+---
+
+## Scene Props
+
+| prop name   | Type               | Default | Description                             |
+| ----------- | ------------------ | ------- | --------------------------------------- |
+| option      | `Object`           |         | layer 配置项                            |
+| source      |                    |         | 数据源配置项                            |
+| color       | `attributeOption`  |         | 颜色通道                                |
+| shape       | `attributeOption`  |         | 图层形状属性                            |
+| size        | `attributeOption`  |         | 图层大小属性                            |
+| style       | `Object`           |         | 图层样式                                |
+| scale       | `Object`           |         | 图层度量                                |
+| filter      | `Function`         |         | 图层数据过滤方法                        |
+| select      | `boolean` `Object` |         | 图层选中高亮                            |
+| active      | `boolean` `Object` | `false` | 图层 hover 高亮                         |
+| onLayerLoad | `Function`         |         | 图层添加完成后回调，用于获取 layer 对象 |
+
+### attributeOption
+
+color, size, shape 等图形映射通道配置项
+
+#### option
+
+- field 映射字段，如果是常量设置为 null
+- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
+
+### sourceOption
+
+数据源配置项
+
+#### Option
+
+- data 支持 geojson、csv、json
+- parser 数据解析配置项
+- transforms 数据处理配置项
+
+```jsx
+import { PolygonLayer } from '@antv/l7-react';
+<PolygonLayer
+  key={'2'}
+  source={{
+    data,
+  }}
+  color={{
+    field: 'name',
+    values: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
+  }}
+  shape={{
+    values: 'fill',
+  }}
+  style={{
+    opacity: 1,
+  }}
+/>;
+```

docs/api/react/scene.en.md

@@ -0,0 +1,12 @@
+---
+title: 高德地图
+order: 1
+---
+
+| prop name     | Type       | Default    | Description        |
+| ------------- | ---------- | ---------- | ------------------ |
+| style         | `Object`   | `null`     | scene css 样式     |
+| className     | `string`   | `null`     | 样式名称           |
+| map           | `Object`   | `Required` | 地图配置项         |
+| option        | `Object`   | `void`     | scene 配置项       |
+| onSceneLoaded | `Function` | `void`     | scene 加载回调函数 |

docs/api/react/scene.zh.md

@@ -0,0 +1,58 @@
+---
+title: 高德地图
+order: 1
+---
+
+## Scene Props
+
+| prop name     | Type       | Default    | Description                            |
+| ------------- | ---------- | ---------- | -------------------------------------- |
+| style         | `Object`   | `null`     | scene css 样式                         |
+| className     | `string`   | `null`     | 样式名称                               |
+| map           | `Object`   | `Required` | map option [地图配置项]()              |
+| option        | `Object`   | `void`     | scene option 配置项 [详情](#map-props) |
+| onSceneLoaded | `Function` | `void`     | scene 加载回调函数                     |
+
+```jsx
+import { AMapScene } from '@antv/l7-react';
+<AMapScene
+  option={{}}
+  map={{
+    style: 'light',
+    center: [112, 20],
+    token: '',
+  }}
+/>;
+```
+
+### map option
+
+地图配置项
+
+| option   | Type       | Default            | Description                                                                                                     |
+| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
+| style    | `string`   | `light`            | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式                                    |
+| token    | `string`   | `Required`         | 地图密钥，需要平台申请                                                                                          |
+| plugin   | `string[]` | `null`             | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` |
+| center   | `number`   | null               | 地图中心点                                                                                                      |
+| pitch    | `number`   | 0                  | 地图倾角                                                                                                        |
+| rotation | `number`   | 0                  | 地图旋转角                                                                                                      |
+| zoom     | `number`   | null               | 地图缩放等级                                                                                                    |
+| maxZoom  | `number`   | 0                  | 最大缩放等级                                                                                                    |
+| minZoom  | `number`   | AMap 18 ,Mapbox 20 | 最小缩放等级                                                                                                    |
+
+其他配置项见地图文档
+高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map)
+
+Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map)
+
+其他配置项和底图一致
+
+### scene option
+
+| option                | Type      | Default      | Description                                         |
+| --------------------- | --------- | ------------ | --------------------------------------------------- |
+| logoPosition          | string    | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` |
+| logoVisible           | `boolean` | `true`       | 是否显示 logo                                       |
+| antialias             | `boolean` | `true`       | 是否开启抗锯齿                                      |
+| preserveDrawingBuffer | `boolean` | `false`      | 是否保留缓冲区数据                                  |

docs/api/scene.zh.md

@@ -89,6 +89,16 @@ L7 Logo 的显示位置 默认左下角
 
 是否显示 L7 的 Logo {boolean} true
 
+### antialias
+
+是否开始前抗锯齿 `boolean` `true`
+
+### preserveDrawingBuffer
+
+是否保留缓冲区数据 `boolean` `false`
+
+## Map 配置项
+
 ### zoom
 
 地图初始显示级别 {number} （0-22）
@@ -114,6 +124,8 @@ L7 Logo 的显示位置 默认左下角
 
 比如高德地图
 
+⚠️ 高德地图样式 增加 `isPublic=true` 参数
+
 ```javascript
 {
   style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致

gatsby-config.js

@@ -77,6 +77,14 @@ module.exports = {
         },
         order: 1
       },
+      {
+        slug: 'api/react',
+        title: {
+          zh: 'react 组件',
+          en: 'react component'
+        },
+        order: 10
+      },
       {
         slug: 'api/layer',
         title: {

packages/core/src/services/scene/SceneService.ts

@@ -204,7 +204,7 @@ export default class Scene extends EventEmitter implements ISceneService {
   }
 
   public async render() {
-    if (this.rendering && this.destroyed) {
+    if (this.rendering || this.destroyed) {
       return;
     }
 
@@ -216,7 +216,6 @@ export default class Scene extends EventEmitter implements ISceneService {
       if (this.destroyed) {
         this.destroy();
       }
-
       // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
       this.logger.info(' render inited');
       this.layerService.initLayers();

stories/Layers/components/Point.tsx

@@ -51,14 +51,10 @@ export default class Point3D extends React.Component {
           strokeWidth: 1,
         });
       scene.addLayer(pointLayer);
-
+      const hander = () => {
-      // scene.on('loaded', () => {
+        console.log('click');
-      //   const newData = {
+      };
-      //     type: 'FeatureCollection',
+      scene.on('click', hander);
-      //     features: pointsData.features.slice(0, 100),
-      //   };
-      //   pointLayer.setData(newData);
-      // });
       this.scene = scene;
     });
   }