fix: 替换 d3 系列包，以修复 umd 打包体积过大的问题

antvis · Jun 15, 2023 · d968eb2 · d968eb2
1 parent 0ba79c9
commit d968eb2
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 96 deletions.
diff --git a/packages/composite-layers/package.json b/packages/composite-layers/package.json
@@ -39,18 +39,15 @@
   },
   "dependencies": {
     "@antv/event-emitter": "^0.1.2",
+    "@antv/scale": "^0.4.12",
     "@antv/util": "^2.0.14",
-    "d3-color": "^3.1.0",
-    "d3-scale": "^3.0.0",
     "kdbush": "^3.0.0",
     "lodash-es": "^4.17.21",
     "reselect": "^4.1.8"
   },
   "devDependencies": {
     "@antv/l7": "^2.11.5",
     "@babel/core": "^7.22.5",
-    "@types/d3-color": "^3.1.0",
-    "@types/d3-scale": "^3.0.0",
     "@types/kdbush": "^3.0.2",
     "@types/lodash-es": "^4.17.7"
   },

diff --git a/packages/composite-layers/rollup.config.js b/packages/composite-layers/rollup.config.js
@@ -1,9 +1,10 @@
-import typescript from '@rollup/plugin-typescript';
-import nodeResolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import filesize from 'rollup-plugin-filesize';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
 import analyze from 'rollup-plugin-analyzer';
+import filesize from 'rollup-plugin-filesize';
 import { terser } from 'rollup-plugin-terser';
+import visualizer from 'rollup-plugin-visualizer';
 
 export default {
   input: 'src/index.ts',
@@ -29,5 +30,8 @@ export default {
       limit: 10,
     }),
     filesize(),
+    visualizer({
+      filename: 'dist/umd/stats.html',
+    }),
   ],
 };
diff --git a/packages/composite-layers/src/composite-layers/flow-layer/index.ts b/packages/composite-layers/src/composite-layers/flow-layer/index.ts
@@ -1,4 +1,4 @@
-import { debounce, merge } from 'lodash-es';
+import { debounce } from 'lodash-es';
 import { LineLayer } from '../../core-layers/line-layer';
 import { LineLayerOptions } from '../../core-layers/line-layer/types';
 import { PointLayer } from '../../core-layers/point-layer';
@@ -126,9 +126,14 @@ export class FlowLayer extends CompositeLayer<FlowLayerOptions> {
       circleStrokeWidth: strokeWidth,
       circleOpacity: opacity,
     } = this.options;
