Merge branch 'publish' into feat-yanxiong-merge

2022-10-10 20:26:12 +08:00 · 2022-10-10 20:26:12 +08:00 · 0d3996cef4
parent d95f3d31e6 17a8a05d41
commit 0d3996cef4
1598 changed files with 53419 additions and 29600 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,21 @@
+build/
+coverage/
+lib/
+dist/
+mocks/
+node_modules/
+demos/
+.cache
+public
+bin
+esm/
+es/
+tests/
+stories/
+gatsby-browser.js
+webpack.*.js
+gatsby-*.js
+global.d.ts
+jest.config.js
+.eslintrc.*
+packages/utils/src/mini-adapter/
--- a/.eslintrc
+++ b/.eslintrc
@ -1,39 +0,0 @@
-{
-  "extends": [
-    "eslint-config-egg"
-  ],
-  "globals": {
-    "AMap": true,
-    "L7": true,
-  },
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "plugins": [
-    "html"
-  ],
-  "rules": {
-    "no-bitwise": [
-      0
-    ],
-    "experimentalDecorators": [
-      0
-    ],
-    "comma-dangle": [
-      "error",
-      "never"
-    ],
-    "jsdoc/require-param": 0,
-    "linebreak-style": [
-      0
-    ],
-    "indent": ["error", 2, {
-    "ignoredNodes": ["TemplateLiteral"]
-  }]
-  }
-}
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,44 @@
+module.exports = {
+    globals: {
+        "AMap": true,
+        "L7": true,
+    },
+    env: {
+        browser: true,
+        es2021: true,
+        node: true,
+        jest: true,
+    },
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 12,
+        sourceType: 'module'
+    },
+    plugins: ['@typescript-eslint',"unused-imports"],
+    rules: {
+        "unused-imports/no-unused-imports": "error",
+        '@typescript-eslint/no-loss-of-precision':0,
+        '@typescript-eslint/no-inferrable-types': 0,
+        'no-constant-condition': 0,
+        '@typescript-eslint/ban-types': 0,
+        '@typescript-eslint/ban-ts-comment': 0,
+        '@typescript-eslint/no-empty-function': 0,
+        'no-prototype-builtins': 0,
+        'no-case-declarations': 0,
+        'no-useless-catch': 0,
+        '@typescript-eslint/explicit-module-boundary-types': 0,
+        '@typescript-eslint/no-explicit-any':0,
+        'prefer-rest-params':0,
+    },
+    settings: {
+        'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx'],
+        },
+        'import/resolver': {
+            typescript: {
+                alwaysTryTypes: true,
+            },
+        },
+    }
+};
--- a/.fatherrc.ts
+++ b/.fatherrc.ts
@ -0,0 +1,23 @@
+export default {
+  // more father 4 config: https://github.com/umijs/father-next/blob/master/docs/config.md
+  esm: {
+    output: 'es',
+  },
+  cjs: {
+    output: 'lib',
+  },
+  transformer: 'babel',
+  autoprefixer: {
+    browsers: ['IE 11', 'last 2 versions'],
+  },
+  extraBabelPresets: ['@babel/preset-typescript'],
+  extraBabelPlugins: [
+    // 开发模式下以原始文本引入，便于调试
+    [
+      // import glsl as raw text
+      'babel-plugin-inline-import',
+      { extensions: ['.glsl'] },
+    ],
+    ['transform-import-css-l7'],
+  ],
+};
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -32,16 +32,12 @@ copy node_modules/gl/deps/windows/dll/x64/*.dll c:\windows\system32

 ## 运行 DEMO

-启动各个 package 代码变更监听：
-```bash
-yarn watch
-```

-启动 Storybook，会自动打开 `http://localhost:6006/`：
-```bash
-yarn storybook
-```

+```bash
+yarn dev
+```
+打开  `http://localhost:6006/`：
 ## 运行测试

 运行单元测试：
--- a/.github/release.yaml
+++ b/.github/release.yaml
@ -0,0 +1,24 @@
+# for .github/workflows/release-label.yml
+
+changelog:
+  exclude:
+    labels:
+      - ignore-for-release
+      - chore
+  categories:
+    - title: 🎉 New Features
+      labels:
+        - feature
+        - enhancement
+    - title: 📖 Documentation Changes
+      labels:
+        - documentation
+    - title: 🐛 Bug Fixes
+      labels:
+        - bugfix
+    - title: 🛠 Breaking Changes
+      labels:
+        - breaking
+    - title: Other Changes
+      labels:
+        - "*"
--- a/.github/workflows/build_test.yml
+++ b/.github/workflows/build_test.yml
@ -0,0 +1,18 @@
+name: lint
+
+on: [pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: yarn
+    - run: yarn build
--- a/.github/workflows/gitleaks.yml
+++ b/.github/workflows/gitleaks.yml
@ -14,4 +14,4 @@ jobs:
      with:
        args: -O .gitleaks.toml https://raw.githubusercontent.com/ycjcl868/gitleaks/master/.gitleaks.toml
    - name: gitleaks-action
-      uses: zricethezav/gitleaks-action@master
+      uses: zricethezav/gitleaks-action@v1.6.0
--- a/.github/workflows/mirror.yml
+++ b/.github/workflows/mirror.yml
@ -17,25 +17,3 @@ jobs:
          # 注意替换为你的 Gitee 目标仓库地址
          destination-repo: 'git@gitee.com:antv-l7/antv-l7.git'

-     - name: 🔁 Sync to Gitee
-        uses: wearerequired/git-mirror-action@master
-        env:
-          # 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
-          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
-        with:
-          # 注意替换为你的 GitHub 源仓库地址
-          source-repo: 'git@github.com:antvis/L7.git'
-          # 注意替换为你的 Gitee 目标仓库地址
-          destination-repo: 'git@gitee.com:antv/L7.git'
-
-      - name: ✅ Build Gitee Pages
-        uses: yanglbme/gitee-pages-action@master
-        with:
-          # 注意替换为你的 Gitee 用户名
-          gitee-username: afc163
-          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
-          gitee-password: ${{ secrets.GITEE_PASSWORD }}
-          # 注意替换为你的 Gitee 仓库
-          gitee-repo: antv-l7/antv-l7
-          # 要部署的分支
-          branch: gh-pages
--- a/.github/workflows/preview.yml
+++ b/.github/workflows/preview.yml
@ -1,17 +0,0 @@
-name: 🔂 Surge PR Preview
-
-on: pull_request
-
-jobs:
-  preview:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: afc163/surge-preview@v1
-        with:
-          surge_token: ${{ secrets.SURGE_TOKEN }}
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          build: |
-            yarn --frozen-lockfile
-            yarn site:build
-          dist: public
--- a/.github/workflows/release-label.yml
+++ b/.github/workflows/release-label.yml
@ -0,0 +1,14 @@
+# Warning, do not check out untrusted code with
+# the pull_request_target event.
+on:
+  pull_request_target:
+    types: [ opened, edited ]
+name: conventional-release-labels
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: bcoe/conventional-release-labels@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          type_labels: '{"feat": "feature", "fix": "bugfix", "breaking": "breaking", "docs": "documentation", "chore": "chore"}'
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -0,0 +1,40 @@
+name: release
+
+on:
+  release:
+    types: [created, edited]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - run: yarn
+      - run: yarn lint
+
+  publish-site:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - run: yarn
+      - run: yarn site:build
+      - run: |
+          cd public
+          git init
+          git config --local user.name antv
+          git config --local user.email antv@antfin.com
+          git add .
+          git commit -m "update by release action"
+      - uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{secrets.GITHUB_TOKEN}}
+          directory: public
+          branch: gh-pages
+          force: true
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -0,0 +1,23 @@
+name: test
+
+on: [pull_request]
+
+jobs:
+  test:
+    runs-on: macos-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: yarn
+    - run: yarn run worker
+    - run: yarn test-cover
+    - name: Coveralls
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -84,8 +84,7 @@ stories/Test
 packages/draw/node_modules/@turf
 packages/district/src/data

-# npm command lines
-publish.sh
-latest.sh
-beta.sh
-mini.sh
+.umi-production/
+.umi/
+docs-dist
+/packages/leaflet
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@ -21,7 +21,13 @@ addParameters({
 });

 // automatically import all files ending in *.stories.tsx
-const req = require.context('../stories', true, /\.stories\.tsx$/);
+
+// const req = require.context('../stories', true, /\.stories\.tsx$/);
+// const req = require.context('../stories/layerbuild', true, /\.stories\.tsx$/);
+// const req = require.context('../stories/Map', true, /\.stories\.tsx$/);
+const req = require.context('../stories/template', true, /\.stories\.tsx$/);
+// const req = require.context('../stories/MapPerformance', true, /\.stories\.tsx$/);
+// const req = require.context('../stories/tile', true, /\.stories\.tsx$/);

 function loadStories() {
  req.keys().forEach(req);
--- a/.umirc.ts
+++ b/.umirc.ts
@ -0,0 +1,73 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'L7 开发 Demo',
+  favicon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+  logo: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+  outputPath: 'docs-dist',
+  base: '/',
+  devServer: {
+    port: '6006',
+  },
+  resolve: {
+    includes: ['dev-demos'],
+  },
+  polyfill: {
+    imports: ['element-remove', 'babel-polyfill'],
+  },
+  targets: {
+    chrome: 58,
+    ie: 11,
+  },
+  mode: 'site',
+  esbuild: false,
+  chainWebpack: (memo, { env, webpack, createCSSRule }) => {
+    // 设置 alias
+    memo.module
+      .rule('lint')
+      .test(/\.glsl$/)
+      .use('babel')
+      .loader('ts-shader-loader');
+    // 还可以创建具名use (loaders)
+  },
+  extraBabelPresets: ['@babel/preset-typescript'],
+  extraBabelIncludes: [
+    '@umijs/preset-dumi',
+    'split-on-first',
+    'query-string',
+    'strict-uri-encode',
+    'copy-text-to-clipboard',
+  ],
+  extraBabelPlugins: [
+    ['transform-import-css-l7'],
+    ['babel-plugin-inline-import', { extensions: ['.worker.js'] }],
+  ],
+  navs: [
+    null,
+    {
+      title: 'GitHub',
+      path: 'https://github.com/antvis/L7',
+    },
+  ],
+  externals: {
+    react: 'window.React',
+    'react-dom': 'window.ReactDOM',
+    antd: 'window.antd',
+    lodash: '_',
+    fetch: 'window.fetch',
+  },
+  links: ['https://gw.alipayobjects.com/os/lib/antd/4.16.13/dist/antd.css'],
+  scripts: [
+    'https://gw.alipayobjects.com/os/lib/whatwg-fetch/3.6.2/dist/fetch.umd.js',
+    'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.profiling.min.js',
+    'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.profiling.min.js',
+    'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.production.min.js',
+    'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js',
+    // 'https://gw.alipayobjects.com/os/lib/antd/4.16.13/dist/antd-with-locales.js',
+    'https://gw.alipayobjects.com/os/lib/antd/4.19.4/dist/antd.js',
+    /** lodash */
+    'https://gw.alipayobjects.com/os/lib/lodash/4.17.20/lodash.min.js',
+  ],
+
+  // more config: https://d.umijs.org/config
+});
--- a/LICENSE.md
+++ b/LICENSE.md
@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2017 Alipay.inc
+Copyright (c) 2018 AntV team

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.en-US.md
+++ b/README.en-US.md
@ -13,6 +13,8 @@ Powered by WebGL, the rendering technology of L7 supports fast and efficient ren

 L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services

