feat: scene 实例化支持传入地图实例 & 更新文档

.storybook/addons.ts

@@ -1,3 +1,3 @@
 // import '@storybook/addon-actions/register';
-import '@storybook/addon-notes/register';
+// import '@storybook/addon-notes/register';
-import '@storybook/addon-storysource/register';
+// import '@storybook/addon-storysource/register';

.storybook/config.ts

@@ -1,13 +1,12 @@
 // tslint:disable-next-line:no-submodule-imports
 import '!style-loader!css-loader!sass-loader!./iframe.scss';
-// import '@storybook/addon-console';
 import { addParameters, configure } from '@storybook/react';
 import { create } from '@storybook/theming';
 
 addParameters({
   options: {
     isFullscreen: false,
-    showAddonsPanel: true,
+    showAddonsPanel: false,
     showSearchBox: false,
     panelPosition: 'bottom',
     hierarchySeparator: /\./,

.storybook/webpack.config.js

@@ -20,12 +20,12 @@ module.exports = ({ config }) => {
 
   config.module.rules.push({
     test: /\.stories\.tsx?$/,
-    loaders: [
+    // loaders: [
-      {
+    //   {
-        loader: require.resolve('@storybook/addon-storysource/loader'),
+    //     loader: require.resolve('@storybook/addon-storysource/loader'),
-        options: { parser: 'typescript' },
+    //     options: { parser: 'typescript' },
-      },
+    //   },
-    ],
+    // ],
     enforce: 'pre',
   },{
     test: /\.stories\.css?$/,

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

@@ -3,3 +3,50 @@ title: 弧线图
 order: 1
 ---
 将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
+
+## 使用
+
+### 数据
+绘制弧线只需提供起始点坐标即可
+
+```javascript
+ source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+```
+
+### shape
+
+弧线支持两种弧线算法
+
+- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
+- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
+- arc3d 3d 弧线地图 3D 视角
+
+
+### 示例代码
+
+```javascript
+const layer = new LineLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+      .size(1)
+      .shape('arc')
+      .color('#8C1EB2')
+      .style({
+        opacity: 0.8,
+      });
+```

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

@@ -3,3 +3,22 @@ title: 路径图
 order: 1
 ---
 用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
+
+## 使用
+
+### shape
+shape 设置成line即可绘制路线图
+- line 
+
+### size
+路径图线的size支持两个维度
+
+- width 宽度
+- height 高度
+
+```javascript
+ layer.size([2,10]) // 绘制宽度为2，高度为10的路径
+ 
+ layer.size('',[])
+```
+

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

@@ -6,7 +6,15 @@ order: 1
 
 ## 使用
 
-气泡图通过PointLayer对象实例化，shape 设置成 **circle**
+气泡图通过PointLayer对象实例化，
+
+### shape 
+ 
+ 通常气泡图shape 设置为 **circle**
+
+### size
+
+气泡图大小，需要指定数据映射字段
 
 ```javascript
 

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

@@ -0,0 +1,44 @@
+---
+title: 亮度图
+order: 3
+---
+亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
+
+## 使用
+
+### shape
+ - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
+### color 
+  - 无权重
+   如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
+  - 有权重
+    为数据有权重可以设置一组同一色相不同亮度的色带。
+
+
+```javascript
+const pointLayer = new PointLayer()
+      .source(data)
+      .size(2)
+      .shape('dot')
+      .color('h8', [
+        '#0A3663',
+        '#1558AC',
+        '#3771D9',
+        '#4D89E5',
+        '#64A5D3',
+        '#72BED6',
+        '#83CED6',
+        '#A6E1E0',
+        '#B8EFE2',
+        '#D7F9F0'
+      ])
+      .style({
+        opacity: 1
+      });
+
+    scene.addLayer(pointLayer);
+```
+
+## 相关demo
+
+[城市亮度图](../../../../examples/point/dot)

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

@@ -1,12 +0,0 @@
----
-title: 亮度图
-order: 3
----
-亮度图又层点密度图，在地理区域上绘制海量的点，地图上单位面积的点越多亮度越高
-
-
-##使用
-
-### shape
-
-亮度图可以不设置

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

@@ -3,3 +3,7 @@ title: 自定义 Marker
 order: 7
 ---
 可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
+
+## 使用
+
+[Marker 文档](../../component)

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

@@ -19,10 +19,14 @@ order: 2
 - rhombus
 - vesica
 
-### 视觉通道设置
+散点图shape 一般设置成常量
 
-shape、size 设置成常量
+### color
-color 可以设置根据数据映射
+
+color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
+
+### size
+散点图一般等大小的图形,size 一般设置成常量
 
 ```javascript
 

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

@@ -43,3 +43,4 @@ new PointLayer()
       strokeWidth: 1
     })
 ```
+## 相关demo

docs/api/map.en.md

@@ -0,0 +1,107 @@
+---
+title: 地图 Map
+order: 2
+---
+
+# 简介
+
+L7 专注数据可视化层数据表达，目前L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox两种。
+L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管理地图的操作方法。
+
+## Map
+
+### 引入Map
+
+```javascropt
+
+   import { GaodeMap } from '@antv/l7-maps';
+
+   import { Mapbox } from '@antv/l7-maps';
+```
+
+### 实例化
+
+⚠️ 使用地图申请地图token，L7 内部设置了默认token，仅供测试使用
+
+#### 高德地图实例化
+
+```javascript
+
+ const L7AMap = new GaodeMap({
+    pitch: 35.210526315789465,
+    style: 'dark',
+    center: [ 104.288144, 31.239692 ],
+    zoom: 4.4,
+    token:'xxxx - token'
+  })
+
+```
+
+#### Mapbox 地图实例化
+
+```javascript
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'dark',
+    center: [ 103.83735604457024, 1.360253881403068 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313
+    token:'xxxx - token'
+  })
+});
+```
+
+### 传入外部实例
+
+为了支持已有地图项目快速接入L7的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用Scene初始化地图
+
+⚠️  scene id 参数需要地图的Map实例是同个容器。
+
+⚠️  传入地图实例需要自行引入相关地图的API
+
+#### 传入高德地图实例
+
+```javascript
+    const map = new AMap.Map('map', {
+            viewMode: '3D',
+            resizeEnable: true, // 是否监控地图容器尺寸变化
+            zoom: 11, // 初始化地图层级
+            center: [116.397428, 39.90923], // 初始化地图中心点
+      });
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        mapInstance: map,
+      }),
+    });
+
+```
+
+#### 传入Mapbox 地图实例
+
+```javascript
+
+ mapboxgl.accessToken =
+      'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
+    const map = new mapboxgl.Map({
+      container: 'map', // container id
+      style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
+      center: [-74.5, 40], // starting position [lng, lat]
+      zoom: 9, // starting zoom
+    });
+
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        mapInstance: map,
+      }),
+    });
+```
+
+
+
+
+
+

docs/api/map.zh.md

@@ -0,0 +1,107 @@
+---
+title: 地图 Map
+order: 2
+---
+
+# 简介
+
+L7 专注数据可视化层数据表达，目前L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox两种。=
+L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管理地图的操作方法。
+
+## Map
+
+### 引入Map
+
+```javascropt
+
+   import { GaodeMap } from '@antv/l7-maps';
+
+   import { Mapbox } from '@antv/l7-maps';
+```
+
+### 实例化
+
+⚠️ 使用地图申请地图token，L7 内部设置了默认token，仅供测试使用
+
+#### 高德地图实例化
+
+```javascript
+
+ const L7AMap = new GaodeMap({
+    pitch: 35.210526315789465,
+    style: 'dark',
+    center: [ 104.288144, 31.239692 ],
+    zoom: 4.4,
+    token:'xxxx - token'
+  })
+
+```
+
+#### Mapbox 地图实例化
+
+```javascript
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'dark',
+    center: [ 103.83735604457024, 1.360253881403068 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313
+    token:'xxxx - token'
+  })
+});
+```
+
+### 传入外部实例
+
+为了支持已有地图项目快速接入L7的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用Scene初始化地图
+
+⚠️  scene id 参数需要地图的Map实例是同个容器。
+
+⚠️  传入地图实例需要自行引入相关地图的API
+
+#### 传入高德地图实例
+
+```javascript
+    const map = new AMap.Map('map', {
+            viewMode: '3D',
+            resizeEnable: true, // 是否监控地图容器尺寸变化
+            zoom: 11, // 初始化地图层级
+            center: [116.397428, 39.90923], // 初始化地图中心点
+      });
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        mapInstance: map,
+      }),
+    });
+
+```
+
+#### 传入Mapbox 地图实例
+
+```javascript
+
+ mapboxgl.accessToken =
+      'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
+    const map = new mapboxgl.Map({
+      container: 'map', // container id
+      style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
+      center: [-74.5, 40], // starting position [lng, lat]
+      zoom: 9, // starting zoom
+    });
+
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        mapInstance: map,
+      }),
+    });
+```
+
+
+
+
+
+

examples/point/dot/demo/meta.json

@@ -0,0 +1,19 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "normal2.js",
+      "title": "城市亮度图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "normal.js",
+      "title": "海量点",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"
+    }
+
+  ]
+}

examples/point/dot/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Dot Intensity
+order: 1
+---

examples/point/dot/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: "亮度图"
+order: 1
+---

examples/point/scatter/demo/meta.json

@@ -5,14 +5,10 @@
   },
   "demos": [
     {
-      "filename": "normal2.js",
+      "filename": "scatter.js",
-      "title": "城市亮度图",
+      "title": "散点图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ"
-    },
+
-    {
-      "filename": "normal.js",
-      "title": "海量点",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"
     }
 
   ]

examples/point/scatter/demo/scatter.js

@@ -0,0 +1,47 @@
+import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    center: [ -121.24357, 37.58264 ],
+    pitch: 0,
+    zoom: 6.45
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
+)
+  .then(res => res.text())
+  .then(data => {
+    const pointLayer = new PointLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'Longitude',
+          y: 'Latitude'
+        }
+      })
+      .shape('circle')
+      .size(4)
+      .color('Magnitude', [
+        '#0A3663',
+        '#1558AC',
+        '#3771D9',
+        '#4D89E5',
+        '#64A5D3',
+        '#72BED6',
+        '#83CED6',
+        '#A6E1E0',
+        '#B8EFE2',
+        '#D7F9F0'
+      ])
+      .style({
+        opacity: 0.5,
+        strokeWidth: 0
+      });
+
+    scene.addLayer(pointLayer);
+  });

examples/tutorial/map/demo/amapInstance.js

@@ -0,0 +1,14 @@
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const map = new AMap.Map('container', {
+  resizeEnable: true, // 是否监控地图容器尺寸变化
+  zoom: 11, // 初始化地图层级
+  center: [ 116.397428, 39.90923 ] // 初始化地图中心点
+});
+new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    mapInstance: map
+  })
+});

packages/core/src/services/config/warnInfo.ts

@@ -1,10 +1,12 @@
 export interface IWarnInfo {
   MapToken: string;
+  SDK: string;
   [key: string]: any;
 }
 const WarnInfo: IWarnInfo = {
-  MapToken: '您正在使用 Demo测试地图token，如果生成环境中使用去对应地图请注册Token',
+  MapToken:
-  SDK: 's',
+    '您正在使用 Demo测试地图token，如果生成环境中使用去对应地图请注册Token',
+  SDK: '请确认引入了mapbox-gl api且在L7之前引入',
 };
 
 export default WarnInfo;

packages/core/src/services/map/IMapService.ts

@@ -66,11 +66,15 @@ export const MapServiceEvent = ['mapload'];
 /**
  * 地图初始化配置项
  */
-export interface IMapConfig {
+export interface IMapConfig<RawMap = {}> {
+  /**
+   * 地图实例
+   */
+  mapInstance?: RawMap;
   /**
    * 容器 DOM id
    */
-  id: string;
+  id: string | HTMLDivElement;
 
   /**
    * 地图

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

@@ -9,6 +9,7 @@ export interface ISceneService {
   init(config: IMapConfig & IRenderConfig): void;
   addLayer(layer: ILayer): void;
   render(): void;
+  getSceneContainer(): HTMLDivElement;
   destroy(): void;
 }
 // scene 事件

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

@@ -184,7 +184,6 @@ export default class Scene extends EventEmitter implements ISceneService {
     }
 
     this.rendering = true;
-
     // 首次初始化，或者地图的容器被强制销毁的需要重新初始化
     if (!this.inited) {
       // 还未初始化完成需要等待
@@ -207,6 +206,10 @@ export default class Scene extends EventEmitter implements ISceneService {
     this.rendering = false;
   }
 
+  public getSceneContainer(): HTMLDivElement {
+    return this.$container as HTMLDivElement;
+  }
+
   public destroy() {
     this.emit('destroy');
     this.inited = false;

packages/layers/src/core/BaseLayer.ts

@@ -437,12 +437,17 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   }
 
   public active(options: IActiveOption) {
-    this.updateLayerConfig({
+    const activeOption: Partial<ILayerConfig> = {};
-      enableHighlight: isObject(options) ? true : options,
+    activeOption.enableHighlight = isObject(options) ? true : options;
-      highlightColor: isObject(options)
+    if (isObject(options)) {
-        ? options.color
+      activeOption.enableHighlight = true;
-        : this.getLayerConfig().highlightColor,
+      if (options.color) {
-    });
+        activeOption.highlightColor = options.color;
+      }
+    } else {
+      activeOption.enableHighlight = !!options;
+    }
+    this.updateLayerConfig(activeOption);
     return this;
   }
   public setActive(

packages/layers/src/plugins/DataSourcePlugin.ts

@@ -10,19 +10,24 @@ export default class DataSourcePlugin implements ILayerPlugin {
     layer.hooks.init.tap('DataSourcePlugin', () => {
       const { data, options } = layer.sourceOption;
       layer.setSource(new Source(data, options));
+      this.updateClusterData(layer);
     });
 
     // 检测数据是不否需要更新
     layer.hooks.beforeRenderData.tap('DataSourcePlugin', (flag) => {
+      return this.updateClusterData(layer);
+    });
+  }
+
+  private updateClusterData(layer: ILayer): boolean {
     const source = layer.getSource();
     const cluster = source.cluster;
     const { zoom = 0, maxZoom = 16 } = source.clusterOptions;
     const newZoom = this.mapService.getZoom();
     if (cluster && Math.abs(zoom - newZoom) > 1 && maxZoom > zoom) {
-        source.updateClusterData(Math.floor(newZoom) + 1);
+      source.updateClusterData(Math.floor(newZoom));
       return true;
     }
     return false;
-    });
   }
 }

packages/layers/src/point/index.ts

@@ -51,6 +51,9 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
       return 'normal';
     } else {
       const shape = item.shape;
+      if (shape === 'dot') {
+        return 'normal';
+      }
       if (shape2d?.indexOf(shape as string) !== -1) {
         return 'fill';
       }

packages/maps/src/amap/index.ts

@@ -228,15 +228,25 @@ export default class AMapService
       minZoom = 0,
       maxZoom = 18,
       token = AMAP_API_KEY,
+      mapInstance,
       ...rest
     } = this.config;
     // 高德地图创建独立的container；
 
-    // @ts-ignore
-    this.$mapContainer = this.creatAmapContainer(id);
     // tslint:disable-next-line:typedef
     await new Promise((resolve) => {
       const resolveMap = () => {
+        if (mapInstance) {
+          this.map = mapInstance as AMap.Map & IAMapInstance;
+          this.$mapContainer = this.map.getContainer();
+          setTimeout(() => {
+            this.map.on('camerachange', this.handleCameraChanged);
+            resolve();
+          }, 30);
+        } else {
+          this.$mapContainer = this.creatAmapContainer(
+            id as string | HTMLDivElement,
+          );
           // @ts-ignore
           this.map = new AMap.Map(this.$mapContainer, {
             mapStyle: this.getMapStyle(style),
@@ -244,12 +254,11 @@ export default class AMapService
             viewMode: '3D',
             ...rest,
           });
-
           // 监听地图相机事件
           this.map.on('camerachange', this.handleCameraChanged);
           resolve();
+        }
       };
-
       if (!document.getElementById(AMAP_SCRIPT_ID)) {
         // 异步加载高德地图
         // @see https://lbs.amap.com/api/javascript-api/guide/abc/load
@@ -257,7 +266,6 @@ export default class AMapService
         window.initAMap = (): void => {
           amapLoaded = true;
           resolveMap();
-
           if (pendingResolveQueue.length) {
             pendingResolveQueue.forEach((r) => r());
             pendingResolveQueue = [];
@@ -273,7 +281,7 @@ export default class AMapService
         $jsapi.src = url;
         document.head.appendChild($jsapi);
       } else {
-        if (amapLoaded) {
+        if (amapLoaded || mapInstance) {
           resolveMap();
         } else {
           pendingResolveQueue.push(resolveMap);
@@ -363,7 +371,6 @@ export default class AMapService
     $amapdiv.style.cssText += `
       position: absolute;
       top: 0;
