refactor: iE 11 打包支持

2020-02-25 20:35:43 +08:00 · 2020-02-25 20:35:43 +08:00 · 92b898ba28
parent 4ba3d50ab8
commit 92b898ba28
27 changed files with 808 additions and 67 deletions
--- a/babel.config.js
+++ b/babel.config.js
@ -44,7 +44,7 @@ module.exports = api => {
        {
          // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
          // useBuiltIns: 'usage',
-          ...isCDNBundle ? { corejs: '3.0.0' } : {},
+          ...isCDNBundle ? { corejs: '2.0.0' } : {},
          useBuiltIns: isCDNBundle ? 'usage' : false,
          // set `modules: false` when building CDN bundle, let rollup do commonjs works
          // @see https://github.com/rollup/rollup-plugin-babel#modules
@ -69,7 +69,7 @@ module.exports = api => {
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-syntax-async-generators',
-      '@babel/plugin-transform-parameters',
+      // '@babel/plugin-transform-parameters',
      'transform-node-env-inline',
      [
        '@babel/plugin-proposal-decorators',
@ -116,7 +116,8 @@ module.exports = api => {
      // isCDNBundle ? 'inline-webgl-constants' : {},
    ],
    ignore: [
-      // /node_modules\/(?![d3*])/,
+      // /node_modules\/(?![kdbush|supercluster|async])/,
+      'node_modules',
      ...!isTest ? [
        '**/*.test.tsx',
        '**/*.test.ts',
--- a/package.json
+++ b/package.json
@ -36,6 +36,7 @@
    "@types/node": "^12.12.22",
    "@types/storybook__react": "^4.0.2",
    "@types/supercluster": "^5.0.1",
+    "async-es": "^3.2.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
@ -177,7 +178,7 @@
  },
  "resolutions": {
    "../core-js": "3",
-    "d3-array": "2.3.3"
+    "d3-array": "1"
  },
  "tnpm": {
    "mode": "yarn"
--- a/packages/async-hook/src/core/AsyncParallelHook.ts
+++ b/packages/async-hook/src/core/AsyncParallelHook.ts
@ -1,6 +1,6 @@
 // @ts-ignore
 // tslint:disable-next-line:no-submodule-imports
-import parallel from 'async/parallel';
+import async from 'async/dist/async.js';
 import { CallBack } from './IHook';
 export default class AsyncParallelHook {
  private tasks: any[];
@ -9,7 +9,18 @@ export default class AsyncParallelHook {
  }

  public promise(...args: any[]) {
-    return parallel(this.tasks);
+    return new Promise((resolve, reject) => {
+      async.parallel(this.tasks).then((res: any, err: any) => {
+        if (err) {
+          reject(err);
+        }
+        resolve();
+      });
+    });
+
+    // return async.parallel(this.tasks).then((err, res) => {
+    //   return new Promise(r);
+    // });
  }
  public tapPromise(name: string, cb: CallBack) {
    this.tasks.push(async (callback: any) => {
--- a/packages/async-hook/src/core/SyncBailHook.ts
+++ b/packages/async-hook/src/core/SyncBailHook.ts
@ -1,6 +1,6 @@
 // @ts-ignore
 // tslint:disable-next-line:no-submodule-imports
-import series from 'async/series';
+import async from 'async/dist/async.js';
 import { CallBack, IHook } from './IHook';
 export default class SyncBailHook implements IHook {
  private tasks: any[];
@ -8,8 +8,8 @@ export default class SyncBailHook implements IHook {
    this.tasks = [];
  }

-  public call(...args: any[]) {
-    return series(this.tasks);
+  public call(...args: any[]): void {
+    return async.series(this.tasks);
  }
  public tap(name: string, cb: CallBack) {
    this.tasks.push((callback: any) => {
--- a/packages/async-hook/src/core/SyncHook.ts
+++ b/packages/async-hook/src/core/SyncHook.ts
@ -1,6 +1,6 @@
 // @ts-ignore
-// tslint:disable-next-line: no-submodule-imports
-import series from 'async/series';
+// tslint:disable-next-line:no-submodule-imports
+import async from 'async/dist/async.js';
 import { CallBack, IHook } from './IHook';
 export default class SyncHook implements IHook {
  private tasks: any[];
@ -9,9 +9,9 @@ export default class SyncHook implements IHook {
    this.tasks = [];
  }

-  public call(...args: any[]) {
+  public call(...args: any[]): void {
    this.args = args;
-    return series(this.tasks);
+    return async.series(this.tasks);
  }
  public tap(name: string, cb: CallBack) {
    this.tasks.push((callback: any) => {
--- a/packages/async-hook/src/core/SyncWaterfallHook.ts
+++ b/packages/async-hook/src/core/SyncWaterfallHook.ts
@ -1,6 +1,6 @@
 // @ts-ignore
 // tslint:disable-next-line:no-submodule-imports
-import waterfall from 'async/waterfall';
+import async from 'async/dist/async.js';
 import { CallBack, IHook } from './IHook';
 export default class SyncWaterfallHook implements IHook {
  private tasks: any[];
@ -8,8 +8,8 @@ export default class SyncWaterfallHook implements IHook {
    this.tasks = [];
  }

-  public call(...args: any[]) {
-    return waterfall(this.tasks);
+  public call(...args: any[]): void {
+    return async.waterfall(this.tasks);
  }
  public tap(name: string, cb: CallBack) {
    if (this.tasks.length === 0) {
--- a/packages/async-hook/tsconfig.build.json
+++ b/packages/async-hook/tsconfig.build.json
@ -4,7 +4,6 @@
    "declarationDir": "./es",
    "rootDir": "./src",
    "baseUrl": "./",
-    "target": "es6",
  },
  "include": ["./src"]
 }
--- a/packages/component/src/markerlayer.ts
+++ b/packages/component/src/markerlayer.ts
@ -10,7 +10,9 @@ import {
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
 import { merge } from 'lodash';
-import Supercluster from 'supercluster';
+// @ts-ignore
+// tslint:disable-next-line:no-submodule-imports
+import Supercluster from 'supercluster/dist/supercluster';
 import Marker from './marker';
 type CallBack = (...args: any[]) => any;
 interface IMarkerStyleOption {
@ -150,20 +152,20 @@ export default class MarkerLayer extends EventEmitter {
  }

  private getClusterMarker(viewBounds: IBounds, zoom: number) {
-    const viewBBox = viewBounds[0].concat(viewBounds[1]) as GeoJSON.BBox;
+    const viewBBox = viewBounds[0].concat(viewBounds[1]);
    const clusterPoint = this.clusterIndex.getClusters(viewBBox, zoom);
    this.clusterMarkers.forEach((marker: IMarker) => {
      marker.remove();
    });
    this.clusterMarkers = [];
-    clusterPoint.forEach((feature) => {
+    clusterPoint.forEach((feature: any) => {
      const { field, method } = this.markerLayerOption.clusterOption;
      // 处理聚合数据
      if (feature.properties && feature.properties?.cluster_id) {
        const clusterData = this.getLeaves(feature.properties?.cluster_id);
        feature.properties.clusterData = clusterData;
        if (field && method) {
-          const columnData = clusterData?.map((item) => {
+          const columnData = clusterData?.map((item: any) => {
            const data = {
              [field]: item.properties[field],
            };
--- a/packages/core/src/services/log/LogService.ts
+++ b/packages/core/src/services/log/LogService.ts
@ -1,9 +1,10 @@
 import { injectable } from 'inversify';
 import Probe, { Log } from 'probe.gl';
 import { ILogService } from './ILogService';
+// !process.env.NODE_ENV === 'production',
 const Logger = new Log({ id: 'L7' }).enable(
  // @ts-ignore
-  !process.env.NODE_ENV === 'production',
+  process.env.NODE_ENV !== 'production',
 );
 // // 只输出 debug 级别以上的日志信息
 Logger.priority = 5;
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/packages/core/src/services/scene/SceneService.ts
@ -187,9 +187,8 @@ export default class Scene extends EventEmitter implements ISceneService {
    // TODO：init worker, fontAtlas...

    // 执行异步并行初始化任务
-    this.initPromise = this.hooks.init.promise(
-      this.configService.getSceneConfig(this.id),
-    );
+    // @ts-ignore
+    this.initPromise = this.hooks.init.promise();

    this.render();
  }
@ -209,10 +208,9 @@ export default class Scene extends EventEmitter implements ISceneService {
    // 首次初始化，或者地图的容器被强制销毁的需要重新初始化
    if (!this.inited) {
      // 还未初始化完成需要等待
-
      await this.initPromise;
-      // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？

+      // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
      this.logger.info(' render inited');
      this.layerService.initLayers();
      this.controlService.addControls();
--- a/packages/core/src/shaders/projection.glsl
+++ b/packages/core/src/shaders/projection.glsl
@ -63,10 +63,10 @@ vec3 project_offset_normal(vec3 vector) {
  }
  return project_normal(vector);
 }
-
+// || u_CoordinateSystem < COORDINATE_SYSTEM_P20_OFFSET + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_P20_OFFSET - 0.01
 // reverse Y
 vec3 reverse_offset_normal(vec3 vector) {
-  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {
+  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 ||u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET ) {
    return vector * vec3(1.0, -1.0, 1.0);
  }
  return vector;
--- a/packages/l7/demo/circle.html
+++ b/packages/l7/demo/circle.html
@ -23,10 +23,9 @@
  </head>
  <body>
    <div id="map"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
-     <!-- <script src="https://cdn.jsdelivr.net/npm/symbol-es6@0.1.2/symbol-es6.min.js"></script> -->
-    <script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>

+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
+    <script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
    <script src="../dist/l7-dev.js"></script>
    <script>
      console.log(L7);
@ -36,13 +35,13 @@
          style: "dark", // 样式URL
          center: [108.6167, 19.1000],
          pitch: 0,
-          zoom: 13
+          zoom: 6
        })
      });

      const data = {"list":[{"w":19.1000,"t":24.6000,"s":"海南","l":11,"m":"东方","j":108.6167,"h":"59838"},{"w":20.0000,"t":23.8000,"s":"海南","l":11,"m":"海口","j":110.2500,"h":"59758"},{"w":22.2750,"t":23.6000,"s":"广东","l":12,"m":"珠海","j":113.5669,"h":"59488"},{"w":20.3372,"t":23.4000,"s":"广东","l":12,"m":"徐闻","j":110.1794,"h":"59754"},{"w":19.2089,"t":23.2000,"s":"海南","l":12,"m":"琼海","j":110.4819,"h":"59855"},{"w":21.7358,"t":23.2000,"s":"广东","l":11,"m":"上川岛","j":112.7731,"h":"59673"},{"w":23.3853,"t":23.0000,"s":"广东","l":11,"m":"汕头","j":116.6792,"h":"59316"},{"w":22.5417,"t":23.0000,"s":"广东","l":12,"m":"深圳","j":114.0033,"h":"59493"},{"w":19.5167,"t":22.9000,"s":"海南","l":12,"m":"儋州","j":109.5833,"h":"59845"},{"w":21.1547,"t":22.7000,"s":"广东","l":12,"m":"湛江","j":110.3022,"h":"59658"},{"w":21.4500,"t":22.7000,"s":"广西","l":12,"m":"北海","j":109.1333,"h":"59644"},{"w":22.5000,"t":22.6000,"s":"广东","l":12,"m":"中山","j":113.4000,"h":"59485"},{"w":21.8453,"t":22.6000,"s":"广东","l":12,"m":"阳江","j":111.9783,"h":"59663"},{"w":22.3469,"t":22.6000,"s":"广东","l":12,"m":"信宜","j":110.9250,"h":"59456"},{"w":22.8000,"t":22.5000,"s":"广东","l":12,"m":"汕尾","j":115.3667,"h":"59501"},{"w":23.4275,"t":22.3000,"s":"广东","l":12,"m":"南澳","j":117.0292,"h":"59324"},{"w":22.7100,"t":22.3000,"s":"广东","l":12,"m":"罗定","j":111.6000,"h":"59462"},{"w":19.0333,"t":22.3000,"s":"海南","l":12,"m":"琼中","j":109.8333,"h":"59849"},{"w":21.5458,"t":22.2000,"s":"广东","l":11,"m":"电白","j":110.9886,"h":"59664"},{"w":22.9661,"t":21.9000,"s":"广东","l":12,"m":"东莞","j":113.7389,"h":"59289"},{"w":22.2472,"t":21.8000,"s":"广东","l":12,"m":"台山","j":112.7858,"h":"59478"},{"w":22.9836,"t":21.6000,"s":"广东","l":12,"m":"惠来","j":116.3014,"h":"59317"},{"w":22.9906,"t":21.0000,"s":"广东","l":12,"m":"高要","j":112.4786,"h":"59278"},{"w":23.9000,"t":20.8000,"s":"广西","l":12,"m":"百色","j":106.6000,"h":"59211"},{"w":23.0711,"t":20.4000,"s":"广东","l":12,"m":"惠阳","j":114.3744,"h":"59298"},{"w":23.4497,"t":20.4000,"s":"广东","l":12,"m":"揭西","j":115.8492,"h":"59306"},{"w":23.3353,"t":20.4000,"s":"广东","l":11,"m":"增城","j":113.8275,"h":"59294"},{"w":23.4167,"t":19.9000,"s":"广西","l":12,"m":"那坡","j":105.8333,"h":"59209"},{"w":24.9000,"t":19.7000,"s":"福建","l":11,"m":"崇武","j":118.9167,"h":"59133"},{"w":24.4833,"t":19.7000,"s":"福建","l":12,"m":"厦门","j":118.0667,"h":"59134"},{"w":23.7936,"t":19.6000,"s":"广东","l":12,"m":"河源","j":114.7297,"h":"59293"},{"w":23.7106,"t":19.4000,"s":"广东","l":12,"m":"清远","j":113.0850,"h":"59280"},{"w":23.1000,"t":19.4000,"s":"广西","l":12,"m":"靖西","j":106.4500,"h":"59218"},{"w":23.6000,"t":19.4000,"s":"广西","l":13,"m":"田东","j":107.1167,"h":"59224"},{"w":25.5167,"t":19.2000,"s":"福建","l":12,"m":"平潭","j":119.7833,"h":"58944"},{"w":25.0500,"t":19.2000,"s":"福建","l":12,"m":"龙岩","j":117.0167,"h":"58927"},{"w":23.2100,"t":19.0000,"s":"广东","l":12,"m":"广州","j":113.4822,"h":"59287"},{"w":21.9833,"t":18.9000,"s":"广西","l":12,"m":"钦州","j":108.6000,"h":"59632"}]}

-
+   scene.on('loaded',function(){
     const pointLayer = new L7.PointLayer({})
            .source(data.list, {
              parser: {
@ -68,7 +67,15 @@
            .style({
              opacity: 1.0
            });
+
          scene.addLayer(pointLayer);
+          pointLayer.on('inited',function(){
+            console.log('加载完成');
+          })
+          scene.render();
+
+   })
+
    </script>
  </body>
 </html>
--- a/packages/layers/package.json
+++ b/packages/layers/package.json
@ -29,9 +29,9 @@
    "@babel/runtime": "^7.7.7",
    "@mapbox/martini": "^0.1.0",
    "@turf/meta": "^6.0.2",
-    "d3-array": "2.3.3",
+    "d3-array": "1",
    "d3-color": "^1.4.0",
-    "d3-scale": "^3.1.0",
+    "d3-scale": "2",
    "earcut": "^2.2.1",
    "eventemitter3": "^4.0.0",
    "gl-matrix": "^3.1.0",
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@ -304,7 +304,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter

    // 触发 init 生命周期插件
    this.hooks.init.call();
-
    // this.pickingPassRender = this.normalPassFactory('pixelPicking');
    // this.pickingPassRender.init(this);
    this.hooks.afterInit.call();
@ -525,6 +524,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
      });
      this.hooks.beforeSelect
        .call(encodePickingColor(id as number) as number[])
+        // @ts-ignore
        .then(() => {
          setTimeout(() => {
            this.reRender();
@ -569,6 +569,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
      });
      this.hooks.beforeSelect
        .call(encodePickingColor(id as number) as number[])
+        // @ts-ignore
        .then(() => {
          setTimeout(() => {
            this.reRender();
--- a/packages/layers/src/line/shaders/line_vert.glsl
+++ b/packages/layers/src/line/shaders/line_vert.glsl
@ -38,7 +38,7 @@ void main() {
  }
  v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));
  v_color = a_Color;
-  vec3 size = a_Miter * a_Size.x * reverse_offset_normal(a_Normal);  //v_normal * vec3(1., -1., 1.0);
+  vec3 size = a_Miter * a_Size.x * reverse_offset_normal(a_Normal);
  vec2 offset = project_pixel(size.xy);
  v_side = a_Miter * a_Size.x;
  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
--- a/packages/layers/src/plugins/DataSourcePlugin.ts
+++ b/packages/layers/src/plugins/DataSourcePlugin.ts
@ -10,9 +10,6 @@ export default class DataSourcePlugin implements ILayerPlugin {
    layer.hooks.init.tap('DataSourcePlugin', () => {
      const { data, options } = layer.sourceOption;
      layer.setSource(new Source(data, options));
-      // if (layer.getSource().data.dataArray.length === 0) {
-      //   return true;
-      // }
      this.updateClusterData(layer);
    });

--- a/packages/layers/src/plugins/UpdateModelPlugin.ts
+++ b/packages/layers/src/plugins/UpdateModelPlugin.ts
@ -9,6 +9,7 @@ export default class UpdateModelPlugin implements ILayerPlugin {
    layer.hooks.beforeRender.tap('UpdateModelPlugin', () => {
      // 处理文本更新
      if (layer.layerModel) {
+        // console.log(layer.layerModelNeedUpdate);
        layer.layerModel.needUpdate();
      }
    });
--- a/packages/react/src/component/LayerAttribute/Filter.tsx
+++ b/packages/react/src/component/LayerAttribute/Filter.tsx
@ -13,6 +13,6 @@ export default React.memo(function Chart(props: ILayerProps) {
    if (filter.field) {
      layer.filter(filter.field as string, filter.values as StyleAttrField);
    }
-  }, [filter.field, JSON.stringify(filter.values)]);
+  }, [filter.field, filter.values, JSON.stringify(filter.values)]);
  return null;
 });
--- a/packages/react/tsconfig.build.json
+++ b/packages/react/tsconfig.build.json
@ -4,7 +4,6 @@
    "declarationDir": "./es",
    "rootDir": "./src",
    "baseUrl": "./",
-    "target": "es6",
  },
  "include": ["./src"]
 }
--- a/packages/source/src/source.ts
+++ b/packages/source/src/source.ts
@ -20,9 +20,10 @@ import {
  Properties,
 } from '@turf/helpers';
 import { EventEmitter } from 'eventemitter3';
-import { Container } from 'inversify';
 import { cloneDeep, isFunction, isString } from 'lodash';
-import Supercluster from 'supercluster';
+// @ts-ignore
+// tslint:disable-next-line:no-submodule-imports
+import Supercluster from 'supercluster/dist/supercluster';
 import { getParser, getTransform } from './';
 import { statMap } from './utils/statistics';
 import { getColumn } from './utils/util';
@ -101,17 +102,17 @@ export default class Source extends EventEmitter {
    const { method = 'sum', field } = this.clusterOptions;
    let data = this.clusterIndex.getClusters(this.extent, zoom);
    this.clusterOptions.zoom = zoom;
-    data.forEach((p) => {
+    data.forEach((p: any) => {
      if (!p.id) {
        p.properties.point_count = 1;
      }
    });
    if (field || isFunction(method)) {
-      data = data.map((item) => {
+      data = data.map((item: any) => {
        const id = item.id as number;
        if (id) {
          const points = this.clusterIndex.getLeaves(id, Infinity);
-          const properties = points.map((d) => d.properties);
+          const properties = points.map((d: any) => d.properties);
          let statNum;
          if (isString(method) && field) {
            const column = getColumn(properties, field);
--- a/packages/source/src/transform/cluster.ts
+++ b/packages/source/src/transform/cluster.ts
@ -1,5 +1,7 @@
 import { IParserCfg, IParserData, ISourceCFG, ITransform } from '@antv/l7-core';
-import Supercluster from 'supercluster';
+// @ts-ignore
+// tslint:disable-next-line:no-submodule-imports
+import Supercluster from 'supercluster/dist/supercluster';
 export function cluster(data: IParserData, option: ITransform): IParserData {
  const { radius = 80, maxZoom = 18, minZoom = 0, field, zoom = 2 } = option;
  if (data.pointIndex) {
@ -14,8 +16,8 @@ export function cluster(data: IParserData, option: ITransform): IParserData {
    radius,
    minZoom,
    maxZoom,
-    map: (props) => ({ sum: props[field] }), // 根据指定字段求和
-    reduce: (accumulated, props) => {
+    map: (props: any) => ({ sum: props[field] }), // 根据指定字段求和
+    reduce: (accumulated: any, props: any) => {
      accumulated.sum += props.sum;
    },
  });
@ -40,7 +42,7 @@ export function cluster(data: IParserData, option: ITransform): IParserData {
  });
  pointIndex.load(geojson.features);
  const clusterPoint = pointIndex.getClusters(data.extent, zoom);
-  const resultData = clusterPoint.map((point, index) => {
+  const resultData = clusterPoint.map((point: any, index: number) => {
    return {
      coordinates: point.geometry.coordinates,
      _id: index + 1,
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@ -1,3 +1,4 @@
+// @ts-ignore
 export { djb2hash, BKDRHash } from './hash';
 import * as DOM from './dom';
 export * from './fetchData';
--- a/packages/utils/tsconfig.build.json
+++ b/packages/utils/tsconfig.build.json
@ -3,7 +3,11 @@
  "compilerOptions": {
    "declarationDir": "./es",
    "rootDir": "./src",
-    "baseUrl": "./"
+    "baseUrl": "./",
+    "moduleResolution": "Node",
+    "paths": {
+      "*": ["node_modules", "typings/*"]
+    }
  },
  "include": ["./src"]
 }
--- a/stories/Source/Map.stories.tsx
+++ b/stories/Source/Map.stories.tsx
@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
+import Line from './components/line';
 import MultiLine from './components/multiLine';
 import MultiPolygon from './components/multiPolygon';
 import UpdatePolygon from './components/updatedata';
@ -9,4 +10,5 @@ import notes from './Map.md';
 storiesOf('数据', module)
  .add('multiPolygon', () => <MultiPolygon />, {})
  .add('updatePolygon', () => <UpdatePolygon />, {})
-  .add('MultiLine', () => <MultiLine />, {});
+  .add('MultiLine', () => <MultiLine />, {})
+  .add('折线', () => <Line />, {});
--- a/stories/Source/components/line.tsx
+++ b/stories/Source/components/line.tsx
@ -0,0 +1,701 @@
+import { LineLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+const data = [
+  {
+    n: '南路',
+    lnglat: [115.789286, 28.552708],
+  },
+  {
+    n: '',
+    lnglat: [115.789273, 28.553421],
+  },
+  {
+    n: '',
+    lnglat: [115.789337, 28.558138],
+  },
+  {
+    n: '大岗',
+    lnglat: [115.789363, 28.56059],
+  },
+  {
+    n: '',
+    lnglat: [115.789332, 28.563834],
+  },
+
+  {
+    n: '',
+    lnglat: [115.789337, 28.563947],
+  },
+
+  {
+    n: '',
+    lnglat: [115.789343, 28.564178],
+  },
+
+  {
+    n: '',
+    lnglat: [115.789353, 28.564249],
+  },
+
+  {
+    n: '',
+    lnglat: [115.789439, 28.565144],
+  },
+  {
+    n: '',
+    lnglat: [115.790002, 28.568079],
+  },
+
+  {
+    n: '',
+    lnglat: [115.790684, 28.571047],
+  },
+
+  {
+    n: '生米',
+    lnglat: [115.790844, 28.571832],
+  },
+  {
+    n: '',
+    lnglat: [115.791392, 28.574256],
+  },
+  {
+    n: '',
+    lnglat: [115.792052, 28.576215],
+  },
+  {
+    n: '',
+    lnglat: [115.793023, 28.578778],
+  },
+  {
+    n: '九龙湖南',
+    lnglat: [115.793023, 28.578778],
+  },
+  {
+    n: '',
+    lnglat: [115.793827, 28.580743],
+  },
+  {
+    n: '',
+    lnglat: [115.793876, 28.580964],
+  },
+  {
+    n: '',
+    lnglat: [115.794412, 28.584275],
+  },
+
+  {
+    n: '',
+    lnglat: [115.795142, 28.589066],
+  },
+
+  {
+    n: '',
+    lnglat: [115.795903, 28.592264],
+  },
+
+  {
+    n: '市民中心',
+    lnglat: [115.79619, 28.593435],
+  },
+  {
+    n: '',
+    lnglat: [115.796526, 28.594803],
+  },
+
+  {
+    n: '',
+    lnglat: [115.796633, 28.595185],
+  },
+  {
+    n: '',
+    lnglat: [115.796767, 28.595491],
+  },
+
+  {
+    n: '',
+    lnglat: [115.79696, 28.595858],
+  },
+
+  {
+    n: '',
+    lnglat: [115.798301, 28.597959],
+  },
+  {
+    n: '鹰潭街',
+    lnglat: [115.799006, 28.599043],
+  },
+  {
+    n: '',
+    lnglat: [115.802067, 28.603936],
+  },
+  {
+    n: '',
+    lnglat: [115.802153, 28.604185],
+  },
+  {
+    n: '',
+    lnglat: [115.802223, 28.604416],
+  },
+
+  {
+    n: '',
+    lnglat: [115.802244, 28.60467],
+  },
+  {
+    n: '',
+    lnglat: [115.802239, 28.604854],
+  },
+
+  {
+    n: '',
+    lnglat: [115.80218, 28.605005],
+  },
+
+  {
+    n: '',
+    lnglat: [115.802078, 28.605155],
+  },
+  {
+    n: '',
+    lnglat: [115.801858, 28.605381],
+  },
+
+  {
+    n: '',
+    lnglat: [115.801552, 28.605603],
+  },
+  {
+    n: '',
+    lnglat: [115.801193, 28.605815],
+  },
+
+  {
+    n: '国博',
+    lnglat: [115.79587, 28.608219],
+  },
+  {
+    n: '',
+    lnglat: [115.789761, 28.610943],
+  },
+  {
+    n: '',
+    lnglat: [115.789375, 28.611136],
+  },
+
+  {
+    n: '',
+    lnglat: [115.789192, 28.611268],
+  },
+  {
+    n: '',
+    lnglat: [115.788801, 28.611659],
+  },
+  {
+    n: '',
+    lnglat: [115.78857, 28.611956],
+  },
+  {
+    n: '',
+    lnglat: [115.788372, 28.612281],
+  },
+
+  {
+    n: '',
+    lnglat: [115.788157, 28.612968],
+  },
+
+  {
+    n: '',
+    lnglat: [115.788114, 28.613194],
+  },
+
+  {
+    n: '',
+    lnglat: [115.788093, 28.613684],
+  },
+  {
+    n: '',
+    lnglat: [115.788195, 28.61416],
+  },
+
+  {
+    n: '',
+    lnglat: [115.788522, 28.614852],
+  },
+  {
+    n: '西站南广场',
+    lnglat: [115.790539, 28.618386],
+  },
+  {
+    n: '南昌西站',
+    lnglat: [115.793362, 28.623431],
+  },
+  {
+    n: '',
+    lnglat: [115.794101, 28.624802],
+  },
+  {
+    n: '',
+    lnglat: [115.794273, 28.625108],
+  },
+  {
+    n: '',
+    lnglat: [115.794407, 28.625268],
+  },
+  {
+    n: '',
+    lnglat: [115.794616, 28.625466],
+  },
+  {
+    n: '',
+    lnglat: [115.795018, 28.625786],
+  },
+
+  {
+    n: '',
+    lnglat: [115.795598, 28.626022],
+  },
+  {
+    n: '',
+    lnglat: [115.796161, 28.62605],
+  },
+  {
+    n: '',
+    lnglat: [115.796649, 28.625956],
+  },
+
+  {
+    n: '龙岗',
+    lnglat: [115.802987, 28.623161],
+  },
+
+  {
+    n: '',
+    lnglat: [115.811584, 28.619359],
+  },
+  {
+    n: '',
+    lnglat: [115.812592, 28.619217],
+  },
+  {
+    n: '',
+    lnglat: [115.813676, 28.619321],
+  },
+
+  {
+    n: '',
+    lnglat: [115.81455, 28.619533],
+  },
+  {
+    n: '',
+    lnglat: [115.814867, 28.619702],
+  },
+  {
+    n: '',
+    lnglat: [115.815231, 28.619966],
+  },
+  {
+    n: '',
+    lnglat: [115.815398, 28.620178],
+  },
+  {
+    n: '国体中心',
+    lnglat: [115.816739, 28.622378],
+  },
+
+  {
+    n: '',
+    lnglat: [115.821454, 28.630396],
+  },
+  {
+    n: '卧龙山',
+    lnglat: [115.822477, 28.631606],
+  },
+
+  {
+    n: '',
+    lnglat: [115.824088, 28.633306],
+  },
+  {
+    n: '',
+    lnglat: [115.827655, 28.636569],
+  },
+
+  {
+    n: '',
+    lnglat: [115.828578, 28.637637],
+  },
+  {
+    n: '',
+    lnglat: [115.829125, 28.638508],
+  },
+  {
+    n: '',
+    lnglat: [115.82978, 28.639944],
+  },
+  {
+    n: '岭北',
+    lnglat: [115.830145, 28.641038],
+  },
+  {
+    n: '',
+    lnglat: [115.83148, 28.645264],
+  },
+  {
+    n: '',
+    lnglat: [115.832676, 28.647915],
+  },
+
+  {
+    n: '',
+    lnglat: [115.833519, 28.649393],
+  },
+
+  {
+    n: '前湖大道',
+    lnglat: [115.834939, 28.651869],
+  },
+  {
+    n: '学府大道东',
+    lnglat: [115.839123, 28.659244],
+  },
+  {
+    n: '翠苑路',
+    lnglat: [115.846675, 28.67262],
+  },
+
+  {
+    n: '地铁大厦',
+    lnglat: [115.852386, 28.684076],
+  },
+
+  {
+    n: '',
+    lnglat: [115.854048, 28.686417],
+  },
+
+  {
+    n: '',
+    lnglat: [115.854794, 28.688695],
+  },
+
+  {
+    n: '',
+    lnglat: [115.855159, 28.689706],
+  },
+  {
+    n: '',
+    lnglat: [115.855572, 28.690403],
+  },
+
+  {
+    n: '',
+    lnglat: [115.856296, 28.691259],
+  },
+
+  {
+    n: '雅苑路',
+    lnglat: [115.857386, 28.692061],
+  },
+  {
+    n: '',
+    lnglat: [115.85937, 28.693306],
+  },
+  {
+    n: '',
+    lnglat: [115.863087, 28.694582],
+  },
+
+  {
+    n: '',
+    lnglat: [115.863404, 28.694572],
+  },
+  {
+    n: '',
+    lnglat: [115.863983, 28.69452],
+  },
+  {
+    n: '',
+    lnglat: [115.864509, 28.69437],
+  },
+  {
+    n: '',
+    lnglat: [115.865056, 28.694012],
+  },
+  {
+    n: '红谷中大道',
+    lnglat: [115.867006, 28.691703],
+  },
+  {
+    n: '',
+    lnglat: [115.869128, 28.689165],
+  },
+
+  {
+    n: '',
+    lnglat: [115.869562, 28.688873],
+  },
+  {
+    n: '',
+    lnglat: [115.870023, 28.688713],
+  },
+
+  {
+    n: '',
+    lnglat: [115.882029, 28.686248],
+  },
+  {
+    n: '',
+    lnglat: [115.882624, 28.686233],
+  },
+
+  {
+    n: '',
+    lnglat: [115.883231, 28.686299],
+  },
+  {
+    n: '',
+    lnglat: [115.885452, 28.68733],
+  },
+
+  {
+    n: '',
+    lnglat: [115.886315, 28.687598],
+  },
+  {
+    n: '',
+    lnglat: [115.887442, 28.687669],
+  },
+  {
+    n: '',
+    lnglat: [115.889555, 28.687777],
+  },
+
+  {
+    n: '阳明公园',
+    lnglat: [115.891286, 28.687954],
+  },
+  {
+    n: '',
+    lnglat: [115.894791, 28.688233],
+  },
+  {
+    n: '',
+    lnglat: [115.900021, 28.687753],
+  },
+
+  {
+    n: '青山路口',
+    lnglat: [115.901382, 28.686738],
+  },
+
+  {
+    n: '',
+    lnglat: [115.902832, 28.68548],
+  },
+
+  {
+    n: '',
+    lnglat: [115.903202, 28.684765],
+  },
+  {
+    n: '',
+    lnglat: [115.903251, 28.683852],
+  },
+
+  {
+    n: '福州路',
+    lnglat: [115.903284, 28.680642],
+  },
+  {
+    n: '八一广场',
+    lnglat: [115.902665, 28.67514],
+  },
+
+  {
+    n: '',
+    lnglat: [115.903379, 28.672778],
+  },
+  {
+    n: '',
+    lnglat: [115.90375, 28.6689],
+  },
+
+  {
+    n: '',
+    lnglat: [115.903884, 28.668415],
+  },
+
+  {
+    n: '',
+    lnglat: [115.904002, 28.668166],
+  },
+  {
+    n: '',
+    lnglat: [115.904275, 28.66785],
+  },
+  {
+    n: '永叔路',
+    lnglat: [115.90533, 28.666803],
+  },
+  {
+    n: '',
+    lnglat: [115.907757, 28.664447],
+  },
+  {
+    n: '',
+    lnglat: [115.908218, 28.664296],
+  },
+
+  {
+    n: '',
+    lnglat: [115.909339, 28.664226],
+  },
+  {
+    n: '丁公路南',
+    lnglat: [115.910889, 28.664118],
+  },
+  {
+    n: '',
+    lnglat: [115.916538, 28.663567],
+  },
+
+  {
+    n: '南昌火车站',
+    lnglat: [115.921001, 28.663184],
+  },
+
+  {
+    n: '',
+    lnglat: [115.922766, 28.663143],
+  },
+
+  {
+    n: '',
+    lnglat: [115.924236, 28.663313],
+  },
+  {
+    n: '',
+    lnglat: [115.925996, 28.663576],
+  },
+  {
+    n: '顺外',
+    lnglat: [115.928124, 28.663683],
+  },
+
+  {
+    n: '',
+    lnglat: [115.929933, 28.663718],
+  },
+  {
+    n: '',
+    lnglat: [115.931575, 28.663332],
+  },
+  {
+    n: '',
+    lnglat: [115.932991, 28.662979],
+  },
+  {
+    n: '',
+    lnglat: [115.933635, 28.662898],
+  },
+  {
+    n: '',
+    lnglat: [115.937873, 28.662851],
+  },
+  {
+    n: '',
+    lnglat: [115.938457, 28.662724],
+  },
+  {
+    n: '',
+    lnglat: [115.938897, 28.6624],
+  },
+
+  {
+    n: '',
+    lnglat: [115.939203, 28.661934],
+  },
+  {
+    n: '',
+    lnglat: [115.939391, 28.661505],
+  },
+  {
+    n: '',
+    lnglat: [115.939503, 28.661082],
+  },
+  {
+    n: '',
+    lnglat: [115.93953, 28.660663],
+  },
+
+  {
+    n: '辛家庵',
+    lnglat: [115.93957, 28.659337],
+  },
+];
+
+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: 50,
+        style: 'light',
+        center: [115.857963, 28.683016],
+        zoom: 14,
+        minZoom: 9,
+        rotation: 0,
+      }),
+    });
+
+    const lineData = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    const p = {
+      type: 'Feature',
+      properties: {},
+      geometry: { type: 'LineString', coordinates: [] },
+    };
+
+    data.forEach((item) => {
+      // @ts-ignore
+      p.geometry.coordinates.push(item.lnglat as number[]);
+    });
+    // @ts-ignore
+    lineData.features.push(p);
+
+    const layer = new LineLayer({})
+      .source(lineData)
+      .size([2, 3])
+      .shape('line')
+      .color('rgb(255, 187, 0)');
+    scene.addLayer(layer);
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -19,6 +19,7 @@
    "paths": {
      "@antv/l7-*": ["packages/*/src"],
      "@antv/l7": ["packages/l7/src"],
+      "@antv/async-hook": ["packages/async-hook/src"],
      "*": ["node_modules", "packages", "typings/*"]
    }
  },
--- a/yarn.lock
+++ b/yarn.lock
@ -4801,6 +4801,11 @@ async-each@^1.0.1:
  resolved "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==

+async-es@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/async-es/-/async-es-3.2.0.tgz#8837aa12f675de80fac56b94a4b4cef515343de3"
+  integrity sha512-dMWVIUBi/ejt+QERtMdIin2rlzSNK7GAfEwIyaOGDy536s0OqH+aUNkj9MQ01hq2rB1f7x6w7RJchtthCk0IDA==
+
 async-foreach@^0.1.3:
  version "0.1.3"
  resolved "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
@ -7889,10 +7894,15 @@ cz-conventional-changelog@^3.0.2:
  optionalDependencies:
    "@commitlint/load" ">6.1.1"

-"d3-array@1.2.0 - 2", d3-array@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.npmjs.org/d3-array/-/d3-array-2.3.3.tgz#e90c39fbaedccedf59fc30473092f99a0e14efa2"
-  integrity sha512-syv3wp0U5aB6toP2zb2OdBkhTy1MWDsCAaYk6OXJZv+G4u7bSWEmYgxLoFyc88RQUhZYGCebW9a9UD1gFi5+MQ==
+d3-array@1, d3-array@^1.2.0:
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
+
+d3-collection@1:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
+  integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==

 d3-color@1, d3-color@^1.4.0:
  version "1.4.0"
@ -7928,7 +7938,7 @@ d3-hexbin@^0.2.2:
  resolved "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz#9c5837dacfd471ab05337a9e91ef10bfc4f98831"
  integrity sha1-nFg32s/UcasFM3qeke8Qv8T5iDE=

-d3-interpolate@1, d3-interpolate@^1.2.0:
+d3-interpolate@1:
  version "1.4.0"
  resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987"
  integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
@ -7942,14 +7952,15 @@ d3-interpolate@~1.1.5:
  dependencies:
    d3-color "1"

-d3-scale@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.1.tgz#da1684adce7261b4bc7a76fe193d887f0e909e69"
-  integrity sha512-huz5byJO/6MPpz6Q8d4lg7GgSpTjIZW/l+1MQkzKfu2u8P6hjaXaStOpmyrD6ymKoW87d2QVFCKvSjLwjzx/rA==
+d3-scale@2:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz#4e880e0b2745acaaddd3ede26a9e908a9e17b81f"
+  integrity sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==
  dependencies:
-    d3-array "1.2.0 - 2"
+    d3-array "^1.2.0"
+    d3-collection "1"
    d3-format "1"
-    d3-interpolate "^1.2.0"
+    d3-interpolate "1"
    d3-time "1"
    d3-time-format "2"