fix: 修复热力图点被拉伸的问题 (#1169)

* feat: 去处事件节流

* fix: 修复热力图点被拉伸的问题

* style: lint style

packages/layers/src/heatmap/shaders/heatmap_frag.glsl

@@ -3,20 +3,23 @@ uniform sampler2D u_colorTexture;   // 根据强度分布的色带
 uniform float u_opacity;
 varying vec2 v_texCoord;
 
+uniform vec2 u_ViewportSize;
+
 float getBlurIndusty() {
-    float h = 2.0/512.0;
+    float vW = 2.0/u_ViewportSize.x;
+    float vH = 2.0/u_ViewportSize.y;
     vec2 vUv = v_texCoord;
-    float i11 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y + 1.0 * h) ).r;
+    float i11 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y + 1.0 * vH) ).r;
-    float i12 = texture2D( u_texture, vec2( vUv.x - 0.0 * h, vUv.y + 1.0 * h) ).r;
+    float i12 = texture2D( u_texture, vec2( vUv.x - 0.0 * vW, vUv.y + 1.0 * vH) ).r;
-    float i13 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y + 1.0 * h) ).r;
+    float i13 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y + 1.0 * vH) ).r;
 
-    float i21 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y) ).r;
+    float i21 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y) ).r;
     float i22 = texture2D( u_texture, vec2( vUv.x , vUv.y) ).r;
-    float i23 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y) ).r;
+    float i23 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y) ).r;
 
-    float i31 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y-1.0*h) ).r;
+    float i31 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y-1.0*vH) ).r;
-    float i32 = texture2D( u_texture, vec2( vUv.x - 0.0 * h, vUv.y-1.0*h) ).r;
+    float i32 = texture2D( u_texture, vec2( vUv.x - 0.0 * vW, vUv.y-1.0*vH) ).r;
-    float i33 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y-1.0*h) ).r;
+    float i33 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y-1.0*vH) ).r;
 
     return(
         i11 + 

stories/Map/components/bugfix.tsx

@@ -10,6 +10,7 @@ import {
   Marker,
   MarkerLayer,
   Popup,
+  HeatmapLayer,
 } from '@antv/l7';
 
 export default class Amap2demo extends React.Component {
@@ -25,10 +26,10 @@ export default class Amap2demo extends React.Component {
       id: 'map',
       map: new GaodeMap({
         pitch: 0,
-        style: 'dark',
+        style: 'blank',
         // center: [115, 30],
 
-        center: [105.790327, 36.495636],
+        center: [120, 30],
 
         zoom: 0,
         // layers: [new window.AMap.TileLayer.Satellite()]
@@ -38,44 +39,30 @@ export default class Amap2demo extends React.Component {
     this.scene = scene;
 
     scene.on('loaded', () => {
-      fetch(
+      const layer = new HeatmapLayer({})
-        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
+        .source([{ lng: 120, lat: 30, mag: 1 }], {
-      )
+          parser: { type: 'json', x: 'lng', y: 'lat' },
-        .then((res) => res.json())
+        })
-        .then((data) => {
+        .shape('heatmap')
-          data.features = data.features.filter((item) => {
+        .size('mag', [0, 1.0]) // weight映射通道
-            return item.properties.capacity > 800;
-          });
-          data.features.forEach((item) => {
-            // console.log(item.properties.capacity);
-          });
-          const pointLayer = new PointLayer({})
-            .source(data)
-            .shape('capacity', (capacity) =>
-              capacity < 5000 ? 'circle' : 'triangle',
-            )
-            .size('capacity', [0, 16])
-            .color('capacity', [
-              '#34B6B7',
-              '#4AC5AF',
-              '#5FD3A6',
-              '#7BE39E',
-              '#A1EDB8',
-              '#CEF8D6',
-            ])
-            .active(true)
         .style({
-              opacity: 0.5,
+          intensity: 2,
-              // strokeWidth: ["capacity", (capacity) => (capacity < 5000 ? 2 : 4)],
+          radius: 20,
-              strokeWidth: ['capacity', [1, 2]],
+          opacity: 1.0,
-              stroke: [
+          rampColors: {
-                'capacity',
+            colors: [
-                (capacity) => (capacity < 5000 ? '#ff0000' : '#0000ff'),
+              '#FF4818',
-              ],
+              '#F7B74A',
+              '#FFF598',
+              '#F27DEB',
+              '#8C1EB2',
+              '#421EB2',
+            ].reverse(),
+            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+          },
         });
 
-          scene.addLayer(pointLayer);
+      this.scene.addLayer(layer);
-        });
     });
   }