chore: update l7-react peerdependencies

docs/api/layer/layer.zh.md

@@ -126,24 +126,22 @@ layer.source(data, {
 - cat 枚举
 
 ```javascript
-
+layer.scale('name', {
-layer.scale('name',{
+  type: 'cat',
-  type: 'cat'
+});
-})
 
 // 设置多个scale
 
-字段名为 key, value 为scale配置项
+// 字段名为 key, value 为scale配置项
 
 layer.scale({
-  name:{
+  name: {
-    type: 'cat'
+    type: 'cat',
   },
   value: {
-    type: 'linear'
+    type: 'linear',
-  }
+  },
-})
+});
-
 ```
 
 ## 视觉编码方法

docs/api/react/layer.zh.md

@@ -7,7 +7,7 @@ order: 2
 
 | prop name     | Type                           | Default                                                   | Description                             |
 | ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
-| option        | `layer option`                 |                                                           | layer 配置项                            |
+| options       | `layer options`                |                                                           | layer 配置项                            |
 | source        | `sourceOption`                 |                                                           | 数据源配置项                            |
 | color         | `attributeOption`              |                                                           | 颜色通道                                |
 | shape         | `attributeOption`              |                                                           | 图层形状属性                            |
@@ -19,15 +19,17 @@ order: 2
 | active        | `boolean` `interaction option` | `false`                                                   | 图层 hover 高亮                         |
 | onLayerLoaded | `Function`                     |                                                           | 图层添加完成后回调，用于获取 layer 对象 |
 
-### layer option
+### layer options
 
-| prop name | Type      | Default                 | Description                              |
+| prop name | Type      | Default                 | Description                                      |
-| --------- | --------- | ----------------------- | ---------------------------------------- |
+| --------- | --------- | ----------------------- | ------------------------------------------------ |
-| name      | `string`  |                         | 图层名字，可根据名称获取 layer           |
+| name      | `string`  |                         | 图层名字，可根据名称获取 layer                   |
-| visible   | `boolean` | `true`                  | 图层是否可见                             |
+| visible   | `boolean` | `true`                  | 图层是否可见                                     |
-| zIndex    | `number`  | 0                       | 图层绘制顺序，                           |
+| zIndex    | `number`  | 0                       | 图层绘制顺序，                                   |
-| minZoom   | `number`  | 0                       | 设置 layer 最小可见等级，小于则不显示    |
+| minZoom   | `number`  | 0                       | 设置 layer 最小可见等级，小于则不显示            |
-| maxZoom   | `number`  | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
+| maxZoom   | `number`  | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示         |
+| aotoFit   | `boolean` | `false`                 | 是否缩放到图层范围                               |
+| blend     | 'string'  | 'normal'                | 图层元素混合效果 [详情]('../layer/layer/#blend') |
 
 ### attribute Option
 

examples/react/control/demo/control.tsx

@@ -0,0 +1,27 @@
+import { AMapScene, Control, LineLayer } from '@antv/l7-react';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+const MapScene = React.memo(function Map() {
+  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,
+      }}
+    >
+      <Control type="scale" />
+      <Control type="zoom" />
+    </AMapScene>
+  );
+});
+
+ReactDOM.render(<MapScene />, document.getElementById('map'));

examples/react/control/index.en.md

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

examples/react/control/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: Control 组件
+order: 0
+---

examples/react/layer/demo/meta.json

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

examples/react/layer/demo/world.jsx

@@ -0,0 +1,83 @@
+import { AMapScene, LineLayer, MapboxScene, PolygonLayer } from '@antv/l7-react';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+const World = 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/68dc6756-627b-4e9e-a5ba-e834f6ba48f8.json'
+      );
+      const data = await response.json();
+      setData(data);
+    };
+    fetchData();
+  }, []);
+  return (
+    <MapboxScene
+      map={{
+        center: [ 0.19382669582967, 50.258134 ],
+        pitch: 0,
+        style: 'blank',
+        zoom: 6
+      }}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }}
+    >
+      {data && [
+        <PolygonLayer
+          key={'2'}
+          options={{
+            autoFit: true
+          }}
+          source={{
+            data
+          }}
+          color={{
+            field: 'name',
+            values: [
+              '#2E8AE6',
+              '#69D1AB',
+              '#DAF291',
+              '#FFD591',
+              '#FF7A45',
+              '#CF1D49'
+            ]
+          }}
+          shape={{
+            values: 'fill'
+          }}
+          style={{
+            opacity: 1
+          }}
+          select={{
+            option: { color: '#FFD591' }
+          }}
+        />,
+        <LineLayer
+          key={'21'}
+          source={{
+            data
+          }}
+          color={{
+            values: '#fff'
+          }}
+          shape={{
+            values: 'line'
+          }}
+          style={{
+            opacity: 1
+          }}
+        />
+      ]}
+    </MapboxScene>
+  );
+});
+
+ReactDOM.render(<World/>, document.getElementById('map'));

examples/react/layer/index.en.md

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

examples/react/layer/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: Layer 组件
+order: 0
+---

examples/react/scene/demo/amap.jsx

@@ -0,0 +1,25 @@
+import { AMapScene, LineLayer } from '@antv/l7-react';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+const MapScene = React.memo(function Map() {
+  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
+      }}
+    />
+  );
+});
+
+ReactDOM.render(<MapScene/>, document.getElementById('map'));
+

