feat: 渲染流程异步改造、部分支持 worker (antvis#1224)

* feat: 去处事件节流 * feat: 创建图层流程改造 + worker 功能验证 * style: lint style * feat: 修改 worker 引入 * feat: 调整 worker 的拼接 * style: lint style * feat: 修改 source 构建流程为异步 * style: lint style * feat: 在点图层中去除 global 的耦合 * style: lint style * fix: 修复更新 style 的同时更新了 option 带来的问题 * style: lint style * feat: 拆除 arc3d 地球模式和普通模式的耦合 * style: lint style * feat: 修改 worker * style: lint style * feat: 优化图层创建渲染流程 * style: lint style * Merge branch 'workspace' into tileDemo * style: style lint * feat: 改在点图层的创建流程 * style: lint style * style: lint style * chore: worker helper (antvis#1241) * chore: worker helper * chore: 修改注册流程 * chore: 修改打包方式 * chore: 集成打包环境 * style: lint style * feat: add worker pool failed * style: lint style * style: lint style * feat: 更新 worker 的使用 * chore: 更新 scripts 标签 (antvis#1242) * feat: remove utils triangulation * feat: 完成 pointLayer/earthLayer 的异步改造 * style: lint style * style: lint style * style: lint style * chore: 修改 worker 执行函数 (antvis#1246) * chore: 修改 worker 执行函数 * chore: remove console * feat: 完成线图层和线图层的异步创建流程改造 * style: lint style * style: lint style * feat: 完成 polygon 创建流程的异步改造 * style: lint style * feat: 完成 heatmap 创建流程的异步改造 * style: lint style * feat: 完成 citybuildingLayer 图层创建的异步改造 * style: lint style * feat: 完成 imageLayer 创建异步改造 * style: lint style * feat: 完成 ImageLayer/RasterLayer 创建的异步改造 * style: lint style * feat: 完成 geometryLayer 创建的异步改造 * style: lint style * feat: 完成 WindLayer 创建的异步改造 * style: lint style * feat: 完成 tileLayer 瓦片图层创建图层的异步改造 * style: lint style * feat: 调整 worker 调用的参数和 worker 代码的位置 * style: lint style * chore: 调整 worker 代码结构 * style: lint style * feat: 梳理完善 layer 的 modelName * style: lint style * chore: 调整部分 modeName 的命名 * feat: 线图层的 lineModel 支持 worker 计算 * style: lint style * feat: 完善 source 异步改造，增加测试 * style: lint style * feat: 支持 polygonFill 的 worker 计算 * style: lint style * feat: tile point/line/polygon 支持 worker 计算 * style: lint style * chore: 调整 worker 目录结构 * style: lint style * chore: 修改 worker 打包路径 * feat: 增加 ISrource 时间的类型定义 * chore: change function getPureDescriptors -> getDescriptorsWithOutFunc * feat: 完善类型定义，去除额外 worker 代码 * chore: worker 注册放到 utils 里面 (antvis#1253) * chore: 代码清理 * style: lint style * fix: 修复 encodeData 可能的空值 * feat: 地球模式的点、线图层兼容写法 * style: lint style * feat: 完成对 dataImage 的异步改造 * fix: 修复 demo 中对时序数据的使用 * style: lint style * fix: 修复点图层文字重新布局未重绘问题 * fix: 修复 pointLayer fillImage 失效 * style: lint style * chore: 在官网 demo 中去除 multipass * chore: 调整官网 demo 效果 * style: lint style * chore: 调整官网 demo * style: lint style * fix: 修复 layerModel 使用的报错 * chore: update l7plot version Co-authored-by: lvisei <[email protected]>
escawn · Aug 2, 2022 · 6a04210 · 6a04210
1 parent 1a78586
commit 6a04210
Show file tree

Hide file tree

Showing 179 changed files with 6,564 additions and 1,688 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -21,8 +21,11 @@ addParameters({
 });
 
 // automatically import all files ending in *.stories.tsx
+
 // const req = require.context('../stories', true, /\.stories\.tsx$/);
-const req = require.context('../stories/Map', 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/MapPerformance', true, /\.stories\.tsx$/);
 // const req = require.context('../stories/tile', true, /\.stories\.tsx$/);
 
 function loadStories() {

diff --git a/babel.config.js b/babel.config.js
@@ -1,21 +1,21 @@
 // @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 {
       presets: [
         '@babel/preset-env',
         [
           '@babel/preset-react',
           {
-            development: isCommonJS
-          }
+            development: isCommonJS,
+          },
         ],
         // 'babel-preset-gatsby', {
         //   silence: true
@@ -28,8 +28,8 @@ module.exports = api => {
         [
           '@babel/plugin-proposal-decorators',
           {
-            legacy: true
-          }
+            legacy: true,
+          },
         ],
         [
           // import glsl as raw text
@@ -38,11 +38,11 @@ module.exports = api => {
             extensions: [
               // 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
               '.pbf',
-              '.glsl'
-            ]
-          }
-        ]
-      ]
+              '.glsl',
+            ],
+          },
+        ],
+      ],
     };
   }
 
@@ -53,24 +53,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 +83,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__',
+          ]
+        : []),
+    ],
   };
 };
diff --git 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: '' },
+      };
+    },
+  };
+}
diff --git 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,
+      }),
+    ],
+  },
 ];