+[website](https://l7.antv.vision/zh)
+
 ## 🌄 L7 visualization demos

 ![L7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ)
@ -92,7 +94,7 @@ scene.addLayer(pointLayer);
 - [L7Plot](https://github.com/antvis/L7Plot)
 - [L7 React](https://github.com/antvis/L7-React)
 - [L7 Boundary](https://github.com/antvis/L7-boundary)
- [L7 draw](https://github.com/antvis/L7-draw)
+- [L7Draw](https://github.com/antvis/L7Draw)

 ## ✅ License

--- a/README.md
+++ b/README.md
@ -12,6 +12,8 @@

 L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。

+[官网地址](https://l7.antv.vision/zh)
+
 L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。

 ![L7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ)
@ -124,7 +126,7 @@ scene.addLayer(pointLayer);
 - [L7Plot](https://github.com/antvis/L7Plot)
 - [L7 React](https://github.com/antvis/L7-React)
 - [L7 Boundary](https://github.com/antvis/L7-boundary)
- [L7 draw](https://github.com/antvis/L7-draw)
+- [L7Draw](https://github.com/antvis/L7Draw)

 ## ✅ License

--- a/babel.config.js
+++ b/babel.config.js
@ -1,21 +1,22 @@
 // @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
-module.exports = api => {
+module.exports = (api) => {
  api.cache(() => process.env.NODE_ENV);
  const isSite = api.env('site');
  const isCDNBundle = api.env('bundle');
  const isCommonJS = api.env('cjs');
  const isESModule = api.env('esm');
  const isTest = api.env('test');
- 
+
  if (isSite) {
    return {
+      skipEnvCheck: true,
      presets: [
        '@babel/preset-env',
        [
          '@babel/preset-react',
          {
-            development: isCommonJS
-          }
+            development: isCommonJS,
+          },
        ],
        // 'babel-preset-gatsby', {
        //   silence: true
@ -28,8 +29,8 @@ module.exports = api => {
        [
          '@babel/plugin-proposal-decorators',
          {
-            legacy: true
-          }
+            legacy: true,
+          },
        ],
        [
          // import glsl as raw text
@ -38,11 +39,11 @@ module.exports = api => {
            extensions: [
              // 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
              '.pbf',
-              '.glsl'
-            ]
-          }
-        ]
-      ]
+              '.glsl',
+            ],
+          },
+        ],
+      ],
    };
  }

@ -53,24 +54,24 @@ module.exports = api => {
        {
          // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
          // useBuiltIns: 'usage',
-          ...isCDNBundle ? { corejs: 3 } : {},
+          ...(isCDNBundle ? { corejs: 3 } : {}),
          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
-          modules: (isCDNBundle || isESModule) ? false : 'auto',
+          modules: isCDNBundle || isESModule ? false : 'auto',
          targets: {
            chrome: 58,
-            browsers: [ 'ie >= 11' ]
-          }
-        }
+            browsers: ['ie >= 11'],
+          },
+        },
      ],
      [
        '@babel/preset-react',
        {
-          development: isCommonJS
-        }
+          development: isCommonJS,
+        },
      ],
-      '@babel/preset-typescript'
+      '@babel/preset-typescript',
    ],
    plugins: [
      isCDNBundle ? {} : '@babel/plugin-transform-runtime',
@ -83,61 +84,70 @@ module.exports = api => {
      [
        '@babel/plugin-proposal-decorators',
        {
-          legacy: true
-        }
+          legacy: true,
+        },
      ],
      [
        '@babel/plugin-proposal-class-properties',
        {
          // @see https://github.com/storybookjs/storybook/issues/6069#issuecomment-472544973
-          loose: false
-        }
+          loose: false,
+        },
      ],
      '@babel/plugin-syntax-dynamic-import',
      // let rollup do commonjs works
      // @see https://github.com/rollup/rollup-plugin-babel#modules
-      (isCDNBundle || isESModule) ? {} : '@babel/plugin-transform-modules-commonjs',
+      isCDNBundle || isESModule
+        ? {}
+        : '@babel/plugin-transform-modules-commonjs',
      // 开发模式下以原始文本引入，便于调试
-      isCDNBundle ? {} : [
-        // import glsl as raw text
-        'babel-plugin-inline-import',
-        {
-          extensions: [
-            // 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
-            // '.json',
-            '.glsl'
-          ]
-        }
-      ],
-      isCDNBundle ? {} : [
-        'transform-import-css-l7'
-        // 'transform-import-styles' // babel 编译将样式打包到js
-      ],
+      isCDNBundle
+        ? {}
+        : [
+            // import glsl as raw text
+            'babel-plugin-inline-import',
+            {
+              extensions: [
+                // 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
+                // '.json',
+                '.glsl',
+                '.worker.js',
+              ],
+            },
+          ],
+      isCDNBundle
+        ? {}
+        : [
+            'transform-import-css-l7',
+            // 'transform-import-styles' // babel 编译将样式打包到js
+          ],
      [
        // @see https://github.com/babel/babel/issues/8741#issuecomment-509041135
        'const-enum',
        {
-          transform: 'constObject'
-        }
+          transform: 'constObject',
+        },
      ],
      // 按需引用 @see https://github.com/lodash/babel-plugin-lodash
-      'lodash'
+      'lodash',
      // 内联 WebGL 常量 @see https://www.npmjs.com/package/babel-plugin-inline-webgl-constants
      // isCDNBundle ? 'inline-webgl-constants' : {},
    ],
    ignore: [
      // /node_modules\/(?![kdbush|supercluster|async])/,
      'node_modules',
-      ...!isTest ? [
-        '**/*.test.tsx',
-        '**/*.test.ts',
-        '**/*.story.tsx',
-        '__snapshots__',
-        '__tests__',
-        '__stories__',
-        '**/*/__snapshots__',
-        '**/*/__tests__'
-      ] : []
-    ]
+      ...(!isTest
+        ? [
+            '**/*.test.tsx',
+            '**/*.test.ts',
+            '**/*.story.tsx',
+            '__snapshots__',
+            '__tests__',
+            '__stories__',
+            '**/*/__snapshots__',
+            '**/*/__tests__',
+          ]
+        : []),
+    ],
  };
 };
--- a/build/rollup-plugin-inline-worker.js
+++ b/build/rollup-plugin-inline-worker.js
@ -0,0 +1,16 @@
+import { createFilter } from 'rollup-pluginutils';
+
+export default function inlineWorker(include) {
+  const filter = createFilter(include);
+  return {
+    name: 'inline-worker',
+    transform(code, id) {
+      if (!filter(id)) return;
+
+      return {
+        code: `export default ${JSON.stringify(code)};`,
+        map: { mappings: '' },
+      };
+    },
+  };
+}
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@ -7,19 +7,18 @@ import { terser } from 'rollup-plugin-terser';
 import analyze from 'rollup-plugin-analyzer';
 import babel from 'rollup-plugin-babel';
 import glsl from './rollup-plugin-glsl';
+import inlineWorker from './rollup-plugin-inline-worker';
 import postcss from 'rollup-plugin-postcss';
 import url from 'postcss-url';

-
 const { BUILD, MINIFY } = process.env;
 const minified = MINIFY === 'true';
 const production = BUILD === 'production';
 const outputFile = !production
  ? 'packages/l7/dist/l7-dev.js'
  : minified
-    ? 'packages/l7/dist/l7.js'
-    : 'packages/l7/dist/l7-dev.js';
-
+  ? 'packages/l7/dist/l7.js'
+  : 'packages/l7/dist/l7-dev.js';

 function resolveFile(filePath) {
  return path.join(__dirname, '..', filePath);
@ -33,49 +32,41 @@ module.exports = [
      format: 'umd',
      name: 'L7',
      globals: {
-        'mapbox-gl': 'mapboxgl'
-      }
+        'mapbox-gl': 'mapboxgl',
+      },
    },
-    external: [
-      'mapbox-gl'
-    ],
+    external: ['mapbox-gl'],
    treeshake: minified,
    plugins: [
-      alias(
-        {
-          resolve: [ '.tsx', '.ts' ],
-          entries: [
-            {
-              find: /^@antv\/l7-(.*)/,
-              replacement: resolveFile('packages/$1/src')
-            },
-            {
-              find: /^@antv\/l7$/,
-              replacement: resolveFile('packages/l7/src')
-            }
-          ]
-        }
-      ),
+      alias({
+        resolve: ['.tsx', '.ts'],
+        entries: [
+          {
+            find: /^@antv\/l7-(.*)/,
+            replacement: resolveFile('packages/$1/src'),
+          },
+          {
+            find: /^@antv\/l7$/,
+            replacement: resolveFile('packages/l7/src'),
+          },
+        ],
+      }),
      resolve({
        browser: true,
        preferBuiltins: false,
-        extensions: [ '.js', '.ts' ]
+        extensions: ['.js', '.ts'],
      }),
-      glsl(
-        [ '**/*.glsl' ],
-        true
-      ),
+      glsl(['**/*.glsl'], true),
+      inlineWorker(['**/*.worker.js']),
      json(),
      postcss({
        extract: false,
-        plugins: [
-          url({ url: 'inline' })
-        ]
+        plugins: [url({ url: 'inline' })],
      }),
      // @see https://github.com/rollup/rollup-plugin-node-resolve#using-with-rollup-plugin-commonjs
      commonjs({
        namedExports: {
-          eventemitter3: [ 'EventEmitter' ],
+          eventemitter3: ['EventEmitter'],
          // inversify: [ 'inject', 'injectable', 'postConstruct', 'Container', 'decorate', 'interfaces' ],
          // @see https://github.com/rollup/rollup-plugin-commonjs/issues/266
          lodash: [
@ -87,22 +78,22 @@ module.exports = [
            'cloneDeep',
            'isString',
            'isNumber',
-            'merge'
-          ]
+            'merge',
+          ],
        },
        dynamicRequireTargets: [
-          'node_modules/inversify/lib/syntax/binding_{on,when}_syntax.js'
-        ]
+          'node_modules/inversify/lib/syntax/binding_{on,when}_syntax.js',
+        ],
      }),
      babel({
-        extensions: [ '.js', '.ts' ]
+        extensions: ['.js', '.ts'],
      }),
      // terser(),
      minified ? terser() : false,
      analyze({
        summaryOnly: true,
-        limit: 20
-      })
-    ]
-  }
+        limit: 20,
+      }),
+    ],
+  },
 ];
