fix: 修复热力蜂窝图层渲染空白 (#2500)

* fix: 修复热力蜂窝图层渲染空白 * chore: add changeset * chore(CI): update snapshots (#2501) Co-authored-by: lvisei <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: lvisei <[email protected]>
antvis · May 24, 2024 · 0754eeb · 0754eeb
1 parent a7bbef5
commit 0754eeb
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 18 deletions.
diff --git a/.changeset/honest-schools-relate.md b/.changeset/honest-schools-relate.md
@@ -0,0 +1,5 @@
+---
+'@antv/l7-layers': patch
+---
+
+fix: 修复热力蜂窝图层渲染空白
diff --git a/__tests__/integration/snapshots/heatmap_grid.png b/__tests__/integration/snapshots/heatmap_grid.png
diff --git a/__tests__/integration/snapshots/heatmap_hexagon.png b/__tests__/integration/snapshots/heatmap_hexagon.png
diff --git a/examples/demos/heatmap/grid.ts b/examples/demos/heatmap/grid.ts
@@ -12,27 +12,34 @@ export const grid: TestCase = async (options) => {
   });
 
   const data = await fetch(
-    'https://gw.alipayobjects.com/os/bmw-prod/3dadb1f5-8f54-4449-8206-72db6e142c40.json',
-  ).then((res) => res.json());
+    'https://gw.alipayobjects.com/os/antfincdn/aBQAMIpvPL/qingdao_500m.csv',
+  ).then((res) => res.text());
 
   const layer = new HeatmapLayer({
     autoFit: true,
   })
     .source(data, {
-      transforms: [
-        {
-          type: 'hexagon',
-          size: 5 * 100000,
-        },
-      ],
+      parser: { type: 'csv', x: 'lng', y: 'lat' },
+      transforms: [{ type: 'grid', size: 3000, field: 'count', method: 'sum' }],
     })
-    .shape('circle')
-    .active(false)
-    .color('#aaa')
+    .shape('square')
     .style({
-      coverage: 0.7,
-      angle: 0,
-    });
+      coverage: 0.9,
+    })
+    .color(
+      'count',
+      [
+        '#FF3417',
+        '#FF7412',
+        '#FFB02A',
+        '#FFE754',
+        '#46F3FF',
+        '#02BEFF',
+        '#1A7AFF',
+        '#0A1FB2',
+      ].reverse(),
+    );
+
   scene.addLayer(layer);
 
   return scene;

diff --git a/examples/demos/heatmap/hexagon.ts b/examples/demos/heatmap/hexagon.ts
@@ -26,7 +26,6 @@ export const hexagon: TestCase = async (options) => {
         },
       ],
     })
-    .size('sum', [0, 60])
     .shape('hexagon')
     .style({
       opacity: 1,
@@ -48,9 +47,7 @@ export const hexagon: TestCase = async (options) => {
       ].reverse(),
     );
 
-  // scene.startAnimate();
   scene.addLayer(layer);
-  // scene.render();
 
   return scene;
 };
diff --git a/examples/utils/scene.ts b/examples/utils/scene.ts
@@ -14,7 +14,7 @@ export const CaseScene = (options: CaseSceneOptions) => {
 
   const style = isMapbox
     ? 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json'
-    : 'normal';
+    : 'light';
 
   const map = new Maps[basemap]({
     style,

diff --git a/packages/layers/src/heatmap/models/hexagon.ts b/packages/layers/src/heatmap/models/hexagon.ts
@@ -51,6 +51,7 @@ export default class HexagonModel extends BaseModel {
       moduleName: 'heatmapHexagon',
       vertexShader: hexagon_vert,
       fragmentShader: hexagon_frag,
+      defines: this.getDefines(),
       triangulation: HeatmapGridTriangulation,
       depth: { enable: false },
       primitive: gl.TRIANGLES,