diff --git a/packages/core/src/services/camera/CameraService.ts b/packages/core/src/services/camera/CameraService.ts
index 6c9febcb34..7b885e060e 100644
--- a/packages/core/src/services/camera/CameraService.ts
+++ b/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 ||
diff --git a/packages/core/src/services/camera/ICameraService.ts b/packages/core/src/services/camera/ICameraService.ts
index fab7a35f30..e8463acb6d 100644
--- a/packages/core/src/services/camera/ICameraService.ts
+++ b/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;
diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts
index dd4986bf3e..de989581db 100644
--- a/packages/layers/src/heatmap/models/heatmap.ts
+++ b/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],
},
});
diff --git a/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl b/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl
index d88a2411c1..694c4aed7d 100644
--- a/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl
+++ b/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);
}
diff --git a/packages/maps/src/amap/Viewport.ts b/packages/maps/src/amap/Viewport.ts
index 4a68f96c6d..17bf0b0535 100644
--- a/packages/maps/src/amap/Viewport.ts
+++ b/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;
}
diff --git a/packages/maps/src/mapbox/Viewport.ts b/packages/maps/src/mapbox/Viewport.ts
index a1e0a606b6..92796ce173 100644
--- a/packages/maps/src/mapbox/Viewport.ts
+++ b/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;
}
diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx
index 8b6f30a465..2a73151354 100644
--- a/stories/Layers/Layers.stories.tsx
+++ b/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弧线', () => )
.add('热力图', () => )
.add('热力图3D', () => )
+ .add('热力图2', () => )
.add('网格热力图', () => )
.add('栅格', () => )
.add('图片', () => )
diff --git a/stories/Layers/components/HeatMap.tsx b/stories/Layers/components/HeatMap.tsx
index ea9c0c59ae..ae1ebba4c4 100644
--- a/stories/Layers/components/HeatMap.tsx
+++ b/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;
}
diff --git a/stories/Layers/components/heatmap2.tsx b/stories/Layers/components/heatmap2.tsx
index 2c5995df49..03a92b9e45 100644
--- a/stories/Layers/components/heatmap2.tsx
+++ b/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,
}),
diff --git a/stories/React/components/world_ncov_bubble.tsx b/stories/React/components/world_ncov_bubble.tsx
index 1d2d881e58..647854dd7e 100644
--- a/stories/React/components/world_ncov_bubble.tsx
+++ b/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() {
}}
>
+
,