-      z-index:2;
       height: 100%;
       width: 100%;
     `;

packages/maps/src/mapbox/index.ts

@@ -192,9 +192,9 @@ export default class MapboxService
       style = 'light',
       token = MAPBOX_API_KEY,
       rotation = 0,
+      mapInstance,
       ...rest
     } = this.config;
-    this.$mapContainer = document.getElementById(id);
 
     this.viewport = new Viewport();
 
@@ -210,6 +210,12 @@ export default class MapboxService
     if (token === MAPBOX_API_KEY && style !== 'blank') {
       this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
     }
+    if (mapInstance) {
+      // @ts-ignore
+      this.map = mapInstance;
+      this.$mapContainer = this.map.getContainer();
+    } else {
+      this.$mapContainer = this.creatAmapContainer(id);
       // @ts-ignore
       this.map = new mapboxgl.Map({
         container: id,
@@ -218,6 +224,7 @@ export default class MapboxService
         bearing: rotation,
         ...rest,
       });
+    }
     this.map.on('load', this.handleCameraChanged);
     this.map.on('move', this.handleCameraChanged);
 
@@ -276,6 +283,14 @@ export default class MapboxService
     this.cameraChangedCallback(this.viewport);
   };
 
+  private creatAmapContainer(id: string | HTMLDivElement) {
+    let $wrapper = id as HTMLDivElement;
+    if (typeof id === 'string') {
+      $wrapper = document.getElementById(id) as HTMLDivElement;
+    }
+    return $wrapper;
+  }
+
   private removeLogoControl(): void {
     // @ts-ignore
     const controls = this.map._controls as IControl[];

packages/scene/src/index.ts

@@ -106,6 +106,7 @@ class Scene
 
   public addLayer(layer: ILayer): void {
     // 为当前图层创建一个容器
+    // TODO: 初始化的时候设置 容器
     const layerContainer = createLayerContainer(this.container);
     layer.setContainer(layerContainer);
     this.sceneService.addLayer(layer);

stories/Layers/components/Arcline.tsx

@@ -23,6 +23,7 @@ export default class ArcLineDemo extends React.Component {
         zoom: 2,
       }),
     });
+    this.scene = scene;
     const lineLayer = new LineLayer({
       enablePicking: true,
       enableHighlight: true,

stories/Layers/components/Point.tsx

@@ -26,8 +26,7 @@ export default class Point3D extends React.Component {
         zoom: 3,
       }),
     });
-    this.scene = scene;
+    scene.on('loaded', () => {
-
       const pointLayer = new PointLayer({})
         .source(pointsData, {
           cluster: true,
@@ -37,12 +36,15 @@ export default class Point3D extends React.Component {
           type: 'quantile',
         })
         .size('point_count', [5, 10, 15, 20, 25])
+        // .size(10)
         .color('red')
         .style({
           opacity: 0.3,
           strokeWidth: 1,
         });
       scene.addLayer(pointLayer);
+      this.scene = scene;
+    });
   }
 
   public render() {

stories/Layers/components/PointImage.tsx

@@ -1,5 +1,5 @@
 import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 export default class PointImage extends React.Component {
   // @ts-ignore
@@ -15,13 +15,14 @@ export default class PointImage extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMap({
+      map: new Mapbox({
         center: [121.4, 31.258134],
         zoom: 15,
         pitch: 0,
         style: 'dark',
       }),
     });
+    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ',

stories/Layers/components/Polygon3D.tsx

@@ -54,6 +54,7 @@ export default class Polygon3D extends React.Component {
         opacity: 1.0,
       });
     scene.addLayer(layer);
+    this.scene = scene;
   }
 
   public render() {

stories/Layers/components/Text.tsx

@@ -54,7 +54,6 @@ export default class Point3D extends React.Component {
       ])
       .size('scalerank', [2, 4, 6, 8, 10]);
     scene.addLayer(pointLayer);
-    console.log(pointLayer);
     scene.render();
     this.scene = scene;
   }

stories/Layers/components/column.tsx

@@ -22,7 +22,7 @@ export default class Column extends React.Component {
         rotation: 134.9507,
       }),
     });
-
+    this.scene = scene;
     fetch(
       'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
     )

stories/Layers/components/data_update.tsx

@@ -45,6 +45,7 @@ export default class DataUpdate extends React.Component {
       .source(pointOnCircle(0))
       .shape('circle')
       .size(15) // default 1
+      .active(false)
       .color('#2F54EB')
       .style({
         strokeColor: '#fff',
@@ -54,10 +55,7 @@ export default class DataUpdate extends React.Component {
     scene.addLayer(layer);
     function animateMarker(timestamp: number) {
       layer.setData(pointOnCircle(timestamp / 1000));
-
       scene.render();
-
-      // setTimeout(animateMarker, 100);
       requestAnimationFrame(animateMarker);
     }
     layer.on('inited', () => {

stories/MapAdaptor/Map.stories.tsx

@@ -2,6 +2,8 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import GaodeMap from './components/AMap';
 import Mapbox from './components/Mapbox';
+import MapboxInstance from './components/MapboxInstance';
+import AMapinstance from './components/MapInstance';
 import Mixed from './components/Mixed';
 import MultiAMap from './components/MultiAMap';
 import MultiMapbox from './components/MultiMapbox';
@@ -12,9 +14,15 @@ storiesOf('地图底图', module)
   .add('高德地图', () => <GaodeMap />, {
     notes: { markdown: notes },
   })
+  .add('高德地图实例', () => <AMapinstance />, {
+    notes: { markdown: notes },
+  })
   .add('Mapbox', () => <Mapbox />, {
     notes: { markdown: notes },
   })
+  .add('Mapbox地图实例', () => <MapboxInstance />, {
+    notes: { markdown: notes },
+  })
   .add('多个高德地图实例', () => <MultiAMap />, {
     notes: { markdown: notes },
   })

stories/MapAdaptor/components/MapInstance.tsx

@@ -0,0 +1,78 @@
+// @ts-ignore
+import { PolygonLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class GaodeMapComponent extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+    );
+    const data = await response.json();
+    // @ts-ignore
+    window.initAMap = () => {
+      const map = new AMap.Map('map', {
+        viewMode: '3D',
+        resizeEnable: true, // 是否监控地图容器尺寸变化
+        zoom: 11, // 初始化地图层级
+        center: [116.397428, 39.90923], // 初始化地图中心点
+      });
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          mapInstance: map,
+        }),
+      });
+      const layer = new PolygonLayer({
+        enablePicking: false,
+      });
+      layer
+        .source(data)
+        .size('name', [0, 10000, 50000, 30000, 100000])
+        .color('name', [
+          '#2E8AE6',
+          '#69D1AB',
+          '#DAF291',
+          '#FFD591',
+          '#FF7A45',
+          '#CF1D49',
+        ])
+        .shape('fill')
+        .style({
+          opacity: 0.8,
+        });
+      scene.addLayer(layer);
+      scene.render();
+      this.scene = scene;
+    };
+    const url: string =
+      'https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D&callback=initAMap';
+    const $jsapi = document.createElement('script');
+    $jsapi.id = 'amap-script';
+    $jsapi.charset = 'utf-8';
+    $jsapi.src = url;
+    document.head.appendChild($jsapi);
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/MapAdaptor/components/MapboxInstance.tsx

@@ -0,0 +1,63 @@
+// @ts-ignore
+import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+import mapboxgl from 'mapbox-gl';
+
+export default class MapboxInstance extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+    );
+    mapboxgl.accessToken =
+      'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
+    const map = new mapboxgl.Map({
+      container: 'map', // container id
+      style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
+      center: [-74.5, 40], // starting position [lng, lat]
+      zoom: 9, // starting zoom
+    });
+
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        mapInstance: map,
+      }),
+    });
+    this.scene = scene;
+    const layer = new PolygonLayer({});
+
+    layer
+      .source(await response.json())
+      .size('name', [0, 10000, 50000, 30000, 100000])
+      .color('name', () => {
+        return 'red';
+      })
+      .shape('fill')
+      .style({
+        opacity: 0.8,
+      });
+    scene.addLayer(layer);
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}