--- a/build/rollup.config.worker.js
+++ b/build/rollup.config.worker.js
@ -0,0 +1,64 @@
+import path from 'path';
+import alias from '@rollup/plugin-alias';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+// import analyze from 'rollup-plugin-analyzer';
+import babel from 'rollup-plugin-babel';
+
+const { BUILD } = process.env;
+const production = BUILD === 'production';
+const outputFile = production
+  ? 'packages/utils/dist/l7-utils.worker.js'
+  : 'packages/utils/dist/l7-utils.worker.js';
+function resolveFile(filePath) {
+  return path.join(__dirname, '..', filePath);
+}
+
+module.exports = [
+  {
+    input: resolveFile('packages/utils/src/workers/index.ts'),
+    output: {
+      file: resolveFile(outputFile),
+      format: 'iife',
+      name: 'L7',
+    },
+    context: 'self',
+    treeshake: true,
+    plugins: [
+      alias({
+        resolve: ['.tsx', '.ts'],
+        entries: [
+          {
+            find: /^@antv\/l7-(.*)\/src\/(.*)/,
+            replacement: resolveFile('packages/$1/src/$2'),
+          },
+          {
+            find: /^@antv\/l7-(.*)/,
+            replacement: resolveFile('packages/$1/src'),
+          },
+          {
+            find: /^@antv\/l7$/,
+            replacement: resolveFile('packages/l7/src'),
+          },
+        ],
+      }),
+      resolve({
+        browser: true,
+        preferBuiltins: false,
+        extensions: ['.js', '.ts'],
+      }),
+      json(),
+      commonjs(),
+      babel({
+        extensions: ['.js', '.ts'],
+      }),
+      production ? terser() : false,
+      // analyze({
+      //   summaryOnly: true,
+      //   limit: 20,
+      // }),
+    ],
+  },
+];
--- a/demos/demo/arc.js
+++ b/demos/demo/arc.js
@ -1,41 +0,0 @@
-import { Scene, LineLayer } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-
-const scene = new Scene({
-  id: 'map',
-  map: new Mapbox({
-    pitch: 0,
-    style: 'dark',
-    center: [0, 23.107329],
-    zoom: 0,
-  }),
-});
-
-fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json',
-)
-  .then((res) => res.json())
-  .then((data) => {
-    function getAirportCoord(idx) {
-      return [data.airports[idx][3], data.airports[idx][4]];
-    }
-    const routes = data.routes.map(function(airline) {
-      return {
-        coord: [getAirportCoord(airline[1]), getAirportCoord(airline[2])],
-      };
-    });
-    const layer = new LineLayer({})
-      .source(routes, {
-        parser: {
-          type: 'json',
-          coordinates: 'coord',
-        },
-      })
-      .size(0.6)
-      .shape('arc')
-      .color('rgb(5, 5, 50)')
-      .style({
-        opacity: 0.05,
-      });
-    scene.addLayer(layer);
-  });
--- a/demos/demo/bike.js
+++ b/demos/demo/bike.js
@ -1,110 +0,0 @@
-/* eslint-disable no-eval */
-import { Scene, LineLayer, PointLayer } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-
-const scene = new Scene({
-  id: 'map',
-  map: new Mapbox({
-    pitch: 40,
-    style: 'dark',
-    center: [ 3.438, 40.16797 ],
-    zoom: 0.51329
-  })
-});
-Promise.all(
-  [ fetch('https://gw.alipayobjects.com/os/basement_prod/9acd4831-5655-41a5-b0a0-831603e0092d.json').then(function(d) {
-    return d.text();
-  }).then(JSON.parse), fetch('https://gw.alipayobjects.com/os/basement_prod/dbe4e40b-3fbf-4a20-b36b-7a8bd3b8aef2.csv').then(function(d) {
-    return d.text();
-  }), fetch('https://gw.alipayobjects.com/os/basement_prod/89d20ef7-77df-44ca-a238-6e3679ab3ae4.csv').then(function(d) {
-    return d.text();
-  }) ]).then(function onLoad([ coordinates, trips, stations ]) {
-  const stationArray = parseCSV(stations);
-  const stationObj = {};
-  stationArray.forEach(function(st) {
-    stationObj[st.station_id] = {
-      x: st.longitude * 1,
-      y: st.latitude * 1
-    };
-  });
-  const tripsArray = parseCSV(trips);
-  const triplines = [];
-  tripsArray.forEach(function(trip) {
-    if (stationObj[trip.start_station] && stationObj[trip.end_station]) {
-      const line = {
-        x: stationObj[trip.start_station].x,
-        y: stationObj[trip.start_station].y,
-        x1: stationObj[trip.end_station].x,
-        y1: stationObj[trip.end_station].y,
-        duration: trip.duration
-      };
-      triplines.push(line);
-    }
-  });
-  const roadlayer = new LineLayer().source(coordinates).shape('line')
-    .size(0.6)
-    .color('#eee')
-    .active(true)
-    .style({
-      opacity: 0.9
-    });
-  const stationLayer = new PointLayer().source(stations, {
-    parser: {
-      type: 'csv',
-      x: 'longitude',
-      y: 'latitude'
-    }
-  }).shape('circle')
-    .active(true)
-    .size(40)
-    .color('#fec44f')
-    .animate(true)
-    .style({
-      opacity: 1.0
-    })
-    .render();
-
-  const arclayer = new LineLayer().source(triplines.slice(0, 1000), {
-    parser: {
-      type: 'json',
-      x: 'x',
-      y: 'y',
-      x1: 'x1',
-      y1: 'y1'
-    }
-  })
-    .color('#ff6b34')
-    .shape('arc3d')
-    .size(1)
-    .style({
-      opacity: 1.0
-    })
-    .animate({
-      interval: 0.5,
-      trailLength: 0.5,
-      duration: 1
-    });
-  arclayer.fitBounds();
-  scene.addLayer(roadlayer);
-  scene.addLayer(stationLayer);
-  scene.addLayer(arclayer);
-
-
-});
-
-function parseCSV(data) {
-  const lines = data.split('\n');
-  const header = lines[0];
-  const columns = header.split(',');
-  return lines.slice(1).filter(function(l) {
-    return l;
-  }).map(function(line) {
-    const obj = {};
-    line.split(',').forEach(function(value, i) {
-      const name = columns[i];
-      obj[name] = value;
-    });
-    return obj;
-  });
-}
-
--- a/demos/raster/basic/demo/image.js
+++ b/demos/raster/basic/demo/image.js
@ -1,25 +0,0 @@
-
-import { Scene, ImageLayer } from '@antv/l7';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 121.2680, 30.3628 ],
-  zoom: 13
-});
-
-const layer = new ImageLayer({});
-layer.source(
-  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
-  {
-    parser: {
-      type: 'image',
-      extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
-    }
-  }
-);
-scene.on('loaded', () => {
-  scene.addLayer(layer);
-});
-
--- a/demos/raster/basic/demo/meta.json
+++ b/demos/raster/basic/demo/meta.json
@ -1,21 +0,0 @@
-{
-  "title": {
-    "zh": "栅格图层",
-    "en": "Gallery"
-  },
-  "demos": [
-    {
-      "filename": "image.js",
-      "title": "图片",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "raster.js",
-      "title": "地形"
-    },
-    {
-      "filename": "light.js",
-      "title": "夜光图"
-    }
-  ]
-}
--- a/demos/react/scene/demo/amap.jsx
+++ b/demos/react/scene/demo/amap.jsx
@ -1,56 +0,0 @@
-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>
-    </>
-  );
-});
-
--- a/demos/react/scene/demo/meta.json
+++ b/demos/react/scene/demo/meta.json
@ -1,14 +0,0 @@
-{
-  "title": {
-    "zh": "Scene 组件",
-    "en": "Scene Component"
-  },
-  "demos": [
-
-    {
-      "filename": "amap.jsx",
-      "title": "高德地图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
-    }
-  ]
-}
--- a/demos/react/scene/index.zh.md
+++ b/demos/react/scene/index.zh.md
@ -1,4 +0,0 @@
---
-title: React 地图
-order: 0
---
--- a/demos/tutorial/control/demo/amap.js
+++ b/demos/tutorial/control/demo/amap.js
@ -1,56 +0,0 @@
-import { PointLayer, Scale, Scene, Layers, Zoom } from '@antv/l7';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'dark',
-  center: [121.40, 31.258134],
-  zoom: 14,
-});
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const pointLayer =
-      new PointLayer({
-      })
-        .source(data, {
-          parser: {
-            type: 'json',
-            x: 'longitude',
-            y: 'latitude'
-          }
-        }).shape('circle')
-        .size('unit_price', [5, 25])
-        .color('name',['#49B5AD', "#5B8FF9"])
-        .style({
-          opacity: 0.3,
-          strokeWidth: 1,
-        })
-
-      scene.addLayer(pointLayer);
-      var overlayers = {
-        "围栏填充": pointLayer,
-      };
-      var baseLayers = {
-        "基础地图": pointLayer,
-      };
-      const layersControl = new Layers({
-        overlayers: overlayers,
-      });
-      
-      scene.addControl(layersControl);
-
-  });
-
-
-
-
-  const zoomControl = new Zoom();
-  const scaleControl = new Scale({
-    position:"bottomright"
-  });
-
-  scene.addControl(zoomControl);
-  scene.addControl(scaleControl);
- 
--- a/demos/tutorial/control/demo/mapbox.js
+++ b/demos/tutorial/control/demo/mapbox.js
@ -1,18 +0,0 @@
-import { Scale, Zoom, Scene } from '@antv/l7';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [-97.119140625, 38.75408327579141],
-  zoom: 2,
-});
-
-const zoomControl = new Zoom();
-const scaleControl = new Scale({
-  position:'rightbottom',
-});
-scene.addControl(zoomControl);
-scene.addControl(scaleControl);
-
-
--- a/demos/tutorial/control/demo/popup.js
+++ b/demos/tutorial/control/demo/popup.js
@ -1,55 +0,0 @@
-import { Scale, Zoom, Scene, Layers, PointLayer } from '@antv/l7';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'dark',
-  center: [121.40, 31.258134],
-  zoom: 5,
-});
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const pointLayer =
-      new PointLayer({
-      })
-        .source(data, {
-          parser: {
-            type: 'json',
-            x: 'longitude',
-            y: 'latitude'
-          }
-        }).shape('circle')
-        .size('unit_price', [5, 25])
-        .color('name',['#49B5AD', "#5B8FF9"])
-        .style({
-          opacity: 0.3,
-          strokeWidth: 1,
-        })
-
-      scene.addLayer(pointLayer);
-      var overlayers = {
-        "围栏填充": pointLayer,
-      };
-      var baseLayers = {
-        "基础地图": pointLayer,
-      };
-      const layersControl = new Layers({
-        overlayers: overlayers,
-        baseLayers,
-      });
-
-      scene.addControl(layersControl);
-
-  });
-
-
-
-
-  const zoomControl = new Zoom();
-  const scaleControl = new Scale();
-
-  scene.addControl(zoomControl);
-  scene.addControl(scaleControl);
-
--- a/demos/tutorial/control/index.zh.md
+++ b/demos/tutorial/control/index.zh.md
@ -1,6 +0,0 @@
---
-title: 组件
-order: 2
---
-
-
--- a/demos/tutorial/data/demo/line.js
+++ b/demos/tutorial/data/demo/line.js
@ -1,37 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [102.602992, 23.107329],
-  zoom: 13,
-});
-
-fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new LineLayer({
-      })
-        .source(data)
-        .size(1)
-        .shape('line')
-        .color(
-          'ELEV',
-          [
-            '#E8FCFF',
-            '#CFF6FF',
-            '#A1E9ff',
-            '#65CEF7',
-            '#3CB1F0',
-            '#2894E0',
-            '#1772c2',
-            '#105CB3',
-            '#0D408C',
-            '#002466',
-          ].reverse(),
-        )
-    scene.addLayer(layer);
-
-  });
--- a/demos/tutorial/data/demo/meta.json
+++ b/demos/tutorial/data/demo/meta.json
@ -1,13 +0,0 @@
-{
-  "title": {
-    "zh": "图库",
-    "en": "Gallery"
-  },
-  "demos": [
-    {
-      "filename": "line.js",
-      "title": "线图层",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
-    }
-  ]
-}
--- a/demos/tutorial/map/demo/amap.js
+++ b/demos/tutorial/map/demo/amap.js
@ -1,9 +0,0 @@
-import { Scene } from '@antv/l7';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'dark',
-  center: [121.40, 31.258134],
-  zoom: 5,
-});
--- a/demos/tutorial/map/demo/mapbox.js
+++ b/demos/tutorial/map/demo/mapbox.js
@ -1,10 +0,0 @@
-import { Scene } from '@antv/l7';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [ -97.119140625, 38.75408327579141],
-  zoom: 2,
-});
-
--- a/demos/tutorial/map/demo/meta.json
+++ b/demos/tutorial/map/demo/meta.json
@ -1,18 +0,0 @@
-{
-  "title": {
-    "zh": "地图",
-    "en": "Category"
-  },
-  "demos": [
-    {
-      "filename": "amap.js",
-      "title": "高德底图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "mapbox.js",
-      "title": "MapBox底图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
-    }
-  ]
-}
--- a/demos/tutorial/map/index.en.md
+++ b/demos/tutorial/map/index.en.md
@ -1,6 +0,0 @@
---
-title: map
-order: 0
---
-初始 L7 地图实例
-
--- a/demos/tutorial/map/index.zh.md
+++ b/demos/tutorial/map/index.zh.md
@ -1,9 +0,0 @@
---
-title: 地图
-order: 0
-redirect_from:
-  - /zh/tutorial
---
-初始 L7 地图实例
-
-
--- a/dev-demos/bugs/index.md
+++ b/dev-demos/bugs/index.md
@ -0,0 +1 @@
+### 用于bug修复
--- a/dev-demos/features/canvasLayer/custom.md
+++ b/dev-demos/features/canvasLayer/custom.md
@ -0,0 +1,155 @@
+### CanvasLayer - demo1
+```tsx
+import { CanvasLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+ let x = 0;
+function draw(option) {
+const { size, ctx, mapService } = option;
+const [ width, height ] = size;
+
+const radius = 30,
+    rectWidth = radius * 2;
+const rectHeight = rectWidth;
+
+ctx.clearRect(0, 0, width, height);
+
+const points = [
+    {
+    lng: 108.544921875,
+    lat: 30.977609093348686,
+    level: 85,
+    color: 'rgba(	220,20,60, 0.6)'
+    },
+    {
+    lng: 110.654296875,
+    lat: 31.090574094954192,
+    level: 75,
+    color: 'rgba(	255,140,0, 0.6)'
+    },
+    {
+    lng: 112.5,
+    lat: 29.80251790576445,
+    level: 65,
+    color: 'rgba(255,165,0, 0.6)'
+    },
+    {
+    lng: 114.78515624999999,
+    lat: 30.64867367928756,
+    level: 40,
+    color: 'rgba(30,144,255, 0.6)'
+    },
+    {
+    lng: 116.49902343749999,
+    lat: 29.84064389983441,
+    level: 50,
+    color: 'rgba(30,144,255, 0.6)'
+    },
+    {
+    lng: 118.21289062499999,
+    lat: 31.16580958786196,
+    level: 20,
+    color: 'rgba(	127,255,0, 0.6)'
+    },
+    {
+    lng: 119.091796875,
+    lat: 32.509761735919426,
+    level: 50,
+    color: 'rgba(30,144,255, 0.6)'
+    },
+    {
+    lng: 121.0693359374999,
+    lat: 31.80289258670676,
+    level: 45,
+    color: 'rgba(30,144,255, 0.6)'
+    }
+];
+ctx.fillStyle = 'rgb(35,75,225)';
+ctx.font = 'normal small-caps bold 14px arial';
+ctx.textAlign = 'center';
+ctx.textBaseline = 'middle';
+
+points.map(point => {
+    const pixelCenter = mapService.lngLatToContainer([ point.lng, point.lat ]);
+    pixelCenter.x *= window.devicePixelRatio;
+    pixelCenter.y *= window.devicePixelRatio;
+    const rectStartX = pixelCenter.x - radius;
+    const rectStartY = pixelCenter.y - radius;
+
+    ctx.save();
+
+    ctx.fillText(point.level + '%', pixelCenter.x, pixelCenter.y);
+
+    ctx.beginPath();
+    ctx.arc(pixelCenter.x, pixelCenter.y, radius, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(135,206,250,0.2)';
+    ctx.closePath();
+    ctx.fill();
+    ctx.clip();
+
+    ctx.beginPath();
+    ctx.fillStyle = point.color;
+    ctx.moveTo(rectStartX, pixelCenter.y);
+
+    const waterheight = rectStartY + ((100 - point.level) / 100) * rectHeight;
+    for (let i = 0; i <= rectWidth; i += 10) {
+    ctx.lineTo(
+        rectStartX + i,
+        waterheight + Math.sin(Math.PI * 2 * (i / rectWidth) + x) * 3 + 1
+    );
+    }
+
+    ctx.lineTo(pixelCenter.x + radius, pixelCenter.y + radius);
+    ctx.lineTo(rectStartX, pixelCenter.y + radius);
+    ctx.lineTo(rectStartX, pixelCenter.y);
+    ctx.closePath();
+
+    ctx.fill();
+
+    ctx.restore();
+});
+}
+
+export default () => {
+    useEffect(() => {
+        const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+            style: 'fresh',
+            center: [ 115, 31 ],
+            zoom: 5.0
+        })
+        });
+        scene.on('loaded', () => {
+        const layer = new CanvasLayer({})
+            .style({
+                zIndex: 10,
+                update: 'always',
+                drawingOnCanvas: draw
+            })
+            .animate({
+                enable: true
+            });
+        scene.addLayer(layer);
+
+        setInterval(() => {
+            x += 0.1;
+            layer.style({
+                drawingOnCanvas: draw
+            });
+            scene.render();
+        }, 30);
+        });
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}
+
+```
--- a/dev-demos/features/canvasLayer/custom2.md
+++ b/dev-demos/features/canvasLayer/custom2.md
@ -0,0 +1,75 @@
+### CanvasLayer - demo2
+```tsx
+import { CanvasLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+ 
+
+export default () => {
+    useEffect(() => {
+       const scene = new Scene({
+            id: 'map',
+            map: new GaodeMap({
+                style: 'fresh',
+                center: [ 90, 31 ],
+                zoom: 2
+            })
+        });
+        scene.on('loaded', () => {
+        fetch(
+            'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
+        )
+            .then(res => res.json())
+            .then(data => {
+            const layer = new CanvasLayer({})
+                .style({
+                zIndex: 10,
+                update: 'dragend',
+                drawingOnCanvas: option => {
+                    const { size, ctx, mapService } = option;
+                    const [ width, height ] = size;
+
+                    ctx.clearRect(0, 0, width, height);
+                    ctx.fillStyle = 'rgba(0, 200, 0, 0.2)';
+                    data.features.map(feature => {
+                    const pixelCenter = mapService.lngLatToContainer(
+                        feature.geometry.coordinates
+                    );
+                    pixelCenter.x *= window.devicePixelRatio;
+                    pixelCenter.y *= window.devicePixelRatio;
+                    if (
+                        pixelCenter.x < 0 ||
+                        pixelCenter.y < 0 ||
+                        pixelCenter.x > width ||
+                        pixelCenter.y > height
+                    ) { return ''; }
+                    ctx.beginPath();
+                    ctx.arc(
+                        pixelCenter.x,
+                        pixelCenter.y,
+                        feature.properties.capacity / 200,
+                        0,
+                        Math.PI * 2
+                    );
+                    ctx.fill();
+                    ctx.closePath();
+                    });
+                }
+                });
+
+            scene.addLayer(layer);
+            });
+        });
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}
+
+```
--- a/dev-demos/features/citybuilding/amap1.md
+++ b/dev-demos/features/citybuilding/amap1.md
@ -0,0 +1,2 @@
+### building - amap1
+<code src="./amap1.tsx"></code>
--- a/dev-demos/features/citybuilding/amap1.tsx
+++ b/dev-demos/features/citybuilding/amap1.tsx
@ -0,0 +1,124 @@
+// @ts-ignore
+import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        style: 'dark',
+        center: [120.145, 30.238915],
+        pitch: 60,
+        zoom: 13.2,
+      }),
+    });
+    fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
+    ).then(async (res) => {
+      const pointLayer = new CityBuildingLayer();
+      pointLayer
+        .source(await res.json())
+        .size('floor', [0, 500])
+        .color('rgba(242,246,250,1.0)')
+        .animate({
+          enable: true,
+        })
+        .active({
+          color: '#0ff',
+          mix: 0.5,
+        })
+        .style({
+          opacity: 0.7,
+          baseColor: 'rgb(16, 16, 16)',
+          windowColor: 'rgb(30, 60, 89)',
+          brightColor: 'rgb(255, 176, 38)',
+          sweep: {
+            enable: true,
+            sweepRadius: 2,
+            sweepColor: '#1990FF',
+            sweepSpeed: 0.5,
+            sweepCenter: [120.145319, 30.238915],
+          },
+        });
+      scene.addLayer(pointLayer);
+    });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    )
+      .then((data) => data.json())
+      .then(({ lakeBorderData, lakeData, landData }) => {
+        const lakeLayer = new PolygonLayer()
+          .source(lakeData)
+          .shape('fill')
+          .color('#1E90FF')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'out', // in - out
+            },
+          });
+        const landLayer = new PolygonLayer()
+          .source(landData)
+          .shape('fill')
+          .color('#3CB371')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        const lakeBorderLayer = new PolygonLayer()
+          .source(lakeBorderData)
+          .shape('fill')
+          .color('#ccc')
+          .style({
+            opacity: 0.5,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        scene.addLayer(lakeLayer);
+        scene.addLayer(lakeBorderLayer);
+        scene.addLayer(landLayer);
+      });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const layer = new LineLayer({
+          zIndex: 0,
+          depth: true,
+        })
+          .source(data)
+          .size(1)
+          .shape('line')
+          .color('#1990FF')
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(layer);
+      });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/citybuilding/amap2.md
+++ b/dev-demos/features/citybuilding/amap2.md
@ -0,0 +1,2 @@
+### building - amap2
+<code src="./amap2.tsx"></code>
--- a/dev-demos/features/citybuilding/amap2.tsx
+++ b/dev-demos/features/citybuilding/amap2.tsx
@ -0,0 +1,124 @@
+// @ts-ignore
+import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMapV2 } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMapV2({
+        style: 'dark',
+        center: [120.145, 30.238915],
+        pitch: 60,
+        zoom: 13.2,
+      }),
+    });
+    fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
+    ).then(async (res) => {
+      const pointLayer = new CityBuildingLayer();
+      pointLayer
+        .source(await res.json())
+        .size('floor', [0, 500])
+        .color('rgba(242,246,250,1.0)')
+        .animate({
+          enable: true,
+        })
+        .active({
+          color: '#0ff',
+          mix: 0.5,
+        })
+        .style({
+          opacity: 0.7,
+          baseColor: 'rgb(16, 16, 16)',
+          windowColor: 'rgb(30, 60, 89)',
+          brightColor: 'rgb(255, 176, 38)',
+          sweep: {
+            enable: true,
+            sweepRadius: 2,
+            sweepColor: '#1990FF',
+            sweepSpeed: 0.5,
+            sweepCenter: [120.145319, 30.238915],
+          },
+        });
+      scene.addLayer(pointLayer);
+    });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    )
+      .then((data) => data.json())
+      .then(({ lakeBorderData, lakeData, landData }) => {
+        const lakeLayer = new PolygonLayer()
+          .source(lakeData)
+          .shape('fill')
+          .color('#1E90FF')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'out', // in - out
+            },
+          });
+        const landLayer = new PolygonLayer()
+          .source(landData)
+          .shape('fill')
+          .color('#3CB371')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        const lakeBorderLayer = new PolygonLayer()
+          .source(lakeBorderData)
+          .shape('fill')
+          .color('#ccc')
+          .style({
+            opacity: 0.5,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        scene.addLayer(lakeLayer);
+        scene.addLayer(lakeBorderLayer);
+        scene.addLayer(landLayer);
+      });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const layer = new LineLayer({
+          zIndex: 0,
+          depth: true,
+        })
+          .source(data)
+          .size(1)
+          .shape('line')
+          .color('#1990FF')
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(layer);
+      });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/citybuilding/mapbox.md
+++ b/dev-demos/features/citybuilding/mapbox.md
@ -0,0 +1,2 @@
+### building - mapbox
+<code src="./mapbox.tsx"></code>
--- a/dev-demos/features/citybuilding/mapbox.tsx
+++ b/dev-demos/features/citybuilding/mapbox.tsx
@ -0,0 +1,124 @@
+// @ts-ignore
+import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        style: 'dark',
+        center: [120.145, 30.238915],
+        pitch: 60,
+        zoom: 13.2,
+      }),
+    });
+    fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
+    ).then(async (res) => {
+      const pointLayer = new CityBuildingLayer();
+      pointLayer
+        .source(await res.json())
+        .size('floor', [0, 500])
+        .color('rgba(242,246,250,1.0)')
+        .animate({
+          enable: true,
+        })
+        .active({
+          color: '#0ff',
+          mix: 0.5,
+        })
+        .style({
+          opacity: 0.7,
+          baseColor: 'rgb(16, 16, 16)',
+          windowColor: 'rgb(30, 60, 89)',
+          brightColor: 'rgb(255, 176, 38)',
+          sweep: {
+            enable: true,
+            sweepRadius: 2,
+            sweepColor: '#1990FF',
+            sweepSpeed: 0.5,
+            sweepCenter: [120.145319, 30.238915],
+          },
+        });
+      scene.addLayer(pointLayer);
+    });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    )
+      .then((data) => data.json())
+      .then(({ lakeBorderData, lakeData, landData }) => {
+        const lakeLayer = new PolygonLayer()
+          .source(lakeData)
+          .shape('fill')
+          .color('#1E90FF')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'out', // in - out
+            },
+          });
+        const landLayer = new PolygonLayer()
+          .source(landData)
+          .shape('fill')
+          .color('#3CB371')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        const lakeBorderLayer = new PolygonLayer()
+          .source(lakeBorderData)
+          .shape('fill')
+          .color('#ccc')
+          .style({
+            opacity: 0.5,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        scene.addLayer(lakeLayer);
+        scene.addLayer(lakeBorderLayer);
+        scene.addLayer(landLayer);
+      });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const layer = new LineLayer({
+          zIndex: 0,
+          depth: true,
+        })
+          .source(data)
+          .size(1)
+          .shape('line')
+          .color('#1990FF')
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(layer);
+      });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/customLayer/marker-layer.md
+++ b/dev-demos/features/customLayer/marker-layer.md
@ -0,0 +1,143 @@
+### marker-layer
+
+```tsx
+import { Marker, MarkerLayer, Scene } from '@antv/l7';
+import { GaodeMapV2 } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMapV2({
+        center: [105, 30.258134],
+        zoom: 3,
+      }),
+    });
+    // addMarkers(scene);
+    testRemoveMarkerLayer(scene);
+    // testClearMarkerLayer(scene);
+  }, []);
+
+  const addMarkers = (scene) => {
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    )
+      .then((res) => res.json())
+      .then((nodes) => {
+        const markerLayer = new MarkerLayer();
+        for (let i = 0; i < 400; i++) {
+          const { coordinates } = nodes.features[i].geometry;
+          const marker = new Marker().setLnglat({
+            lng: coordinates[0],
+            lat: coordinates[1],
+          });
+          markerLayer.addMarker(marker);
+        }
+        scene.addMarkerLayer(markerLayer);
+      });
+  };
+
+  // bugfix验证：执行scene.removeMarkerLayer后，缩放图层marker数据还原
+  const testRemoveMarkerLayer = (scene) => {
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    )
+      .then((res) => res.json())
+      .then((nodes) => {
+        const markerLayer = new MarkerLayer({
+          cluster: true,
+        });
+        for (let i = 0; i < nodes.features.length; i++) {
+          const { coordinates } = nodes.features[i].geometry;
+          const marker = new Marker().setLnglat({
+            lng: coordinates[0],
+            lat: coordinates[1],
+          });
+          markerLayer.addMarker(marker);
+        }
+        scene.addMarkerLayer(markerLayer);
+        // 3秒后删除图层
+        setTimeout(() => {
+          scene.removeMarkerLayer(markerLayer);
+        }, 3000);
+      });
+  };
+
+  // bugfix验证：执行markerLayer.clear后，图层聚合能力失效
+  const testClearMarkerLayer = (scene) => {
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    )
+      .then((res) => res.json())
+      .then((nodes) => {
+        const markerLayer = new MarkerLayer({
+          cluster: true,
+        });
+
+        for (let i = 0; i < nodes.features.length; i++) {
+          const { coordinates } = nodes.features[i].geometry;
+          const marker = new Marker().setLnglat({
+            lng: coordinates[0],
+            lat: coordinates[1],
+          });
+          markerLayer.addMarker(marker);
+        }
+        scene.addMarkerLayer(markerLayer);
+
+        setTimeout(() => {
+          if (markerLayer.getMarkers().length > 0) {
+            markerLayer.clear();
+          }
+
+          for (let i = 0; i < 200; i++) {
+            const { coordinates } = nodes.features[i].geometry;
+            const marker = new Marker().setLnglat({
+              lng: coordinates[0],
+              lat: coordinates[1],
+            });
+            markerLayer.addMarker(marker);
+          }
+        }, 3 * 1000);
+      });
+  };
+
+  const getColor = (v) => {
+    const colors = [
+      '#ffffe5',
+      '#f7fcb9',
+      '#d9f0a3',
+      '#addd8e',
+      '#78c679',
+      '#41ab5d',
+      '#238443',
+      '#005a32',
+    ];
+    return v > 50
+      ? colors[7]
+      : v > 40
+      ? colors[6]
+      : v > 30
+      ? colors[5]
+      : v > 20
+      ? colors[4]
+      : v > 10
+      ? colors[3]
+      : v > 5
+      ? colors[2]
+      : v > 0
+      ? colors[1]
+      : colors[0];
+  };
+
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
+```
--- a/dev-demos/features/customLayer/marker.md
+++ b/dev-demos/features/customLayer/marker.md
@ -0,0 +1,78 @@
+### marker
+
+```tsx
+import { Marker, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map-marker',
+      map: new GaodeMap({
+        center: [120.184824, 30.248341],
+        pitch: 0,
+        zoom: 18,
+      }),
+    });
+
+    const popup = new Popup({
+      offsets: [0, 20],
+    }).setHTML('<h1 onclick= alert("12223")>111111111111</h1>');
+
+    const el = document.createElement('h1');
+    el.innerHTML = '<h1>111111111111</h1>';
+
+    // const marker = new Marker({
+    //   element: el,
+    //   // offsets: [0, -20],
+    // })
+    const marker = new Marker()
+      .setLnglat({
+        lng: 120.184824,
+        lat: 30.248341,
+      })
+      .setPopup(popup);
+
+    scene.addMarker(marker);
+
+    const arr = [
+      {
+        lng: 120.184824,
+        lat: 30.248341,
+        count: 40,
+      },
+    ];
+
+    scene.on('loaded', () => {
+      // @ts-ignore
+      // marker.on('click', (e) => {
+      // });
+      // const marker1 = new AMap.Marker({
+      //   map: scene.map,
+      //   position: [120.184824, 30.248341],
+      //   shadow: '#000',
+      //   label: {
+      //     content: '站点',
+      //     direction: 'top',
+      //   },
+      // });
+      // marker1.on('click', () => {
+      //  console.log(this.scene.getZoom());
+      //   console.log('选中的点', 1111);
+      // });
+      // this.scene = scene;
+    });
+  }, []);
+
+  return (
+    <div
+      id="map-marker"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
+```
--- a/dev-demos/features/earth/earth.md
+++ b/dev-demos/features/earth/earth.md
@ -0,0 +1,2 @@
+### earth
+<code src="./earth.tsx"></code>
--- a/dev-demos/features/earth/earth.tsx
+++ b/dev-demos/features/earth/earth.tsx
@ -0,0 +1,65 @@
+// @ts-ignore
+import { Scene, Earth, EarthLayer } from '@antv/l7';
+
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Earth({
+        center: [120, 30],
+        pitch: 0,
+        zoom: 3,
+      }),
+    });
+
+    const earthlayer = new EarthLayer()
+      .source(
+        'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
+        {
+          parser: {
+            type: 'image',
+          },
+        },
+      )
+      .shape('base')
+      .style({
+        globalOptions: {
+          ambientRatio: 0.6, // 环境光
+          diffuseRatio: 0.4, // 漫反射
+          specularRatio: 0.1, // 高光反射
+          // earthTime: 4.0
+          earthTime: 0.1,
+        },
+      })
+      .animate(true);
+
+    const atomLayer = new EarthLayer()
+      .color('#2E8AE6')
+      .shape('atomSphere')
+      .style({
+        opacity: 1,
+      });
+
+    const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere');
+
+    scene.on('loaded', () => {
+      scene.addLayer(earthlayer);
+
+      scene.addLayer(atomLayer);
+      scene.addLayer(bloomLayer);
+
+      earthlayer.setEarthTime(4.0);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/fix/demos/fix.tsx
+++ b/dev-demos/features/fix/demos/fix.tsx
@ -0,0 +1,129 @@
+// @ts-ignore
+import { Scene, PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+
+    const scene = new Scene({
+      id: "map",
+      map: new GaodeMap({
+        center: [120, 30],
+        zoom: 4
+      })
+    });
+    
+    const dataList = [
+      { name: "杭州", data: '#f00' },
+      { name: "北京", data: '#ff0' }
+    ];
+    const dataList2 = [{ name: "杭州", data: '#0f0' }];
+    
+    const geo = {
+      type: "FeatureCollection",
+      features: [
+        {
+          type: "Feature",
+          properties: {
+            color: "#f00",
+            name: "杭州"
+          },
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [113.8623046875, 31.031055426540206],
+                [116.3232421875, 32.031055426540206],
+                [116.3232421875, 32.590574094954192]
+              ]
+            ]
+          }
+        },
+        {
+          type: "Feature",
+          properties: {
+            color: "#ff0",
+            name: "北京"
+          },
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [111.8623046875, 30.031055426540206],
+                [112.3232421875, 30.031055426540206],
+                [113.3232421875, 31.090574094954192]
+              ]
+            ]
+          }
+        }
+      ]
+    };
+
+    const geo2 = {
+      type: "FeatureCollection",
+      features: [
+        {
+          type: "Feature",
+          properties: {
+            color: "#f00",
+            name: "杭州"
+          },
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [113.8623046875, 31.031055426540206],
+                [116.3232421875, 32.031055426540206],
+                [116.3232421875, 32.590574094954192]
+              ]
+            ]
+          }
+        },
+      ]
+    };
+    
+    const layer = new PolygonLayer()
+      .source(geo, {
+        transforms: [
+          {
+            type: "join",
+            sourceField: "name", //data1 对应字段名
+            targetField: "name", // data 对应字段名 绑定到的地理数据
+            data: dataList
+          }
+        ]
+      })
+      .shape("fill")
+      .color("data", (c) => c)
+    
+    scene.on("loaded", () => {
+      scene.addLayer(layer);
+    
+      setTimeout(() => {
+        layer.setData(geo2, {
+          transforms: [
+            {
+              type: "join",
+              sourceField: "name", //data1 对应字段名
+              targetField: "name", // data 对应字段名 绑定到的地理数据
+              data: dataList2
+            }
+          ]
+        })
+        .color("data", (c) => c);
+      }, 2000);
+    });
+    
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/fix/fix.md
+++ b/dev-demos/features/fix/fix.md
@ -0,0 +1,2 @@
+### fix feature
+<code src="./demos/fix.tsx"></code>
--- a/dev-demos/features/geometry/billboard.md
+++ b/dev-demos/features/geometry/billboard.md
@ -0,0 +1,2 @@
+### billboard
+<code src="./demos/billboard.tsx"></code>
--- a/dev-demos/features/geometry/demos/billboard.tsx
+++ b/dev-demos/features/geometry/demos/billboard.tsx
@ -0,0 +1,72 @@
+// @ts-ignore
+import { Scene, GeometryLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 80,
+        style: 'dark',
+        center: [120, 30],
+        zoom: 5,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      const img = new Image();
+      img.crossOrigin = '';
+      img.onload = () => {
+        let billboard = new GeometryLayer().shape('billboard').style({
+          width: 90,
+          height: 30,
+          canvasWidth: 360,
+          canvasHeight: 120,
+          center: [120, 30],
+          drawCanvas: (canvas: HTMLCanvasElement) => {
+            let { width, height } = canvas;
+            let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+            ctx.globalAlpha = 0.5;
+            ctx.drawImage(
+              img,
+              0,
+              0,
+              img.width,
+              img.height,
+              0,
+              0,
+              width,
+              height,
+            );
+            ctx.globalAlpha = 1;
+            ctx.fillStyle = '#0ff';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.font = '36px Georgia';
+            ctx.fillText('Hello World! 蚂蚁', width / 2, height / 2);
+          },
+          raisingHeight: 100,
+        });
+        billboard.active({
+          color: '#0ff',
+          mix: 0.5,
+        });
+        scene.addLayer(billboard);
+      };
+      img.src =
+        'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*zMw0T6gEIZYAAAAAAAAAAAAAARQnAQ';
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/geometry/demos/sprite.tsx
+++ b/dev-demos/features/geometry/demos/sprite.tsx
@ -0,0 +1,60 @@
+// @ts-ignore
+import { Scene, GeometryLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        // map: new GaodeMapV2({
+        // map: new Mapbox({
+        pitch: 40,
+        style: 'dark',
+        center: [120, 30],
+        zoom: 6,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      const layer = new GeometryLayer()
+        // .source([{x: 0, y: 0}], {parser: {type: 'json', x: 'x', y: 'y'}})
+        .shape('sprite')
+        .size(20)
+        .style({
+          // opacity: 0.3,
+          mapTexture:
+            'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*zLQwQKBSagYAAAAAAAAAAAAAARQnAQ', // snow
+          // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ', // rain
+          // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bq1cS7ADjR4AAAAAAAAAAAAAARQnAQ', // blub
+          center: [120, 30],
+          // spriteAnimate: 'up',
+          spriteCount: 60,
+          spriteRadius: 10,
+          spriteTop: 2500000,
+          spriteUpdate: 10000,
+          spriteScale: 0.8,
+
+          // spriteTop: 1000,
+          // spriteUpdate: 5,
+          // spriteBottom: -10,
+          // spriteScale: 0.6,
+        })
+        .active(true)
+        .color('#f00');
+
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/geometry/sprite.md
+++ b/dev-demos/features/geometry/sprite.md
@ -0,0 +1,2 @@
+### sprite
+<code src="./demos/sprite.tsx"></code>
--- a/dev-demos/features/heatmap/demos/heatmap.tsx
+++ b/dev-demos/features/heatmap/demos/heatmap.tsx
@ -1,25 +1,20 @@
+// @ts-ignore
 import { Scene, HeatmapLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';

-export default class Amap2demo_heatmap extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
+        style: 'dark',
        pitch: 0,
        center: [127.5671666579043, 7.445038892195569],
        zoom: 2.632456779444394,
      }),
    });
