Heatmap和LineLayer一起渲染报错

[li1615882553]

问题描述

使用L7plot的Heatmap，然后手动新增了一个LineLayer，首次渲染的时候正常，但是更新layer的时候报错： Cannot read properties of undefined (reading 'subData') 导致热力图渲染不出来

重现链接

No response

重现步骤

在codeSanbox中渲染l7plot的热力图报错，所以在官网案例中复现 1、打开链接https://l7plot.antv.antgroup.com/zh/examples/heat/heatmap#housing-transaction 2、使用以下代码测试

import { Heatmap } from '@antv/l7plot';
import { LineLayer } from '@antv/l7';
fetch('https://gw.alipayobjects.com/os/antfincdn/S2Pb%26549sG/20210723023614.json')
  .then((response) => response.json())
  .then((data) => {
    const heatMap = new Heatmap('container', {
      map: {
        type: 'amap',
        style: 'dark',
        zoom: 6.7,
        center: [120.19660949707033, 30.234747338474293],
        pitch: 0,
      },
      source: {
        data: data,
        parser: {
          type: 'geojson',
        },
      },
      size: {
        field: 'count',
        value: [0, 1],
      },
    });
    const getLineLayer = async () => {
      return await fetch(
        "https://gw.alipayobjects.com/os/bmw-prod/55304d8d-4cb0-49e0-9d95-9eeacbe1c80a.json"
      )
        .then((res) => res.json())
        .then((data) => {
          return new LineLayer().source(data);
        });
    };
    heatMap.scene.once('loaded', async () => {
      const lineLayer = await getLineLayer();
      heatMap.scene.addLayer(lineLayer);

      setTimeout(async () => {
        heatMap.scene.removeAllLayer();
        const lineLayer = await getLineLayer();
        heatMap.scene.addLayer(lineLayer);
        heatMap.update({});
      }, 2000);
    })
  });

3、在等待2s后，重新添加layer的时候，控制台就会报错，然后线图层正常渲染，热力图层无法渲染

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions[bot]]

hi @li1615882553, welcome!

[lvisei]

@li1615882553

heatMap.scene.removeAllLayer 会把地图上所有图层都给移除了，热力图层都移除了，更新自然没有用了。L7plot 适合单图层的图表需求，多图层需求建议用 L7。

[li1615882553]

@lvisei

我看了一下update的逻辑，他是先移除热力图层，然后重新创建热力图层，加到scene中。并没有执行的图层更新的逻辑。

我换一个例子重现一下：2s后我需要新增一个line图层，然后同时heatmap图层发生了变化，需要更新，这样也会出现上面的错误

import { Heatmap } from '@antv/l7plot';
import { LineLayer } from '@antv/l7';
fetch('https://gw.alipayobjects.com/os/antfincdn/S2Pb%26549sG/20210723023614.json')
  .then((response) => response.json())
  .then((data) => {
    const heatMap = new Heatmap('container', {
      map: {
        type: 'amap',
        style: 'dark',
        zoom: 6.7,
        center: [120.19660949707033, 30.234747338474293],
        pitch: 0,
      },
      source: {
        data: data,
        parser: {
          type: 'geojson',
        },
      },
      size: {
        field: 'count',
        value: [0, 1],
      },
    });
    const getLineLayer = async () => {
      return await fetch(
        "https://gw.alipayobjects.com/os/bmw-prod/55304d8d-4cb0-49e0-9d95-9eeacbe1c80a.json"
      )
        .then((res) => res.json())
        .then((data) => {
          return new LineLayer().source(data);
        });
    };
    heatMap.scene.once('loaded', async () => {
      const lineLayer = await getLineLayer();
      heatMap.scene.addLayer(lineLayer);

      setTimeout(async () => {
        // 比如需求是新增一个其他的LineLayer同时更新heatMap
        const anotherLineLayer = await getLineLayer();
        heatMap.scene.addLayer(anotherLineLayer);
        heatMap.update({});
      }, 2000);
    })
  });