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() { }} > + ,