-    let options: PointLayerOptions = {
+    const options: PointLayerOptions = {
       source: {
         data: [],
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat',
+        },
       },
       shape: 'circle',
       minZoom,
@@ -144,32 +149,27 @@ export class FlowLayer extends CompositeLayer<FlowLayerOptions> {
       },
     };
     if (this.dataProvider && this.scene) {
-      const locationData = this.dataProvider.getFilterLocations(this.options.source, this.dataProviderState);
       const locationWeightRange = this.dataProvider.getLocationWeightRange(this.options.source, this.dataProviderState);
-      const locationSize = getSizeAttribute(this.options.circleRadius!, locationWeightRange);
-      const locationColor = getColorAttribute(this.options.circleColor!, locationWeightRange);
-      options = merge(options, {
-        source: {
-          data: locationData,
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-        size: locationSize,
-        color: locationColor,
-      });
+      options.source.data = this.dataProvider.getFilterLocations(this.options.source, this.dataProviderState);
+      options.size = getSizeAttribute(this.options.circleRadius!, locationWeightRange);
+      options.color = getColorAttribute(this.options.circleColor!, locationWeightRange);
     }
 
     return options;
   }
 
   protected getLineLayerOptions(): LineLayerOptions {
     const { minZoom, maxZoom, zIndex, visible, blend, pickingBuffer, lineOpacity: opacity } = this.options;
-    let options: LineLayerOptions = {
+    const options: LineLayerOptions = {
       source: {
         data: [],
+        parser: {
+          type: 'json',
+          x: 'fromLng',
+          y: 'fromLat',
+          x1: 'toLng',
+          y1: 'toLat',
+        },
       },
       shape: 'halfLine',
       minZoom,
@@ -185,31 +185,17 @@ export class FlowLayer extends CompositeLayer<FlowLayerOptions> {
       },
     };
     if (this.dataProvider && this.scene) {
-      const flowData = this.dataProvider.getFilterFlows(this.options.source, this.dataProviderState);
       const flowWeightRange = this.dataProvider.getFlowWeightRange(this.options.source, this.dataProviderState);
       const filterFlowWeightRange = this.dataProvider.getFilterFlowWeightRange(
         this.options.source,
         this.dataProviderState
       );
-      const flowSize = getSizeAttribute(this.options.lineWidth!, flowWeightRange);
-      let flowColor = getColorAttribute(this.options.lineColor!, flowWeightRange);
-      if (this.options.fadeOpacityEnabled) {
-        flowColor = getOpacityColorAttribute(flowColor, filterFlowWeightRange, this.options.fadeOpacityAmount!);
+      if (this.options.fadeOpacityEnabled && options.style) {
+        options.style.opacity = getOpacityColorAttribute(filterFlowWeightRange, this.options.fadeOpacityAmount!);
       }
-      options = merge(options, {
-        source: {
-          data: flowData,
-          parser: {
-            type: 'json',
-            x: 'fromLng',
-            y: 'fromLat',
-            x1: 'toLng',
-            y1: 'toLat',
-          },
-        },
-        size: flowSize,
-        color: flowColor,
-      });
+      options.source.data = this.dataProvider.getFilterFlows(this.options.source, this.dataProviderState);
+      options.size = getSizeAttribute(this.options.lineWidth!, flowWeightRange);
+      options.color = getColorAttribute(this.options.lineColor!, flowWeightRange);
     }
     return options;
   }

diff --git a/packages/composite-layers/src/composite-layers/flow-layer/utils/style.ts b/packages/composite-layers/src/composite-layers/flow-layer/utils/style.ts
@@ -1,33 +1,22 @@
 import { ScaleTypes } from '@antv/l7';
-import * as d3Color from 'd3-color';
-import * as d3Scale from 'd3-scale';
+import { Log } from '@antv/scale';
+import { LineLayerStyleOptions } from '../../../core-layers/line-layer/types';
 import { ColorAttr, SizeAttr } from '../../../types';
 
-const ScaleMap = {
-  [ScaleTypes.LINEAR]: d3Scale.scaleLinear,
-  [ScaleTypes.POWER]: d3Scale.scalePow,
-  [ScaleTypes.LOG]: d3Scale.scaleLog,
-  [ScaleTypes.SEQUENTIAL]: d3Scale.scaleSequential,
-  [ScaleTypes.TIME]: d3Scale.scaleTime,
-  [ScaleTypes.QUANTILE]: d3Scale.scaleQuantile,
-  [ScaleTypes.QUANTIZE]: d3Scale.scaleQuantize,
-  [ScaleTypes.THRESHOLD]: d3Scale.scaleThreshold,
-  [ScaleTypes.CAT]: d3Scale.scaleOrdinal,
-  [ScaleTypes.DIVERGING]: d3Scale.scaleDiverging,
-};
-
 const DefaultScaleType = ScaleTypes.LINEAR;
 
 export function getSizeAttribute(sizeAttr: SizeAttr, weightRange: [number, number]): SizeAttr {
   if (sizeAttr instanceof Object && !(sizeAttr instanceof Function) && !Array.isArray(sizeAttr)) {
     const { field, value } = sizeAttr;
     if (field === 'weight' && Array.isArray(value) && value.length) {
       const scaleType = (sizeAttr.scale?.type || DefaultScaleType) as ScaleTypes;
-      const scaleFunc = ScaleMap[scaleType]().domain(weightRange).range(value);
       return {
         ...sizeAttr,
-        value: ({ weight }) => {
-          return scaleFunc(weight);
+        scale: {
+          field: 'size',
+          type: scaleType,
+          domain: weightRange,
+          range: value,
         },
       };
     }
@@ -40,12 +29,13 @@ export function getColorAttribute(colorAttr: ColorAttr, weightRange: [number, nu
     const { field, value } = colorAttr;
     if (field === 'weight' && Array.isArray(value) && value.length) {
       const scaleType = (colorAttr.scale?.type || DefaultScaleType) as ScaleTypes;
-      const scaleFunc = ScaleMap[scaleType]().domain(weightRange).range(value);
-
       return {
         ...colorAttr,
-        value: ({ weight }) => {
-          return scaleFunc(weight);
+        scale: {
+          field: 'color',
+          type: scaleType,
+          domain: weightRange,
+          range: value,
         },
       };
     }
@@ -54,23 +44,18 @@ export function getColorAttribute(colorAttr: ColorAttr, weightRange: [number, nu
 }
 
 export function getOpacityColorAttribute(
-  colorAttr: ColorAttr,
   weightRange: [number, number],
   fadeOpacityAmount: number
-): ColorAttr {
-  if (colorAttr instanceof Object && !(colorAttr instanceof Function) && !Array.isArray(colorAttr)) {
-    const { field, value } = colorAttr;
-    if (field === 'weight' && value instanceof Function) {
-      const scaleFunc = d3Scale.scaleLog().domain(weightRange).range([0, 1]);
-      return {
-        ...colorAttr,
-        value: (attr: any) => {
-          const color = d3Color.rgb(value(attr) as string);
-          color.opacity = scaleFunc(attr.weight) / (100 / (100 - fadeOpacityAmount));
-          return color.formatRgb();
-        },
-      };
-    }
-  }
-  return colorAttr;
+): LineLayerStyleOptions['opacity'] {
+  const scaleFunc = new Log({
+    domain: weightRange,
+    range: [0, 1],
+  });
+  const ratio = (1 - fadeOpacityAmount / 100) * 1.5;
+  return [
+    'weight',
+    (weight: any) => {
+      return scaleFunc.map(weight) * ratio;
+    },
+  ];
 }
diff --git a/packages/composite-layers/src/composite-layers/flow-layer/utils/zoom.ts b/packages/composite-layers/src/composite-layers/flow-layer/utils/zoom.ts
@@ -1,8 +1,8 @@
-import { minBy } from 'lodash-es';
-
 export function findAppropriateZoom(availableZoomLevels: number[], zoom: number) {
   if (!availableZoomLevels.length) {
     throw new Error('No available zoom levels');
   }
-  return minBy(availableZoomLevels, (availableZoom) => Math.abs(availableZoom + 1 - zoom));
+  const zoomBetweenList = availableZoomLevels.map((availableZoom) => Math.abs(availableZoom + 1 - zoom));
+  const targetIndex = zoomBetweenList.indexOf(Math.min(...zoomBetweenList));
+  return availableZoomLevels[targetIndex];
 }
diff --git a/packages/l7plot/rollup.config.js b/packages/l7plot/rollup.config.js
@@ -1,13 +1,13 @@
-import path from 'path';
-import typescript from '@rollup/plugin-typescript';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import nodePolyfills from 'rollup-plugin-node-polyfills';
+import alias from '@rollup/plugin-alias';
 import commonjs from '@rollup/plugin-commonjs';
-import filesize from 'rollup-plugin-filesize';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import path from 'path';
 import analyze from 'rollup-plugin-analyzer';
-import alias from '@rollup/plugin-alias';
+import filesize from 'rollup-plugin-filesize';
+import nodePolyfills from 'rollup-plugin-node-polyfills';
 import { terser } from 'rollup-plugin-terser';
-// import { visualizer } from 'rollup-plugin-visualizer';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 const projectRootDir = path.resolve(__dirname, '..', '..');
 
@@ -40,8 +40,8 @@ export default {
       limit: 10,
     }),
     filesize(),
-    // visualizer({
-    //   filename: 'dist/umd/stats.html',
-    // }),
+    visualizer({
+      filename: 'dist/umd/stats.html',
+    }),
   ],
 };