fix: source hexagon layer get rawdata

packages/core/src/services/interaction/InteractionService.ts

@@ -112,6 +112,7 @@ export default class InteractionService extends EventEmitter
       } else {
         this.lastClickTime = nowTime;
         this.lastClickXY = [x, y];
+        // @ts-ignore
         this.clickTimer = setTimeout(() => {
           type = 'click';
           this.emit(InteractionEvent.Hover, { x, y, lngLat, type });

packages/source/src/source.ts

@@ -136,7 +136,7 @@ export default class Source extends EventEmitter {
   }
   public getFeatureById(id: number): unknown {
     const { type = 'geojson' } = this.parser;
-    if (type === 'geojson' && !this.cluster) {
+    if (type === 'geojson' && !this.cluster && this.transforms.length === 0) {
       //  TODO： 聚合图层返回聚合和后的数据
       return id < this.originData.features.length
         ? this.originData.features[id]

packages/source/src/transform/grid.ts

@@ -93,7 +93,7 @@ function _getGridLayerDataFromGridHash(
       item[option.method] = Satistics.statMap[option.method](columns);
     }
     Object.assign(item, {
-      _id: i + 1,
+      _id: i,
       coordinates: [
         -180 + gridOffset.xOffset * lonIdx,
         -90 + gridOffset.yOffset * latIdx,

packages/source/src/transform/hexagon.ts

@@ -45,7 +45,7 @@ export function pointToHexbin(data: IParserData, option: ITransform) {
         count: hex.length,
         rawData: hex,
         coordinates: [hex.x, hex.y],
-        _id: index + 1,
+        _id: index,
       };
     }),
     radius: pixlSize,

stories/Layers/Layers.stories.tsx

@@ -8,6 +8,7 @@ import Column from './components/column';
 import DashLineDemo from './components/dash';
 import DataUpdate from './components/data_update';
 import HeatMapDemo from './components/HeatMap';
+import HexagonLayerDemo from './components/hexagon';
 import LightDemo from './components/light';
 import LineLayer from './components/Line';
 import PointDemo from './components/Point';
@@ -35,5 +36,6 @@ storiesOf('图层', module)
   .add('3D弧线', () => <ArcLineDemo />)
   .add('2D弧线', () => <Arc2DLineDemo />)
   .add('热力图', () => <HeatMapDemo />)
+  .add('网格热力图', () => <HexagonLayerDemo />)
   .add('栅格', () => <RasterLayerDemo />)
   .add('图片', () => <ImageLayerDemo />);

stories/Layers/components/hexagon.tsx

@@ -0,0 +1,116 @@
+import { HeatmapLayer, PointLayer, Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as dat from 'dat.gui';
+import * as React from 'react';
+// @ts-ignore
+import data from '../data/data.json';
+export default class HexagonLayerDemo extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+  private gui: dat.GUI;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+    if (this.gui) {
+      this.gui.destroy();
+    }
+  }
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
+    );
+    const pointsData = await response.json();
+
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        center: [120.19382669582967, 30.258134],
+        pitch: 0,
+        style: 'light',
+        zoom: 3,
+      }),
+    });
+    const pointLayer = new HeatmapLayer({})
+      .source(pointsData, {
+        transforms: [
+          {
+            type: 'grid',
+            size: 500000,
+            field: 'capacity',
+            method: 'sum',
+          },
+        ],
+      })
+      .shape('hexagon')
+      .style({
+        coverage: 0.9,
+        angle: 0,
+        opacity: 0.6,
+      })
+      .color(
+        'sum',
+        [
+          '#3F4BBA',
+          '#3F4BBA',
+          '#3F4BBA',
+          '#3F4BBA',
+          '#3C73DA',
+          '#3C73DA',
+          '#3C73DA',
+          '#0F62FF',
+          '#0F62FF',
+          '#30B2E9',
+          '#30B2E9',
+          '#40C4CE',
+        ].reverse(),
+      );
+    scene.addLayer(pointLayer);
+    pointLayer.on('click', (e) => {
+      console.log(e);
+    });
+
+    this.scene = scene;
+
+    const gui = new dat.GUI();
+    this.gui = gui;
+    const styleOptions = {
+      textAnchor: 'center',
+      strokeWidth: 1,
+    };
+    const rasterFolder = gui.addFolder('栅格可视化');
+    rasterFolder
+      .add(styleOptions, 'textAnchor', [
+        'center',
+        'left',
+        'right',
+        'top',
+        'bottom',
+        'top-left',
+        'bottom-right',
+        'bottom-left',
+        'top-right',
+      ])
+      .onChange((anchor: string) => {
+        pointLayer.style({
+          textAnchor: anchor,
+        });
+        scene.render();
+      });
+    // });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}