feat: 经典热力图、点图层普通点支持动态设置 modelData (#1084)

* chore: update version 2.8.30 -> 2.8.31

* feat: 经典热力图、点图层普通点支持动态设置 modelData

* style: lint style

* refactor: 调整热力图 modelData 更新方法的实现

* style: lint style

packages/layers/src/core/BaseLayer.ts

@@ -424,6 +424,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     }
     const calEncodeData = this.calculateEncodeData(data, option);
     const triangulation = this.triangulation;
+
     if (calEncodeData && triangulation) {
       return this.styleAttributeService.createAttributesAndIndices(
         calEncodeData,

packages/layers/src/heatmap/index.ts

@@ -1,3 +1,4 @@
+import { IAttrubuteAndElements } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
 import { IHeatMapLayerStyleOptions } from '../core/interface';
 import HeatMapModels, { HeatMapModelType } from './models';
@@ -32,6 +33,18 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
     );
     return this;
   }
+
+  public updateModelData(data: IAttrubuteAndElements) {
+    if (data.attributes && data.elements) {
+      this.models[0].updateAttributesAndElements(
+        data.attributes,
+        data.elements,
+      );
+    } else {
+      console.warn('data error');
+    }
+  }
+
   protected getConfigSchema() {
     return {
       properties: {

packages/layers/src/heatmap/models/heatmap.ts

@@ -155,6 +155,7 @@ export default class HeatMapModel extends BaseModel {
     });
   }
   private buildHeatMapIntensity(): IModel {
+    this.layer.triangulation = HeatmapTriangulation;
     return this.layer.buildLayerModel({
       moduleName: 'heatmapintensity',
       vertexShader: heatmapFramebufferVert,

packages/layers/src/point/models/normal.ts

@@ -92,6 +92,7 @@ export default class NormalModel extends BaseModel {
       mask = false,
       maskInside = true,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
+    this.layer.triangulation = PointTriangulation;
     return [
       this.layer.buildLayerModel({
         moduleName: 'normalpoint',

stories/MapPerformance/components/updataHeatMap.tsx

@@ -0,0 +1,82 @@
+// @ts-nocheck
+// @ts-ignore
+import { Scene } from '@antv/l7';
+import { HeatmapLayer, LineLayer } from '@antv/l7-layers';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Demo extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [116.49114, 39.866973],
+        zoom: 10,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      let heatData1 = [{ lat: 39.866973, lng: 116.49114, count: 48 }];
+      let heatData2 = [
+        { lat: 39.866973, lng: 116.49114, count: 48 },
+        { lat: 39.87, lng: 116.45, count: 48 },
+      ];
+
+      const parser = {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat',
+        },
+      };
+      const heatmaplayer = new HeatmapLayer()
+        .source(heatData1, parser)
+        .size('count', [0, 1])
+        .shape('heatmap')
+        .style({
+          intensity: 10,
+          radius: 20,
+          opacity: 1.0,
+          rampColors: {
+            colors: [
+              '#2E8AE6',
+              '#69D1AB',
+              '#DAF291',
+              '#FFD591',
+              '#FF7A45',
+              '#CF1D49',
+            ],
+            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+          },
+        });
+      scene.addLayer(heatmaplayer);
+      // console.log(heatmaplayer)
+      let modelData = heatmaplayer.createModelData(heatData2, parser);
+      setTimeout(() => {
+        heatmaplayer.updateModelData(modelData);
+        scene.render();
+      }, 1000);
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      ></div>
+    );
+  }
+}

stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx

@@ -0,0 +1,208 @@
+// @ts-nocheck
+// @ts-ignore
+import { Scene } from '@antv/l7';
+import { PointLayer, HeatmapLayer } from '@antv/l7-layers';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+import { styled, withStyles } from '@material-ui/core/styles';
+import Slider from '@material-ui/core/Slider';
+
+export default class Demo extends React.Component {
+  private scene: Scene;
+  private layer: any;
+
+  constructor() {
+    this.state = {
+      currentYear: 5,
+      modelDatas: {},
+    };
+  }
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [113.76, 22.742875],
+        zoom: 12,
+        style: 'dark',
+      }),
+    });
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/bmw-prod/6956815b-f2b0-4242-97d6-8f3fea62ea17.txt',
+      )
+        // fetch('https://gw.alipayobjects.com/os/bmw-prod/b08e27a8-26e0-4ba3-9881-7b01f5638716.txt')
+        .then((res) => res.text())
+        .then((res) => {
+          const list = {};
+          const array = res.split('\n');
+          array = array.map((str) => str.replace('"', ''));
+          array.map((str) => {
+            let data = str.split(',');
+            let lng = +data[0];
+            let lat = +data[1];
+            data.slice(2).map((e, i) => {
+              if (
+                e !== undefined &&
+                e !== '"' &&
+                e !== '' &&
+                typeof +e === 'number'
+              ) {
+                if (!list[i + '']) {
+                  list[i + ''] = [];
+                  list[i + ''].push({
+                    lng,
+                    lat,
+                    v: +e,
+                  });
+                } else {
+                  list[i + ''].push({
+                    lng,
+                    lat,
+                    v: +e,
+                  });
+                }
+              }
+            });
+          });
+          const listKeys = Object.keys(list);
+
+          // console.log(list)
+          // console.log(list['0'])
+          const data0 = list['0'];
+          const parser = {
+            parser: {
+              type: 'json',
+              x: 'lng',
+              y: 'lat',
+            },
+          };
+          // const layer = new PointLayer({  })
+          // .source(data0, parser)
+          // .size('v', v => Math.pow(v, 2))
+          // .color('v', [
+          //   '#ffffb2',
+          //   '#fed976',
+          //   '#feb24c',
+          //   '#fd8d3c',
+          //   '#f03b20',
+          //   '#bd0026',
+          // ])
+          // // .shape('circle')
+          // .shape('simple')
+          // .style({
+          //   opacity: 0.2
+          // })
+          // .shape('dot')
+          const layer = new HeatmapLayer()
+            .source(data0, parser)
+            .size('v', [0, 0.2, 0.4, 0.6, 0.8, 1])
+            .shape('heatmap')
+            .style({
+              intensity: 2,
+              radius: 10,
+              opacity: 1.0,
+              rampColors: {
+                colors: [
+                  '#2E8AE6',
+                  '#69D1AB',
+                  '#DAF291',
+                  '#FFD591',
+                  '#FF7A45',
+                  '#CF1D49',
+                ],
+                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+              },
+            });
+
+          scene.addLayer(layer);
+          this.layer = layer;
+          this.scene = scene;
+
+          listKeys.map((key) => {
+            this.state.modelDatas[key + ''] = layer.createModelData(
+              list[key + ''],
+              parser,
+            );
+          });
+        });
+    });
+  }
+
+  public timelinechange(time) {
+    if (time !== this.state.currentYear) {
+      this.layer.updateModelData(this.state.modelDatas[time]);
+      this.scene.render();
+      this.setState({
+        currentYear: time,
+      });
+    }
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        {this.state.modelDatas !== undefined && (
+          <RangeInput
+            min={0}
+            max={11}
+            value={this?.state?.currentYear || 0}
+            onChange={(e) => this.timelinechange(e)}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+const PositionContainer = styled('div')({
+  position: 'absolute',
+  zIndex: 9,
+  bottom: '40px',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const SliderInput = withStyles({
+  root: {
+    marginLeft: 12,
+    width: '60%',
+  },
+  valueLabel: {
+    '& span': {
+      background: 'none',
+      color: '#fff',
+    },
+  },
+})(Slider);
+
+function RangeInput({ min, max, value, onChange }) {
+  return (
+    <PositionContainer>
+      <SliderInput
+        min={min}
+        max={max}
+        value={value}
+        onChange={(event, newValue) => onChange(newValue)}
+        valueLabelDisplay="auto"
+        valueLabelFormat={(t) => t}
+      />
+    </PositionContainer>
+  );
+}

stories/MapPerformance/map.stories.tsx

@@ -6,6 +6,8 @@ import UpdateAttrAndEle_line from './components/updateAttrAndEle_line';
 import UpdateAttrAndEle_polygon from './components/updateAttrAndEle_polygon';
 import UpdateAttrAndEle_planeGeometry from './components/updateAttrAndEle_planeGeometry';
 import UpdateAttrTimeLine from './components/updataPointsTimeLine';
+import UpdateAttrShenZhen from './components/updateAttrAndEleShenZhen';
+import UpdateHeatMap from './components/updataHeatMap';
 import PointTest from './components/Map';
 import BigLine from './components/BigLine';
 import DataUpdate from './components/DataUpdate';
@@ -16,6 +18,8 @@ storiesOf('地图性能检测', module)
   .add('更新数据 update polygon attr&ele', () => <UpdateAttrAndEle_polygon />)
   .add('更新数据 update plane geometry attr&ele', () => <UpdateAttrAndEle_planeGeometry />)
   .add('更新数据 update updateAttrTimeLine', () => <UpdateAttrTimeLine />)
+  .add('更新数据 update UpdateAttrShenZhen', () => <UpdateAttrShenZhen />)
+  .add('更新数据 update UpdateHeatMap', () => <UpdateHeatMap />)
   .add('点', () => <PointTest />)
   .add('BigLine', () => <BigLine />)
   .add('DataUpdate', () => <DataUpdate />);