-    this.scene = scene;

    scene.on('loaded', () => {
      fetch(
@ -50,22 +45,14 @@ export default class Amap2demo_heatmap extends React.Component {
          scene.addLayer(layer);
        });
    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/heatmap/demos/heatmap3d.tsx
+++ b/dev-demos/features/heatmap/demos/heatmap3d.tsx
@ -0,0 +1,57 @@
+// @ts-ignore
+import { Scene, HeatmapLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [120, 30],
+        pitch: 0,
+        zoom: 2,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const layer = new HeatmapLayer({})
+            .source(data)
+            .shape('heatmap3d')
+            .size('mag', [0, 1.0]) // weight映射通道
+            .style({
+              intensity: 2,
+              radius: 20,
+              opacity: 1.0,
+              rampColors: {
+                colors: [
+                  '#FF4818',
+                  '#F7B74A',
+                  '#FFF598',
+                  '#F27DEB',
+                  '#8C1EB2',
+                  '#421EB2',
+                ].reverse(),
+                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+              },
+            });
+          scene.addLayer(layer);
+        });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/heatmap/heatmap.md
+++ b/dev-demos/features/heatmap/heatmap.md
@ -0,0 +1,2 @@
+### Heatmap
+<code src="./demos/heatmap.tsx"></code>
--- a/dev-demos/features/heatmap/heatmap3d.md
+++ b/dev-demos/features/heatmap/heatmap3d.md
@ -0,0 +1,2 @@
+### Heatmap - 3D
+<code src="./demos/heatmap3d.tsx"></code>
--- a/dev-demos/features/imageLayer/image.md
+++ b/dev-demos/features/imageLayer/image.md
@ -0,0 +1,2 @@
+### Image Layer
+<code src="./image.tsx"></code>
--- a/dev-demos/features/imageLayer/image.tsx
+++ b/dev-demos/features/imageLayer/image.tsx
@ -0,0 +1,44 @@
+import { ImageLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      pickBufferScale: 1.0,
+      map: new GaodeMap({
+        center: [121.268, 30.3628],
+        pitch: 0,
+        style: 'normal',
+        zoom: 10,
+      }),
+    });
+
+    const layer = new ImageLayer({});
+    layer.source(
+      //   'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+      // 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0TVXSbkyKvsAAAAAAAAAAAAAARQnAQ',
+      'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4k6vT6rUsk4AAAAAAAAAAAAAARQnAQ',
+      {
+        parser: {
+          type: 'image',
+          extent: [121.168, 30.2828, 121.384, 30.4219],
+        },
+      },
+    );
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/imageLayer/raster.md
+++ b/dev-demos/features/imageLayer/raster.md
@ -0,0 +1,2 @@
+### Image Layer - raster
+<code src="./raster.tsx"></code>
--- a/dev-demos/features/imageLayer/raster.tsx
+++ b/dev-demos/features/imageLayer/raster.tsx
@ -1,14 +1,11 @@
+// @ts-ignore
 import { RasterLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
 import * as GeoTIFF from 'geotiff';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [121.2680, 30.3628],
-  zoom: 3,
-});
- async function getTiffData() {
+
+async function getTiffData() {
  const response = await fetch(
    'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
  );
@ -38,23 +35,54 @@ async function addLayer() {
        width: tiffdata.width,
        height: tiffdata.height,
        min: 0,
-        max: 8000,
+        max: 80,
        extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
      },
    })
    .style({
-      heightRatio:100,
+      heightRatio: 100,
      opacity: 0.8,
+      domain: [0, 2000],
      rampColors: {
-        colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
-        positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
+        colors: [
+          '#FF4818',
+          '#F7B74A',
+          '#FFF598',
+          '#91EABC',
+          '#2EA9A1',
+          '#206C7C',
+        ].reverse(),
+        positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
      },
    });
