fix: 采用非偏移坐标系坐标系解决高德地图中国区域抖动的问题

packages/core/src/services/camera/CameraService.ts

@@ -67,6 +67,10 @@ export default class CameraService implements ICameraService {
     return this.viewport.getViewMatrixUncentered();
   }
 
+  public getViewProjectionMatrixUncentered(): number[] {
+    return this.viewport.getViewProjectionMatrixUncentered();
+  }
+
   public getViewProjectionMatrix(): number[] {
     return (
       this.overridedViewProjectionMatrix ||

packages/core/src/services/camera/ICameraService.ts

@@ -16,6 +16,7 @@ export interface IViewport {
   getProjectionMatrix(): number[];
   getViewMatrix(): number[];
   getViewMatrixUncentered(): number[];
+  getViewProjectionMatrixUncentered(): number[];
   getViewProjectionMatrix(): number[];
   getZoom(): number;
   getZoomScale(): number;

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

@@ -260,14 +260,17 @@ export default class HeatMapModel extends BaseModel {
     } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     const invert = mat4.invert(
       mat4.create(),
-      // @ts-ignore
-      mat4.fromValues(...this.cameraService.getViewProjectionMatrix()),
+      mat4.fromValues(
+        // @ts-ignore
+        ...this.cameraService.getViewProjectionMatrixUncentered(),
+      ),
     ) as mat4;
     this.colorModel.draw({
       uniforms: {
         u_opacity: opacity || 1.0,
         u_colorTexture: this.colorTexture,
         u_texture: this.heatmapFramerBuffer,
+        u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
         u_InverseViewProjectionMatrix: [...invert],
       },
     });

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

@@ -5,6 +5,7 @@ uniform sampler2D u_texture;
 varying vec2 v_texCoord;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_InverseViewProjectionMatrix;
+uniform mat4 u_ViewProjectionMatrixUncentered;
 varying float v_intensity;
 
 vec2 toBezier(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3) {
@@ -26,8 +27,8 @@ void main() {
   vec4 p1 = vec4(pos, 0.0, 1.0);
 	vec4 p2 = vec4(pos, 1.0, 1.0);
 
-	vec4 inverseP1 = unproject_clipspace_to_position(p1, u_InverseViewProjectionMatrix);
-	vec4 inverseP2 = unproject_clipspace_to_position(p2, u_InverseViewProjectionMatrix) ;
+	vec4 inverseP1 = u_InverseViewProjectionMatrix * p1;
+	vec4 inverseP2 = u_InverseViewProjectionMatrix * p2;
 
   inverseP1 = inverseP1 / inverseP1.w;
 	inverseP2 = inverseP2 / inverseP2.w;
@@ -40,6 +41,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 * project_pixel(50.), 1.0));
+  gl_Position = u_ViewProjectionMatrixUncentered * vec4(position.xy, fh * project_pixel(50.), 1.0);
 
 }

packages/maps/src/amap/Viewport.ts

@@ -7,6 +7,7 @@ export default class Viewport implements IViewport {
   private projectionMatrix: mat4 = mat4.create();
   private viewMatrix: mat4 = mat4.create();
   private viewProjectionMatrix: mat4 = mat4.create();
+  private ViewProjectionMatrixUncentered: mat4 = mat4.create();
   private viewUncenteredMatrix: mat4 = mat4.create();
   private zoom: number;
   private center: number[];
@@ -60,6 +61,11 @@ export default class Viewport implements IViewport {
       this.projectionMatrix,
       this.viewMatrix,
     );
+    mat4.multiply(
+      this.ViewProjectionMatrixUncentered,
+      this.projectionMatrix,
+      this.viewMatrix,
+    );
   }
 
   public getZoom(): number {
@@ -95,6 +101,11 @@ export default class Viewport implements IViewport {
     return this.viewProjectionMatrix;
   }
 
+  public getViewProjectionMatrixUncentered(): number[] {
+    // @ts-ignore
+    return this.ViewProjectionMatrixUncentered;
+  }
+
   public getFocalDistance() {
     return 1;
   }

packages/maps/src/mapbox/Viewport.ts

@@ -58,6 +58,10 @@ export default class Viewport implements IViewport {
     return this.viewport.viewProjectionMatrix;
   }
 
+  public getViewProjectionMatrixUncentered(): number[] {
+    // @ts-ignore
+    return this.viewport.viewProjectionMatrix;
+  }
   public getFocalDistance() {
     return 1;
   }

stories/Layers/Layers.stories.tsx

@@ -9,6 +9,7 @@ import DashLineDemo from './components/dash';
 import DataUpdate from './components/data_update';
 import HeatMapDemo from './components/HeatMap';
 import HeatMapDemo3D from './components/heatmap3d';
+import HeatMap3D_2 from './components/heatmap2';
 import HexagonLayerDemo from './components/hexagon';
 import LightDemo from './components/light';
 import LineLayer from './components/Line';
@@ -42,6 +43,7 @@ storiesOf('图层', module)
   .add('2D弧线', () => <Arc2DLineDemo />)
   .add('热力图', () => <HeatMapDemo />)
   .add('热力图3D', () => <HeatMapDemo3D />)
+  .add('热力图2', () => <HeatMap3D_2 />)
   .add('网格热力图', () => <HexagonLayerDemo />)
   .add('栅格', () => <RasterLayerDemo />)
   .add('图片', () => <ImageLayerDemo />)

stories/Layers/components/HeatMap.tsx

@@ -1,5 +1,5 @@
 import { HeatmapLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 // @ts-ignore
 import * as React from 'react';
 
@@ -21,7 +21,7 @@ export default class HeatMapLayerDemo extends React.Component {
         center: [121.268, 30.3628],
         pitch: 0,
         style: 'dark',
-        zoom: 2,
+        zoom: 12,
       }),
     });
     const data = await response.json();
@@ -48,8 +48,8 @@ export default class HeatMapLayerDemo extends React.Component {
         },
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
-      console.log('scene loaded');
+    scene.on('zoom', () => {
+      console.log(scene.getZoom());
     });
     this.scene = scene;
   }

stories/Layers/components/heatmap2.tsx

@@ -14,9 +14,9 @@ export default class HeatMapLayerDemo extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         style: 'dark',
-        pitch: 58.5,
+        pitch: 8.5,
         center: [116.49434030056, 39.868073421167621],
         zoom: 13,
       }),

stories/React/components/world_ncov_bubble.tsx

@@ -104,6 +104,9 @@ export default React.memo(function Map() {
       feature: args.feature,
     });
   }
+  function hidePopup(args: any): void {
+    setPopupInfo(undefined);
+  }
 
   return (
     <>
@@ -235,6 +238,7 @@ export default React.memo(function Map() {
             }}
           >
             <LayerEvent type="mousemove" handler={showPopup} />
+            <LayerEvent type="mouseout" handler={hidePopup} />
           </PointLayer>,
           <PointLayer
             key={'5'}