fix: 3d 热力图抖动问题 fixes #138 #263

README.zh-CN.md

@@ -6,6 +6,10 @@
 
 [GitHub](https://github.com/antvis/L7)
 
+```bash
+  git clone https://github.com/antvis/L7  --depth=1
+```
+
 L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
 
 L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。

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

@@ -276,7 +276,7 @@ export default class HeatMapModel extends BaseModel {
   private build3dHeatMap() {
     const { getViewportSize } = this.rendererService;
     const { width, height } = getViewportSize();
-    const triangulation = heatMap3DTriangulation(width / 2.0, height / 2.0);
+    const triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0);
     this.shaderModuleService.registerModule('heatmap3dColor', {
       vs: heatmap3DVert,
       fs: heatmap3DFrag,

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

@@ -9,5 +9,7 @@ void main(){
      float intensity = texture2D(u_texture, v_texCoord).r;
     vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
     gl_FragColor = color;
-    gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
+    // gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
+     gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;
+
 }

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

@@ -20,7 +20,7 @@ vec2 toBezier(float t, vec4 p){
 void main() {
   v_texCoord = a_Uv;
 
-  vec2 pos = 1.8 * (a_Uv * vec2(2.0) - vec2(1.0));
+  vec2 pos =(a_Uv * vec2(2.0) - vec2(1.0));
 
 
   vec4 p1 = vec4(pos, 0.0, 1.0);
@@ -40,6 +40,6 @@ void main() {
 
   v_intensity = texture2D(u_texture, v_texCoord).r;
   fh = toBezier(v_intensity, b).y;
-  gl_Position = project_common_position_to_clipspace(vec4(position.xy, fh * 50., 1.0));
+  gl_Position = project_common_position_to_clipspace(vec4(position.xy, fh * project_pixel(50.), 1.0));
 
 }

stories/Layers/components/HeatMap.tsx

@@ -29,7 +29,7 @@ export default class HeatMapLayerDemo extends React.Component {
     const layer = new HeatmapLayer();
     layer
       .source(data)
-      .shape('heatmap')
+      .shape('heatmap3D')
       .size('mag', [0, 1.0]) // weight映射通道
       .style({
         intensity: 2,

stories/Layers/components/heatmap3d.tsx

@@ -1,5 +1,5 @@
 import { HeatmapLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { Mapbox,GaodeMap } from '@antv/l7-maps';
 // @ts-ignore
 import * as React from 'react';
 
@@ -17,7 +17,7 @@ export default class HeatMapLayerDemo extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         style: 'dark',
         pitch: 58.5,
         center: [111.8759, 30.6942],