-    return layer;
+  return layer;
 }
-scene.on('loaded', async () =>{
-  const layer = await addLayer();
-  scene.addLayer(layer);
-  scene.render();
-})

+export default () => {
+  useEffect(() => {
+    (async () => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          center: [121.268, 30.3628],
+          zoom: 3,
+        }),
+      });
+
+      const layer = await addLayer();
+
+      scene.on('loaded', () => {
+        scene.addLayer(layer);
+      });
+    })();
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/greatcircleline.tsx
+++ b/dev-demos/features/line/demos/greatcircleline.tsx
@ -0,0 +1,143 @@
+import {
+  LineLayer,
+  Scene,
+  Source,
+  lineAtOffset,
+  lineAtOffsetAsyc,
+  PointLayer,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [105, 32],
+        zoom: 4,
+        // pitch: 60
+      }),
+    });
+
+    const geoData = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {
+            offset: 0.3,
+          },
+          geometry: {
+            type: 'MultiLineString',
+            coordinates: [
+              [
+                [99.228515625, 37.43997405227057],
+                [100.72265625, 27.994401411046148],
+              ],
+              [
+                [108.544921875, 37.71859032558816],
+                [112.412109375, 32.84267363195431],
+              ],
+            ],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {
+            offset: 0.8,
+          },
+          geometry: {
+            type: 'MultiLineString',
+            coordinates: [
+              [
+                [120, 30],
+                [120, 40],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+    const source = new Source(geoData);
+
+    // scene.on('zoom', e => console.log(e))
+
+    const layer = new LineLayer({ blend: 'normal' })
+      .source(source)
+      .size(1)
+      .shape('greatcircle')
+      .color('#f00')
+      .style({
+        // thetaOffset: 'offset'
+        // segmentNumber: 10,
+        // thetaOffset: 0.5,
+      });
+
+    source.on('sourceUpdate', () => {
+      // console.log(scene.getMapService().version)
+      // const midPoints = lineAtOffset(source, 0.3, 'arc', 'offset');
+      const midPoints = lineAtOffset(source, {
+        offset: 2 / 30,
+        shape: 'greatcircle',
+        // thetaOffset: 0.5,
+        mapVersion: scene.getMapService().version,
+      });
+      const point = new PointLayer({ blend: 'normal', zIndex: 1 })
+        .source(midPoints, {
+          parser: {
+            type: 'json',
+            x: '_lng',
+            y: '_lat',
+          },
+        })
+        .shape('circle')
+        .size(10)
+        .color('#ff0');
+      scene.addLayer(point);
+    });
+
+    (async () => {
+      // const midPoints = await lineAtOffsetAsyc(source, 0.1, 'arc', 'offset');
+      const midPoints = await lineAtOffsetAsyc(source, {
+        // offset: 12.681/30,
+        // offset: 12/31,
+        // offset: 48/186,
+        offset: 0.3,
+        shape: 'greatcircle',
+        // thetaOffset: 0.5,
+        mapVersion: scene.getMapService().version,
+      });
+      const point = new PointLayer({ blend: 'normal', zIndex: 1 })
+        .source(midPoints, {
+          parser: {
+            type: 'json',
+            x: '_lng',
+            y: '_lat',
+          },
+        })
+        .shape('circle')
+        .size(5)
+        .color('#0f0')
+        .style({
+          opacity: 0.8,
+        });
+      scene.addLayer(point);
+    })();
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/line.tsx
+++ b/dev-demos/features/line/demos/line.tsx
@ -0,0 +1,138 @@
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  Source,
+  lineAtOffset,
+  lineAtOffsetAsyc,
+  PointLayer,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [105, 32],
+        zoom: 4,
+      }),
+    });
+
+    const geoData = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {
+            offset: 0.3,
+          },
+          geometry: {
+            type: 'MultiLineString',
+            coordinates: [
+              [
+                [99.228515625, 37.43997405227057],
+                [100.72265625, 27.994401411046148],
+                [110, 27.994401411046148],
+                [110, 25],
+                [100, 25],
+              ],
+              [
+                [108.544921875, 37.71859032558816],
+                [112.412109375, 32.84267363195431],
+                [115, 32.84267363195431],
+                [115, 35],
+              ],
+            ],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {
+            offset: 0.8,
+          },
+          geometry: {
+            type: 'MultiLineString',
+            coordinates: [
+              [
+                [110, 30],
+                [120, 30],
+                [120, 40],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+    const source = new Source(geoData);
+
+    // scene.on('zoom', e => console.log(e))
+
+    const layer = new LineLayer({ blend: 'normal' })
+      .source(source)
+      .size(1)
+      .shape('line')
+      .color('#f00')
+      .style({});
+
+    source.on('sourceUpdate', () => {
+      console.log(source);
+      const midPoints = lineAtOffset(source, {
+        offset: 0.1,
+        shape: 'line',
+      });
+      const point = new PointLayer({ blend: 'normal', zIndex: 1 })
+        .source(midPoints, {
+          parser: {
+            type: 'json',
+            x: '_lng',
+            y: '_lat',
+          },
+        })
+        .shape('circle')
+        .size(10)
+        .color('#ff0');
+      scene.addLayer(point);
+    });
+
+    (async () => {
+      // const midPoints = await lineAtOffsetAsyc(source, 0.1, 'arc', 'offset');
+      const midPoints = await lineAtOffsetAsyc(source, {
+        offset: 0.5,
+        shape: 'line',
+        featureId: 1,
+      });
+      const point = new PointLayer({ blend: 'normal', zIndex: 1 })
+        .source(midPoints, {
+          parser: {
+            type: 'json',
+            x: '_lng',
+            y: '_lat',
+          },
+        })
+        .shape('circle')
+        .size(5)
+        .color('#0f0')
+        .style({
+          opacity: 0.8,
+        });
+      scene.addLayer(point);
+    })();
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/lineAnimate.tsx
+++ b/dev-demos/features/line/demos/lineAnimate.tsx
@ -1,22 +1,26 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class LineDemo extends React.Component {
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  Source,
+  lineAtOffset,
+  lineAtOffsetAsyc,
+  PointLayer,
  // @ts-ignore
-  private scene: Scene;
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';

-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  // @ts-ignore
+  useEffect(async () => {
    const response = await fetch(
      'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json',
    );
    const scene = new Scene({
      id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
        center: [110.19382669582967, 40.258134],
        pitch: 0,
        zoom: 3,
@ -53,21 +57,14 @@ export default class LineDemo extends React.Component {
      .render();
    lineLayer.fitBounds();
    scene.addLayer(lineLayer);
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/stories/Map/components/amap2demo_arcLine3d.tsx
+++ b/stories/Map/components/amap2demo_arcLine3d.tsx
@ -1,16 +1,16 @@
-import { PointLayer, LineLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_arcLine3d extends React.Component {
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  PointLayer,
  // @ts-ignore
-  private scene: Scene;
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';

-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
@ -21,7 +21,6 @@ export default class Amap2demo_arcLine3d extends React.Component {
        style: 'dark',
      }),
    });
-    this.scene = scene;

    scene.on('loaded', () => {
      scene.addImage(
@ -30,7 +29,7 @@ export default class Amap2demo_arcLine3d extends React.Component {
      );
      Promise.all([
        fetch(
-          'https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json',
+          'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json',
        ).then((d) => d.json()),
        fetch(
          'https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json',
@ -123,22 +122,14 @@ export default class Amap2demo_arcLine3d extends React.Component {
        scene.addLayer(flyLine);
      });
    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/lineArcPlane.tsx
+++ b/dev-demos/features/line/demos/lineArcPlane.tsx
@ -0,0 +1,120 @@
+// @ts-ignore
+import { LineLayer, Scene, PointLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 40,
+        center: [ 40, 40.16797 ],
+        style: 'dark',
+        zoom: 2.5
+      })
+    });
+    scene.addImage(
+      'plane',
+      'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
+    );
+    scene.on('loaded', () => {
+      Promise.all([
+        fetch(
+          'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json'
+        ).then(d => d.json()),
+        fetch(
+          'https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json'
+        ).then(d => d.text()),
+        fetch(
+          'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json'
+        ).then(d => d.text())
+      ]).then(function onLoad([ world, dot, flyline ]) {
+        const dotData = eval(dot);
+        // @ts-ignore
+        const flydata = eval(flyline).map(item => {
+          // @ts-ignore
+          const latlng1 = item.from.split(',').map(e => {
+            return e * 1;
+          });
+          // @ts-ignore
+          const latlng2 = item.to.split(',').map(e => {
+            return e * 1;
+          });
+          return { coord: [ latlng1, latlng2 ] };
+        });
+    
+        const worldLine = new LineLayer()
+          .source(world)
+          .color('#41fc9d')
+          .size(0.5)
+          .style({
+            opacity: 0.4
+          });
+        const dotPoint = new PointLayer()
+          .source(dotData, {
+            parser: {
+              type: 'json',
+              x: 'lng',
+              y: 'lat'
+            }
+          })
+          .shape('circle')
+          .color('#ffed11')
+          .animate(true)
+          .size(40);
+        const flyLine = new LineLayer({ blend: 'normal' })
+          .source(flydata, {
+            parser: {
+              type: 'json',
+              coordinates: 'coord'
+            }
+          })
+          .color('#ff6b34')
+          .texture('plane')
+          .shape('arc')
+          .size(15)
+          .animate({
+            duration: 1,
+            interval: 0.2,
+            trailLength: 0.5
+          })
+          .style({
+            textureBlend: 'replace',
+            lineTexture: true, // 开启线的贴图功能
+            iconStep: 10, // 设置贴图纹理的间距
+          });
+    
+        const flyLine2 = new LineLayer()
+          .source(flydata, {
+            parser: {
+              type: 'json',
+              coordinates: 'coord'
+            }
+          })
+          .color('#ff6b34')
+          .shape('arc')
+          .size(1)
+          .style({
+            lineType: 'dash',
+            dashArray: [ 5, 5 ],
+            opacity: 0.5
+          });
+        scene.addLayer(worldLine);
+        scene.addLayer(dotPoint);
+        scene.addLayer(flyLine2);
+        scene.addLayer(flyLine);
+      });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/lineArrow.tsx
+++ b/dev-demos/features/line/demos/lineArrow.tsx
@ -0,0 +1,150 @@
+// @ts-ignore
+import { LineLayer, Scene, PointLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [ 120.15, 30.3 ],
+        zoom: 10,
+        style: 'light'
+      })
+    });
+    
+    const pointLayer = new PointLayer()
+      .source([{ lng: 120.155, lat: 30.31 }], {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat'
+        }
+      })
+      .shape('circle')
+      .size(6000)
+      .color('#f00')
+      .animate(true)
+      .style({
+        unit: 'meter'
+      });
+    const lineLayer = new LineLayer({})
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.1863098144,
+                  30.321915039121
+                ],
+                [
+                  120.3401184082,
+                  30.43446594614
+                ]
+              ]
+            }
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.19660949707033,
+                  30.298796461361665
+                ],
+                [
+                  120.31883239746092,
+                  30.28041626667403
+                ]
+              ]
+            }
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.12245178222656,
+                  30.29523927312319
+                ],
+                [
+                  120.01808166503906,
+                  30.261439550638762
+                ]
+              ]
+            }
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.15609741210938,
+                  30.285159872426014
+                ],
+                [
+                  120.14923095703124,
+                  30.20626765511821
+                ]
+              ]
+            }
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.10940551757812,
+                  30.320136880604423
+                ],
+                [
+                  120.01327514648438,
+                  30.362803774813028
+                ]
+              ]
+            }
+          }
+        ]
+      }
+      )
+      .size(2)
+      .shape('line')
+      .style({
+        arrow: {
+          enable: true,
+          arrowWidth: 4,
+          arrowHeight: 4,
+          tailWidth: 0.4
+        }
+      })
+      .color('#f00');
+    scene.on('loaded', () => {
+      scene.addLayer(pointLayer);
+      scene.addLayer(lineLayer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/lineTexture.tsx
+++ b/dev-demos/features/line/demos/lineTexture.tsx
@ -0,0 +1,70 @@
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [120.15, 30.246],
+        pitch: 0,
+        zoom: 13.5,
+        style: 'dark',
+        pitchEnable: false,
+        rotation: -90,
+      }),
+    });
+
+    scene.addImage(
+      'arrow',
+      'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
+    );
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const colors = ['#66c2a4', '#2ca25f', '#006d2c'];
+          const layer = new LineLayer({})
+            .source(data)
+            .size(2.5)
+            .shape('line')
+            .texture('arrow')
+            .color('', () => {
+              return colors[Math.floor(Math.random() * colors.length)];
+            })
+            .animate({
+              interval: 1, // 间隔
+              duration: 1, // 持续时间，延时
+              trailLength: 2, // 流线长度
+            })
+            .style({
+              opacity: 0.6,
+              lineTexture: true, // 开启线的贴图功能
+              iconStep: 20, // 设置贴图纹理的间距
+              borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+              borderColor: '#fff', // 默认为 #ccc
+            });
+          scene.addLayer(layer);
+        });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/lineWorker.tsx
+++ b/dev-demos/features/line/demos/lineWorker.tsx
@ -0,0 +1,54 @@
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [120, 30],
+        pitch: 0,
+        zoom: 2,
+      }),
+    });
+    const layer = new LineLayer({ workerEnabled: true })
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [95.625, 38.47939467327645],
+                [115.48828125000001, 28.92163128242129],
+              ],
+            },
+          },
+        ],
+      })
+      .shape('line')
+      .color('#f00')
+      .size(5);
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/linearc.tsx
+++ b/dev-demos/features/line/demos/linearc.tsx
@ -0,0 +1,140 @@
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  Source,
+  lineAtOffset,
+  lineAtOffsetAsyc,
+  PointLayer,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [105, 32],
+        zoom: 4,
+        // pitch: 60
+      }),
+    });
+
+    const geoData = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {
+            offset: 0.3,
+          },
+          geometry: {
+            type: 'MultiLineString',
+            coordinates: [
+              [
+                [99.228515625, 37.43997405227057],
+                [100.72265625, 27.994401411046148],
+              ],
+              [
+                [108.544921875, 37.71859032558816],
+                [112.412109375, 32.84267363195431],
+              ],
+            ],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {
+            offset: 0.8,
+          },
+          geometry: {
+            type: 'MultiLineString',
+            coordinates: [
+              [
+                [120, 30],
+                [120, 40],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+    const source = new Source(geoData);
+
+    // scene.on('zoom', e => console.log(e))
+
+    const layer = new LineLayer({ blend: 'normal' })
+      .source(source)
+      .size(1)
+      .shape('arc')
+      .color('#f00')
+      .style({
+        // thetaOffset: 'offset'
+        // segmentNumber: 10,
+        thetaOffset: 0.5,
+      });
+
+    source.on('sourceUpdate', () => {
+      const midPoints = lineAtOffset(source, {
+        offset: 0.1,
+        shape: 'arc',
+        thetaOffset: 0.5,
+        mapVersion: scene.getMapService().version,
+      });
+      const point = new PointLayer({ blend: 'normal', zIndex: 1 })
+        .source(midPoints, {
+          parser: {
+            type: 'json',
+            x: '_lng',
+            y: '_lat',
+          },
+        })
+        .shape('circle')
+        .size(10)
+        .color('#ff0');
+      scene.addLayer(point);
+    });
+
+    (async () => {
+      // const midPoints = await lineAtOffsetAsyc(source, 0.1, 'arc', 'offset');
+      const midPoints = await lineAtOffsetAsyc(source, {
+        offset: 0.3,
+        shape: 'arc',
+        thetaOffset: 0.5,
+        mapVersion: scene.getMapService().version,
+        featureId: 1,
+      });
+      const point = new PointLayer({ blend: 'normal', zIndex: 1 })
+        .source(midPoints, {
+          parser: {
+            type: 'json',
+            x: '_lng',
+            y: '_lat',
+          },
+        })
+        .shape('circle')
+        .size(5)
+        .color('#0f0')
+        .style({
+          opacity: 0.8,
+        });
+      scene.addLayer(point);
+    })();
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/linearline.tsx
+++ b/dev-demos/features/line/demos/linearline.tsx
@ -0,0 +1,80 @@
+import { LineLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [105, 30.258134],
+        zoom: 5,
+      }),
+    });
+
+    const geoData = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {
+            testOpacity: 0.8,
+          },
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [99.228515625, 37.43997405227057],
+                [99.228515625, 35.02999636902566],
+                [101.337890625, 32.99023555965106],
+                [99.052734375, 30.29701788337205],
+                [100.72265625, 27.994401411046148],
+                [99.49218749999999, 26.352497858154024],
+                [100.634765625, 23.725011735951796],
+              ],
+              [
+                [108.544921875, 37.71859032558816],
+                [110.74218749999999, 34.66935854524543],
+                [110.21484375, 32.76880048488168],
+                [112.412109375, 32.84267363195431],
+                [112.1484375, 30.751277776257812],
+                [114.08203125, 31.42866311735861],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+
+    const layer = new LineLayer({})
+      .source(geoData)
+      .size(10)
+      .shape('linearline')
+      .style({
+        rampColors: {
+          colors: [
+            '#FF4818',
+            '#F7B74A',
+            '#FFF598',
+            '#91EABC',
+            '#2EA9A1',
+            '#206C7C',
+          ],
+          weights: [0.1, 0.1, 0.1, 0.1, 0.1, 0.5],
+        },
+      });
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/lineblur.tsx
+++ b/dev-demos/features/line/demos/lineblur.tsx
@ -0,0 +1,44 @@
+// @ts-ignore
+import { LineLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [122, 28],
+        zoom: 5,
+        style: 'dark',
+      }),
+    });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/bmw-prod/55304d8d-4cb0-49e0-9d95-9eeacbe1c80a.json',
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const blurLine = new LineLayer()
+          .source(data)
+          .size(5)
+          .style({
+            opacity: 0.8,
+            sourceColor: '#f00',
+            targetColor: '#ff0',
+            linearDir: 'horizontal',
+          });
+        scene.addLayer(blurLine);
+      });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/stories/Map/components/amap2demo_lineDash.tsx
+++ b/stories/Map/components/amap2demo_lineDash.tsx
@ -1,28 +1,19 @@
+// @ts-ignore
 import { LineLayer, Scene } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';