examples/react/scene/demo/mapbox.jsx

@@ -0,0 +1,24 @@
+import { MapboxScene } from '@antv/l7-react';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+const MapScene = React.memo(function Map() {
+  return (
+    <MapboxScene
+      map={{
+        center: [ 110.19382669582967, 50.258134 ],
+        pitch: 0,
+        style: 'dark',
+        zoom: 1
+      }}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }}
+    />
+  );
+});
+ReactDOM.render(<MapScene/>, document.getElementById('map'));
+

examples/react/scene/demo/meta.json

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

examples/react/scene/index.en.md

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

examples/react/scene/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: Scene 组件
+order: 0
+---

gatsby-browser.js

@@ -5,3 +5,6 @@ window.geotiff = require('geotiff/dist/geotiff.bundle.min.js');
 window.g2 = require('@antv/g2');
 window.l7 = require('@antv/l7');
 window.l7Maps = require('@antv/l7-maps');
+window.l7React = require('@antv/l7-react');
+window.react = require('react');
+window.reactDom = require('react-dom');

gatsby-config.js

@@ -216,6 +216,14 @@ module.exports = {
           en: 'Raster Layer'
         }
       },
+      {
+        slug: 'react',
+        icon: 'map',
+        title: {
+          zh: 'React 组件',
+          en: 'React Demo'
+        }
+      },
       {
         slug: 'tutorial',
         icon: 'map',

packages/component/src/control/zoom.ts

@@ -93,7 +93,7 @@ export default class Zoom extends Control {
   ) {
     const link = DOM.create('a', className, container) as HTMLLinkElement;
     link.innerHTML = html;
-    link.href = '#';
+    link.href = 'javascript:void(0)';
     link.addEventListener('click', fn);
     return link;
   }

packages/layers/src/plugins/LayerStylePlugin.ts

@@ -13,7 +13,9 @@ export default class LayerStylePlugin implements ILayerPlugin {
       layer.updateLayerConfig({});
       const { autoFit } = layer.getLayerConfig();
       if (autoFit) {
-        layer.fitBounds();
+        setTimeout(() => {
+          layer.fitBounds();
+        }, 100);
       }
     });
   }

packages/react/package.json

@@ -27,7 +27,9 @@
     "@antv/l7": "^2.0.34",
     "@antv/l7-maps": "^2.0.34",
     "@babel/runtime": "^7.7.7",
-    "load-styles": "^2.0.0",
+    "load-styles": "^2.0.0"
+  },
+  "peerDependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.10.2"
   },

packages/react/src/component/AMapScene.tsx

@@ -1,7 +1,7 @@
 import { IMapConfig, ISceneConfig, Scene } from '@antv/l7';
 // @ts-ignore
 // tslint:disable-next-line:no-submodule-imports
-import GaodeMap from '@antv/l7-maps/lib/amap';
+import { GaodeMap } from '@antv/l7-maps';
 import React, { createElement, createRef, useEffect, useState } from 'react';
 import { SceneContext } from './SceneContext';
 interface IMapSceneConig {

packages/react/src/component/Control.tsx

@@ -1,9 +1,9 @@
-import { IControl, Logo, PositionType, Scale, Scene, Zoom } from '@antv/l7';
+import { IControl, Logo, PositionName, Scale, Scene, Zoom } from '@antv/l7';
 import React, { useEffect, useState } from 'react';
 import { useSceneValue } from './SceneContext';
 interface IControlProps {
   type: 'scale' | 'zoom' | 'logo';
-  position: PositionType;
+  position: PositionName;
   [key: string]: any;
 }
 export default React.memo(function MapControl(props: IControlProps) {
@@ -15,17 +15,17 @@ export default React.memo(function MapControl(props: IControlProps) {
     switch (type) {
       case 'scale':
         ctr = new Scale({
-          position,
+          position: position || 'bottomright',
         });
         break;
       case 'zoom':
         ctr = new Zoom({
-          position,
+          position: position || 'topright',
         });
         break;
       case 'logo':
         ctr = new Logo({
-          position,
+          position: position || 'bottomleft',
         });
     }
     setControl(ctr);

packages/react/src/component/LayerAttribute/Layer.tsx

@@ -103,6 +103,12 @@ export default function BaseLayer(type: string, props: ILayerProps) {
     }
   }, [options?.blend]);
 
+  // useEffect(() => {
+  //   if (layer && layer.inited && options && options.autoFit === true) {
+  //     layer.fitBounds();
+  //   }
+  // }, [options?.autoFit]);
+
   return layer !== null && layer !== undefined ? (
     <LayerContext.Provider value={layer}>
       <Source layer={layer} source={source} />

packages/react/src/component/MapboxScene.tsx

@@ -1,7 +1,7 @@
 import { IMapConfig, ISceneConfig, Scene, Zoom } from '@antv/l7';
 // @ts-ignore
 // tslint:disable-next-line:no-submodule-imports
-import Mapbox from '@antv/l7-maps/lib/mapbox';
+import { Mapbox } from '@antv/l7-maps';
 import React, { createElement, createRef, useEffect, useState } from 'react';
 import { SceneContext } from './SceneContext';
 interface IMapSceneConig {