diff --git a/packages/layers/src/heatmap/index.ts b/packages/layers/src/heatmap/index.ts index 13212b8380..801d0af946 100644 --- a/packages/layers/src/heatmap/index.ts +++ b/packages/layers/src/heatmap/index.ts @@ -15,11 +15,6 @@ export default class HeatMapLayer extends BaseLayer { public renderModels() { const shape = this.getModelType(); if (shape === 'heatmap') { - // if (this.layerModelNeedUpdate) { - // this.layerModel.buildModels(); - // this.buildModels(); - // this.layerModelNeedUpdate = false; - // } if (this.layerModel) { this.layerModel.render(); // 独立的渲染流程 } diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts index fd91bc49d7..5ce26d38a1 100644 --- a/packages/layers/src/heatmap/models/heatmap.ts +++ b/packages/layers/src/heatmap/models/heatmap.ts @@ -82,13 +82,14 @@ export default class HeatMapModel extends BaseModel { // 初始化密度图纹理 this.heatmapFramerBuffer = createFramebuffer({ color: createTexture2D({ - width, - height, + width: Math.floor(width / 4), + height: Math.floor(height / 4), wrapS: gl.CLAMP_TO_EDGE, wrapT: gl.CLAMP_TO_EDGE, min: gl.LINEAR, mag: gl.LINEAR, }), + depth: false, }); // 初始化颜色纹理 @@ -99,9 +100,9 @@ export default class HeatMapModel extends BaseModel { height: imageData.height, wrapS: gl.CLAMP_TO_EDGE, wrapT: gl.CLAMP_TO_EDGE, - min: gl.LINEAR, - mag: gl.LINEAR, - flipY: true, + min: gl.NEAREST, + mag: gl.NEAREST, + flipY: false, }); return [this.intensityModel, this.colorModel]; @@ -149,7 +150,7 @@ export default class HeatMapModel extends BaseModel { vertex: number[], attributeIdx: number, ) => { - const { size = 2 } = feature; + const { size = 1 } = feature; return [size as number]; }, }, @@ -168,9 +169,9 @@ export default class HeatMapModel extends BaseModel { enable: true, func: { srcRGB: gl.ONE, - srcAlpha: gl.ONE_MINUS_SRC_ALPHA, + srcAlpha: 1, dstRGB: gl.ONE, - dstAlpha: gl.ONE_MINUS_SRC_ALPHA, + dstAlpha: 1, }, }, }); @@ -216,15 +217,7 @@ export default class HeatMapModel extends BaseModel { depth: { enable: false, }, - blend: { - enable: true, - func: { - srcRGB: gl.SRC_ALPHA, - srcAlpha: 1, - dstRGB: gl.ONE_MINUS_SRC_ALPHA, - dstAlpha: 1, - }, - }, + blend: this.getBlend(), count: 6, elements: createElements({ data: [0, 2, 1, 2, 3, 1], diff --git a/packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl b/packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl index 48b48907ea..4b209ad4f2 100644 --- a/packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl +++ b/packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl @@ -7,11 +7,7 @@ varying float v_intensity; void main(){ float intensity = texture2D(u_texture, v_texCoord).r; - vec2 ramp_pos = vec2( - fract(16.0 * (1.0 - v_intensity)), - floor(16.0 * (1.0 - v_intensity)) / 16.0); - // vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity)); - vec4 color = texture2D(u_colorTexture,ramp_pos); + vec4 color = texture2D(u_colorTexture,vec2(intensity, 0)); gl_FragColor = color; gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity; } diff --git a/packages/layers/src/heatmap/shaders/heatmap_frag.glsl b/packages/layers/src/heatmap/shaders/heatmap_frag.glsl index a20d904c3b..2d77301318 100644 --- a/packages/layers/src/heatmap/shaders/heatmap_frag.glsl +++ b/packages/layers/src/heatmap/shaders/heatmap_frag.glsl @@ -6,12 +6,8 @@ varying float v_intensity; void main(){ float intensity = texture2D(u_texture, v_texCoord).r; - vec2 ramp_pos = vec2( - fract(16.0 * (1.0 - intensity)), - floor(16.0 * (1.0 - intensity)) / 16.0); - // vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity)); - vec4 color = texture2D(u_colorTexture,ramp_pos); - gl_FragColor = color; - gl_FragColor.a = color.a * smoothstep(0.,0.05,intensity) * u_opacity; + vec4 color = texture2D(u_colorTexture,vec2(intensity, 0)); + gl_FragColor =color; + gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity; } diff --git a/packages/layers/src/heatmap/shaders/heatmap_framebuffer_frag.glsl b/packages/layers/src/heatmap/shaders/heatmap_framebuffer_frag.glsl index 1e234110e7..0870ce478e 100644 --- a/packages/layers/src/heatmap/shaders/heatmap_framebuffer_frag.glsl +++ b/packages/layers/src/heatmap/shaders/heatmap_framebuffer_frag.glsl @@ -2,11 +2,9 @@ precision highp float; uniform float u_intensity; varying float v_weight; varying vec2 v_extrude; - - +#define GAUSS_COEF 0.3989422804014327 void main(){ - float GAUSS_COEF = 0.3989422804014327; float d = -0.5 * 3.0 * 3.0 * dot(v_extrude, v_extrude); float val = v_weight * u_intensity * GAUSS_COEF * exp(d); - gl_FragColor = vec4(val, val, val, val); + gl_FragColor = vec4(val, 1., 1., 1.); } diff --git a/packages/layers/src/heatmap/shaders/heatmap_framebuffer_vert.glsl b/packages/layers/src/heatmap/shaders/heatmap_framebuffer_vert.glsl index ad8a2507e6..db22492a5e 100644 --- a/packages/layers/src/heatmap/shaders/heatmap_framebuffer_vert.glsl +++ b/packages/layers/src/heatmap/shaders/heatmap_framebuffer_vert.glsl @@ -8,11 +8,12 @@ varying vec2 v_extrude; varying float v_weight; uniform mat4 u_ModelMatrix; +#define GAUSS_COEF 0.3989422804014327 + #pragma include "projection" void main(){ v_weight = a_Size; - float GAUSS_COEF = 0.3989422804014327; float ZERO = 1.0 / 255.0 / 16.0; float extrude_x = a_Dir.x * 2.0 -1.0; float extrude_y = a_Dir.y * 2.0 -1.0; diff --git a/packages/layers/src/heatmap/shaders/heatmap_vert.glsl b/packages/layers/src/heatmap/shaders/heatmap_vert.glsl index cfa03fe386..fdc8a697e0 100644 --- a/packages/layers/src/heatmap/shaders/heatmap_vert.glsl +++ b/packages/layers/src/heatmap/shaders/heatmap_vert.glsl @@ -5,7 +5,7 @@ uniform sampler2D u_texture; varying vec2 v_texCoord; varying float v_intensity; void main() { - v_texCoord = a_Uv; + v_texCoord = a_Uv; v_intensity = texture2D(u_texture, v_texCoord).r; - gl_Position = vec4(a_Position.xy, 0, 1.); + gl_Position = vec4(a_Position.xy, 0, 1.); } diff --git a/packages/layers/src/point/shaders/image_frag.glsl b/packages/layers/src/point/shaders/image_frag.glsl index b184ac65f0..847f3f22ad 100644 --- a/packages/layers/src/point/shaders/image_frag.glsl +++ b/packages/layers/src/point/shaders/image_frag.glsl @@ -20,7 +20,7 @@ float r = 1.0 - smoothstep(radius-(radius*0.01), radius+(radius*0.01), distanceSqrd); vec4 textureColor=texture2D(u_texture,pos); - if(v_color == vec4(0.)){ + if(v_color == vec4(1.0)){ gl_FragColor= vec4(textureColor.xyz, textureColor.w); }else { gl_FragColor= step(0.01, textureColor.z) * v_color; diff --git a/packages/layers/src/raster/models/raster.ts b/packages/layers/src/raster/models/raster.ts index 33bdc7bbdb..255e46291d 100644 --- a/packages/layers/src/raster/models/raster.ts +++ b/packages/layers/src/raster/models/raster.ts @@ -70,7 +70,7 @@ export default class RasterModel extends BaseModel { data: imageData.data, width: imageData.width, height: imageData.height, - flipY: true, + flipY: false, }); return [ this.layer.buildLayerModel({ @@ -121,7 +121,7 @@ export default class RasterModel extends BaseModel { data: imageData.data, width: imageData.width, height: imageData.height, - flipY: true, + flipY: false, }); } } diff --git a/packages/layers/src/raster/raster.ts b/packages/layers/src/raster/raster.ts index 6d2fb75c92..05216ba8c4 100644 --- a/packages/layers/src/raster/raster.ts +++ b/packages/layers/src/raster/raster.ts @@ -53,7 +53,7 @@ export default class RasterLayer extends BaseLayer { data: imageData.data, width: imageData.width, height: imageData.height, - flipY: true, + flipY: false, }); this.models = [this.buildRasterModel()]; } diff --git a/packages/layers/src/raster/raster2d.ts b/packages/layers/src/raster/raster2d.ts index bb2074c54f..f563bb0fc1 100644 --- a/packages/layers/src/raster/raster2d.ts +++ b/packages/layers/src/raster/raster2d.ts @@ -35,7 +35,7 @@ export default class Raster2dLayer extends BaseLayer { data: imageData.data, width: imageData.width, height: imageData.height, - flipY: true, + flipY: false, }); this.models = [ this.buildLayerModel({ diff --git a/packages/layers/src/raster/shaders/raster_2d_frag.glsl b/packages/layers/src/raster/shaders/raster_2d_frag.glsl index 7819b12ed9..a8306ba2a1 100644 --- a/packages/layers/src/raster/shaders/raster_2d_frag.glsl +++ b/packages/layers/src/raster/shaders/raster_2d_frag.glsl @@ -19,10 +19,9 @@ void main() { gl_FragColor = vec4(0, 0, 0, 0); else { float normalisedValue =(value - u_domain[0]) / (u_domain[1] -u_domain[0]); - vec2 ramp_pos = vec2( - fract(16.0 * (1.0 - normalisedValue)), - floor(16.0 * (1.0 - normalisedValue)) / 16.0); - gl_FragColor = texture2D(u_colorTexture, ramp_pos); + vec4 color = texture2D(u_colorTexture,vec2(normalisedValue, 0)); + gl_FragColor = color; + gl_FragColor.a = gl_FragColor.a * u_opacity ; } diff --git a/packages/layers/src/raster/shaders/raster_vert.glsl b/packages/layers/src/raster/shaders/raster_vert.glsl index 7ada3b09ce..c8761d482f 100644 --- a/packages/layers/src/raster/shaders/raster_vert.glsl +++ b/packages/layers/src/raster/shaders/raster_vert.glsl @@ -24,10 +24,7 @@ void main() { // v_texCoord = a_Uv; value = clamp(value,u_min,u_max); float value1 = (value - u_min) / (u_max -u_min); - vec2 ramp_pos = vec2( - fract(16.0 * (1.0 - value1)), - floor(16.0 * (1.0 - value1)) / 16.0); - v_color = texture2D(u_colorTexture,ramp_pos); + vec4 color = texture2D(u_colorTexture,vec2(intensity, 0)); // if(uv.x > 1.0 || uv.y > 1.0) { // v_color = vec4(0.); diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts index e0c0082391..072a860076 100644 --- a/packages/utils/src/color.ts +++ b/packages/utils/src/color.ts @@ -37,7 +37,7 @@ export function generateColorRamp(colorRamp: IColorRamp): ImageData { const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; canvas.width = 256; canvas.height = 1; - const gradient = ctx.createLinearGradient(0, 0, 256, 0); + const gradient = ctx.createLinearGradient(0, 0, 256, 1); let data = null; const min = colorRamp.positions[0]; const max = colorRamp.positions[colorRamp.positions.length - 1]; @@ -49,5 +49,5 @@ export function generateColorRamp(colorRamp: IColorRamp): ImageData { ctx.fillRect(0, 0, 256, 1); data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data); - return new ImageData(data, 16, 16); + return new ImageData(data, 256, 1); } diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx index 71b9eb5aa1..9053691c5e 100644 --- a/stories/Layers/Layers.stories.tsx +++ b/stories/Layers/Layers.stories.tsx @@ -8,6 +8,7 @@ import Column from './components/column'; import DashLineDemo from './components/dash'; import DataUpdate from './components/data_update'; import HeatMapDemo from './components/HeatMap'; +import HeatMapDemo3D from './components/heatmap3d'; import HexagonLayerDemo from './components/hexagon'; import LightDemo from './components/light'; import LineLayer from './components/Line'; @@ -39,6 +40,7 @@ storiesOf('图层', module) .add('3D弧线', () => ) .add('2D弧线', () => ) .add('热力图', () => ) + .add('热力图3D', () => ) .add('网格热力图', () => ) .add('栅格', () => ) .add('图片', () => ) diff --git a/stories/Layers/components/HeatMap.tsx b/stories/Layers/components/HeatMap.tsx index 157414e47d..6aefb3365e 100644 --- a/stories/Layers/components/HeatMap.tsx +++ b/stories/Layers/components/HeatMap.tsx @@ -37,13 +37,13 @@ export default class HeatMapLayerDemo extends React.Component { opacity: 1.0, rampColors: { colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), + 'rgba(33,102,172,0)', + 'rgb(103,169,207)', + 'rgb(209,229,240)', + 'rgb(253,219,199)', + 'rgb(239,138,98)', + 'rgb(178,24,43)', + ], positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], }, }); diff --git a/stories/Layers/components/heatmap3d.tsx b/stories/Layers/components/heatmap3d.tsx index fa7699f534..5427891932 100644 --- a/stories/Layers/components/heatmap3d.tsx +++ b/stories/Layers/components/heatmap3d.tsx @@ -18,39 +18,44 @@ export default class HeatMapLayerDemo extends React.Component { const scene = new Scene({ id: 'map', map: new Mapbox({ - center: [121.268, 30.3628], - pitch: 0, style: 'dark', - zoom: 2, + pitch: 58.5, + center: [111.8759, 30.6942], + rotation: 0.519, + zoom: 3.6116, }), }); - const data = await response.json(); - - const layer = new HeatmapLayer(); - layer - .source(data) - .shape('heatmap3D') - .size('mag', [0, 1.0]) // weight映射通道 - .style({ - intensity: 2, - radius: 20, - opacity: 1.0, - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - scene.addLayer(layer); scene.on('loaded', () => { - console.log('scene loaded'); + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json', + ) + .then((res) => res.json()) + .then((data) => { + const layer = new HeatmapLayer({}) + .source(data) + .size('capacity', [0, 1]) + .shape('heatmap3D') + // weight映射通道 + .style({ + intensity: 10, + radius: 5, + opacity: 1.0, + rampColors: { + colors: [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ], + positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + } + }); + scene.addLayer(layer); + }); }); + this.scene = scene; }