-export default class Amap2demo_lineDash extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        center: [116.3956, 39.9392],
-        pitch: 0,
        zoom: 10,
-        rotation: 0,
        style: 'amap://styles/wine',
-        // viewMode: '2D',
      }),
    });
-    this.scene = scene;

    scene.on('loaded', () => {
      fetch(
@ -35,6 +26,7 @@ export default class Amap2demo_lineDash extends React.Component {
            .size(1.5)
            .shape('line')
            .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])
+            .active(true)
            .style({
              lineType: 'dash',
              dashArray: [5, 5],
@ -42,22 +34,14 @@ export default class Amap2demo_lineDash extends React.Component {
          scene.addLayer(layer);
        });
    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/linehalf.tsx
+++ b/dev-demos/features/line/demos/linehalf.tsx
@ -0,0 +1,56 @@
+// @ts-ignore
+import { LineLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [120, 30],
+        pitch: 0,
+        zoom: 2,
+      }),
+    });
+    const layer = new LineLayer()
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [95.625, 28],
+                [115.48828125000001, 28],
+              ],
+            },
+          },
+        ],
+      })
+      .shape('halfLine')
+      .color('#f00')
+      .size(10)
+      .style({
+        opacity: 0.5,
+        arrow: {
+          enable: true,
+        },
+      });
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/lineheight.tsx
+++ b/dev-demos/features/line/demos/lineheight.tsx
@ -0,0 +1,61 @@
+import { LineLayer, Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        pitch: 40,
+        style: 'light',
+        center: [102.600579, 23.114887],
+        zoom: 14.66,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+        .then((res) => res.json())
+        .then((data) => {
+          const layer = new LineLayer({})
+            .source(data)
+            .size('ELEV', (h) => {
+              return [h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20]; // amap
+            })
+            .shape('line')
+            .scale('ELEV', {
+              type: 'quantize',
+            })
+            .style({
+              heightfixed: true,
+            })
+            .color(
+              'ELEV',
+              [
+                '#E4682F',
+                '#FF8752',
+                '#FFA783',
+                '#FFBEA8',
+                '#FFDCD6',
+                '#EEF3FF',
+                '#C8D7F5',
+                '#A5C1FC',
+                '#7FA7F9',
+                '#5F8AE5',
+              ].reverse(),
+            );
+          scene.addLayer(layer);
+        });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/linewall.tsx
+++ b/dev-demos/features/line/demos/linewall.tsx
@ -1,25 +1,17 @@
-import { LineLayer, Scene, flow } from '@antv/l7';
+import { LineLayer, Scene } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_lineLinear extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
+import React, { useEffect } from 'react';

-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        center: [115, 30.258134],
        pitch: 40,
        zoom: 6,
-        viewMode: '3D',
      }),
    });
