fix: 修复图层 scale 更新问题 (#336)

packages/composite-layers/src/utils/index.ts

@@ -1,15 +1,46 @@
 import { Source } from '@antv/l7';
-import { deepMix, isEqual } from '@antv/util';
+import { isEqual, isPlainObject } from '@antv/util';
 
 export * from './keypress';
 
+function deepMix(dist: Record<string, any>, src: Record<string, any>, level: number = 0, maxLevel: number = 5) {
+  for (const key in src) {
+    if (Object.prototype.hasOwnProperty.call(src, key)) {
+      const value = src[key];
+      if (value !== null && isPlainObject(value)) {
+        if (!isPlainObject(dist[key])) {
+          dist[key] = {};
+        }
+        if (level < maxLevel) {
+          deepMix(dist[key], value, level + 1, maxLevel);
+        } else {
+          dist[key] = src[key];
+        }
+      } else if (Array.isArray(value)) {
+        dist[key] = [];
+        dist[key] = dist[key].concat(value);
+      } else if (value !== undefined) {
+        dist[key] = value;
+      }
+    }
+  }
+}
+
+const deepMixOptions = (rst: any, ...args: any[]) => {
+  for (let i = 0; i < args.length; i += 1) {
+    // 只进行最大 1 level 合并
+    deepMix(rst, args[i], 0, 1);
+  }
+  return rst;
+};
+
 /**
  * 深克隆图层配置项
  */
 export const deepMergeLayerOptions = <O extends { source: any }>(options: Partial<O>, srcOptions: Partial<O>): O => {
   const { source, ...restOptions } = options;
   const { source: srcSource, ...restSrcOptions } = srcOptions;
-  const target = { ...deepMix({}, restOptions, restSrcOptions) };
+  const target = deepMixOptions({}, restOptions, restSrcOptions);
 
   // source 是实例的情况
   if ((srcSource as any) instanceof Source) {

storybook/stories/composite-layers/bubble-layer/ScaleUpdate.tsx

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import { Scene, GaodeMap } from '@antv/l7';
+import { BubbleLayer } from '@antv/l7-composite-layers';
+
+class ScaleUpdate extends Component {
+  public scene: Scene | undefined;
+  public bubbleLayer: BubbleLayer | undefined;
+
+  constructor(props) {
+    super(props);
+  }
+
+  async initMap() {
+    this.scene = new Scene({
+      id: 'container',
+      map: new GaodeMap({
+        token: '6f025e700cbacbb0bb866712d20bb35c',
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+        center: [120.19660949707033, 30.234747338474293],
+      }),
+    });
+
+    const response = await fetch('https://mdn.alipayobjects.com/afts/file/A*8ARuTJPfyvcAAAAAAAAAAAAADrd2AQ/earthquake');
+    const data = await response.json();
+
+    this.bubbleLayer = new BubbleLayer({
+      id: 'BubbleLayer1',
+      autoFit: true,
+      source: {
+        data,
+        parser: {
+          type: 'json',
+          x: 'Longitude',
+          y: 'Latitude',
+        },
+      },
+      fillColor: {
+        field: 'Magnitude',
+        value: ['#d7191c', '#fdae61', '#a6d96a', '#1a9641'],
+        scale: {
+          type: 'threshold',
+          domain: [3.67, 4.85, 6.03],
+          unknown: '#f000',
+        },
+      },
+      // fillColor: {
+      //   field: 'MagType',
+      //   value: ['#ffffcc', '#c2e699', '#78c679', '#238443', '#238443', '#238443'],
+      //   scale: {
+      //     type: 'cat',
+      //     domain: ['Md', 'ML', 'Mw', 'Mx', 'Unk', 'Mh'],
+      //     unknown: '#f000',
+      //   },
+      // },
+      opacity: 0.8,
+      strokeColor: '#fff',
+      lineWidth: 1,
+      lineOpacity: 1,
+    });
+
+    this.scene && this.bubbleLayer.addTo(this.scene);
+  }
+
+  componentDidMount() {
+    this.initMap();
+  }
+
+  componentWillUnmount() {
+    this.scene && this.scene.destroy();
+  }
+
+  update = () => {
+    if (this.scene) {
+      this.bubbleLayer?.update({
+        fillColor: {
+          field: 'MagType',
+          value: ['#d7191c', '#1a9641'],
+          scale: {
+            type: 'cat',
+            // unknown: '#fff',
+          },
+        },
+        // fillColor: {
+        //   field: 'Depth',
+        //   value: ['#ffffd4', '#fed98e', '#fe9929', '#cc4c02'],
+        //   scale: {
+        //     type: 'quantize',
+        //     unknown: '#fff',
+        //   },
+        // },
+      });
+    }
+  };
+
+  render() {
+    return (
+      <div
+        id="container"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        <div style={{ position: 'absolute', left: '10px', zIndex: 1 }}>
+          <button type="button" onClick={this.update} style={{ marginTop: 8 }}>
+            update
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ScaleUpdate;

storybook/stories/composite-layers/bubble-layer/index.stories.tsx

@@ -1,5 +1,8 @@
 import { storiesOf } from '@storybook/react';
 
 import Earthquake from './Earthquake';
+import ScaleUpdate from './ScaleUpdate';
 
-storiesOf('复合图层/散点图层', module).add('地震震级', () => <Earthquake />);
+storiesOf('复合图层/散点图层', module)
+  .add('地震震级', () => <Earthquake />)
+  .add('ScaleUpdate', () => <ScaleUpdate />);