-    this.scene = scene;
    const geoData = {
      type: 'FeatureCollection',
      features: [
@ -77,22 +69,14 @@ export default class Amap2demo_lineLinear extends React.Component {

      scene.addLayer(layer);
    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/demos/simpleline.tsx
+++ b/dev-demos/features/line/demos/simpleline.tsx
@ -0,0 +1,276 @@
+import {
+  LineLayer,
+  Scene,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import { polygonToLineString, MultiPolygon } from '@turf/turf';
+
+function getImageData(img: HTMLImageElement) {
+  const canvas: HTMLCanvasElement = document.createElement('canvas');
+  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  const { width, height } = img;
+  canvas.width = width;
+  canvas.height = height;
+
+  ctx.drawImage(img, 0, 0, width, height);
+  const imageData = ctx.getImageData(0, 0, width, height);
+
+  return imageData;
+}
+
+function getLatData(data: number[]) {
+  const size = Math.floor(Math.sqrt(data.length));
+
+  const arr = [];
+  const startLng = 110;
+  const lngStep = 5 / (size - 1);
+  const startLat = 30;
+  const latStep = -5 / (size - 1);
+  for (let i = 0; i < size; i++) {
+    const arr2 = [];
+    for (let j = 0; j < size; j++) {
+      const index = i + j * size;
+      const x = startLng + lngStep * i;
+      const y = startLat + latStep * j;
+      // @ts-ignore
+      arr2.push([x, y, data[index]]);
+    }
+    // @ts-ignore
+    arr.push(arr2);
+  }
+  return arr;
+}
+
+function getLngData(data: number[]) {
+  const size = Math.floor(Math.sqrt(data.length));
+  const arr = [];
+  const startLng = 110;
+  const lngStep = 5 / (size - 1);
+  const startLat = 30;
+  const latStep = -5 / (size - 1);
+
+  for (let i = 0; i < size; i++) {
+    const arr2 = [];
+    for (let j = 0; j < size; j++) {
+      const index = i * size + j;
+      const x = startLng + lngStep * j;
+      const y = startLat + latStep * i;
+      // @ts-ignore
+      arr2.push([x, y, data[index]]);
+    }
+    // @ts-ignore
+    arr.push(arr2);
+  }
+  return arr;
+}
+
+function getR(data: Uint8ClampedArray) {
+  const arr = [];
+  for (let i = 0; i < data.length; i += 4) {
+    // @ts-ignore
+    arr.push(data[i]);
+  }
+  return arr;
+}
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        // center: [121.268, 30.3628],
+        // center: [115.565185546875,41.31082388091818],
+        center: [112.796630859375, 21.80030805097259],
+        pitch: 0,
+        // style: 'blank',
+        // zoom: 3,
+        zoom: 10,
+      }),
+    });
+
+    const multipolygon = {
+      type: 'Feature',
+      geometry: {
+        type: 'MultiPolygon',
+        coordinates: [
+          [
+            [
+              [112.796630859375, 21.80030805097259],
+              [112.796630859375, 21.601258036965902],
+              [112.69775390625, 21.70336934552425],
+              [112.796630859375, 21.80030805097259],
+            ],
+          ],
+          [
+            [
+              [113.5491943359375, 22.350075806124863],
+              [113.5986328125, 22.304343762932234],
+              [113.499755859375, 22.2026634080092],
+              [113.2965087890625, 22.2026634080092],
+              [113.1976318359375, 22.004174972902007],
+              [113.0987548828125, 22.10090935057272],
+              [112.9998779296875, 22.10090935057272],
+              [112.9998779296875, 21.902277966668635],
+              [112.8955078125, 21.902277966668635],
+              [112.8515625, 21.94304553343818],
+              [112.796630859375, 22.004174972902007],
+              [112.74169921875, 21.94304553343818],
+              [112.598876953125, 21.80030805097259],
+              [112.3956298828125, 21.80030805097259],
+              [112.3956298828125, 21.70336934552425],
+              [112.2967529296875, 21.70336934552425],
+              [112.1978759765625, 21.80030805097259],
+              [112.060546875, 21.80030805097259],
+              [112.060546875, 22.350075806124863],
+              [113.5491943359375, 22.350075806124863],
+            ],
+          ],
+          [
+            [
+              [114.2962646484375, 22.350075806124863],
+              [114.1973876953125, 22.304343762932234],
+              [114.049072265625, 22.350075806124863],
+              [114.2962646484375, 22.350075806124863],
+            ],
+          ],
+        ],
+      },
+      properties: {
+        ECO_NAME: 'Mongolian-Manchurian grassland',
+        BIOME_NAME: 'Temperate Grasslands, Savannas & Shrublands',
+        REALM: 'Palearctic',
+        NNH: 3,
+        NNH_NAME: 'Nature Could Recover',
+        COLOR: '#F6FC38',
+        COLOR_BIO: '#FEFF73',
+        COLOR_NNH: '#F9A91B',
+      },
+    };
+
+    const layer = new LineLayer()
+      // .source({
+      //   type: 'FeatureCollection',
+      //   features: [
+      //     {
+      //       type: 'Feature',
+      //       properties: {},
+      //       geometry: {
+      //         type: 'MultiLineString',
+      //         coordinates: [
+      //           [
+      //             [80, 30, 5000],
+      //             [150, 30, 5000],
+      //             [150, 10, 5000],
+      //           ],
+      //           [
+      //             [120, 50, 5000],
+      //             [120, 30, 5000],
+      //           ],
+      //         ],
+      //       },
+      //     },
+      //     {
+      //       type: 'Feature',
+      //       properties: {},
+      //       geometry: {
+      //         type: 'MultiLineString',
+      //         coordinates: [
+      //           [
+      //             [100, 35, 100],
+      //             [120, 50, 100],
+      //             [120, 20, 100],
+      //             [130, 20, 100],
+      //           ],
+      //         ],
+      //       },
+      //     },
+      //   ],
+      // })
+      // @ts-ignore
+      // .source(polygonToLine(testdata2))
+      // .source(testdata)
+      .source(polygonToLineString((multipolygon as unknown) as MultiPolygon))
+      // .source([
+      //   {
+      //     lng1: 120,
+      //     lat1: 30,
+      //     lng2: 130,
+      //     lat2: 30
+      //   }
+      // ], {
+      //   parser: {
+      //     type: 'json',
+      //     x: 'lng1',
+      //     y: 'lat1',
+      //     x1: 'lng2',
+      //     y1: 'lat2'
+      //   }
+      // })
+      .shape('simple')
+      .color('#f00')
+      .style({
+        // vertexHeightScale: 2000,
+        // sourceColor: '#f00',
+        // targetColor: '#0f0',
+      });
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+
+    const img: HTMLImageElement = new Image();
+    img.crossOrigin = 'none';
+    img.src =
+      'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*UkvYRYS5jTAAAAAAAAAAAAAAARQnAQ';
+    img.onload = function() {
+      const data = getImageData(img);
+      const rData = getR(data.data);
+      const d1 = getLngData(rData);
+      const d2 = getLatData(rData);
+      const geoData = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'MultiLineString',
+              coordinates: d1,
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'MultiLineString',
+              coordinates: d2,
+            },
+          },
+        ],
+      };
+      // console.log(geoData)
+      const layer = new LineLayer({})
+        .source(geoData)
+        .size(1)
+        .shape('simple')
+        .color('#f00')
+        .style({
+          vertexHeightScale: 2000,
+          opacity: 0.4,
+        });
+      scene.addLayer(layer);
+    };
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
--- a/dev-demos/features/line/line.md
+++ b/dev-demos/features/line/line.md
@ -0,0 +1,2 @@
+### Line
+<code src="./demos/line.tsx"></code>
--- a/dev-demos/features/line/lineAnimate.md
+++ b/dev-demos/features/line/lineAnimate.md
@ -0,0 +1,2 @@
+### Line - animate
+<code src="./demos/lineAnimate.tsx"></code>
--- a/dev-demos/features/line/lineArc.md
+++ b/dev-demos/features/line/lineArc.md
@ -0,0 +1,2 @@
+### Line - arc
+<code src="./demos/linearc.tsx"></code>
--- a/dev-demos/features/line/lineArc3d.md
+++ b/dev-demos/features/line/lineArc3d.md
@ -0,0 +1,2 @@
+### Line - arc3d
+<code src="./demos/lineArc3d.tsx"></code>
--- a/dev-demos/features/line/lineArcPlane.md
+++ b/dev-demos/features/line/lineArcPlane.md
@ -0,0 +1,2 @@
+### Line - arc - plane
+<code src="./demos/lineArcPlane.tsx"></code>
--- a/dev-demos/features/line/lineArrow.md
+++ b/dev-demos/features/line/lineArrow.md
@ -0,0 +1,2 @@
+### Line - arrow
+<code src="./demos/lineArrow.tsx"></code>
--- a/dev-demos/features/line/lineGreatcircle.md
+++ b/dev-demos/features/line/lineGreatcircle.md
@ -0,0 +1,2 @@
+### Line - greatCircle 
+<code src="./demos/greatcircleline.tsx"></code>
--- a/dev-demos/features/line/lineHalf.md
+++ b/dev-demos/features/line/lineHalf.md
@ -0,0 +1,2 @@
+### Line - half
+<code src="./demos/linehalf.tsx"></code>
--- a/dev-demos/features/line/lineTexture.md
+++ b/dev-demos/features/line/lineTexture.md
@ -0,0 +1,2 @@
+### Line - texture
+<code src="./demos/lineTexture.tsx"></code>
--- a/dev-demos/features/line/lineWorker.md
+++ b/dev-demos/features/line/lineWorker.md
@ -0,0 +1,2 @@
+### Line - worker
+<code src="./demos/lineWorker.tsx"></code>
--- a/dev-demos/features/line/linearline.md
+++ b/dev-demos/features/line/linearline.md
@ -0,0 +1,2 @@
+### Line - linear 
+<code src="./demos/linearline.tsx"></code>
--- a/dev-demos/features/line/lineblur.md
+++ b/dev-demos/features/line/lineblur.md
@ -0,0 +1,2 @@
+### Line - blur
+<code src="./demos/lineblur.tsx"></code>
--- a/dev-demos/features/line/linedash.md
+++ b/dev-demos/features/line/linedash.md
@ -0,0 +1,2 @@
+### Line - dash
+<code src="./demos/linedash.tsx"></code>
--- a/dev-demos/features/line/lineheight.md
+++ b/dev-demos/features/line/lineheight.md
@ -0,0 +1,2 @@
+### Line - height
+<code src="./demos/lineheight.tsx"></code>
--- a/dev-demos/features/line/linewall.md
+++ b/dev-demos/features/line/linewall.md
@ -0,0 +1,2 @@
+### Line - wall
+<code src="./demos/linewall.tsx"></code>
--- a/dev-demos/features/line/simpleline.md
+++ b/dev-demos/features/line/simpleline.md
@ -0,0 +1,2 @@
+### Line - simple 
+<code src="./demos/simpleline.tsx"></code>
--- a/Show More
+++ b/Show More