fix: 修复颜色纹理取色问题 & 图片标注默认颜色问题

packages/layers/src/heatmap/index.ts

@@ -15,11 +15,6 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
   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(); // 独立的渲染流程
       }

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

@@ -82,13 +82,14 @@ export default class HeatMapModel extends BaseModel {
     // 初始化密度图纹理
     this.heatmapFramerBuffer = createFramebuffer({
       color: createTexture2D({
-        width,
+        width: Math.floor(width / 4),
-        height,
+        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,
+      min: gl.NEAREST,
-      mag: gl.LINEAR,
+      mag: gl.NEAREST,
-      flipY: true,
+      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: {
+      blend: this.getBlend(),
-        enable: true,
-        func: {
-          srcRGB: gl.SRC_ALPHA,
-          srcAlpha: 1,
-          dstRGB: gl.ONE_MINUS_SRC_ALPHA,
-          dstAlpha: 1,
-        },
-      },
       count: 6,
       elements: createElements({
         data: [0, 2, 1, 2, 3, 1],

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(
+    vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
-        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);
     gl_FragColor = color;
     gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
 }

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(
+    vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
-        fract(16.0 * (1.0 - intensity)),
+    gl_FragColor =color;
-        floor(16.0 * (1.0 - intensity)) / 16.0);
+    gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;
-    // 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;
 
 }

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.);
 }

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;

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.);
 }

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;

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,
     });
   }
 }

packages/layers/src/raster/raster.ts

@@ -53,7 +53,7 @@ export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
       data: imageData.data,
       width: imageData.width,
       height: imageData.height,
-      flipY: true,
+      flipY: false,
     });
     this.models = [this.buildRasterModel()];
   }

packages/layers/src/raster/raster2d.ts

@@ -35,7 +35,7 @@ export default class Raster2dLayer extends BaseLayer<IRasterLayerStyleOptions> {
       data: imageData.data,
       width: imageData.width,
       height: imageData.height,
-      flipY: true,
+      flipY: false,
     });
     this.models = [
       this.buildLayerModel({

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(
+    vec4 color = texture2D(u_colorTexture,vec2(normalisedValue, 0));
-        fract(16.0 * (1.0 - normalisedValue)),
+    gl_FragColor = color;
-        floor(16.0 * (1.0 - normalisedValue)) / 16.0);
+    gl_FragColor.a =  gl_FragColor.a * u_opacity ;
-    gl_FragColor = texture2D(u_colorTexture, ramp_pos);
   }
 
 

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(
+  vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
-        fract(16.0 * (1.0 - value1)),
-        floor(16.0 * (1.0 - value1)) / 16.0);
-  v_color = texture2D(u_colorTexture,ramp_pos);
 
   // if(uv.x > 1.0 || uv.y > 1.0) {
   //   v_color = vec4(0.);

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);
 }

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弧线', () => <ArcLineDemo />)
   .add('2D弧线', () => <Arc2DLineDemo />)
   .add('热力图', () => <HeatMapDemo />)
+  .add('热力图3D', () => <HeatMapDemo3D />)
   .add('网格热力图', () => <HexagonLayerDemo />)
   .add('栅格', () => <RasterLayerDemo />)
   .add('图片', () => <ImageLayerDemo />)

stories/Layers/components/HeatMap.tsx

@@ -37,13 +37,13 @@ export default class HeatMapLayerDemo extends React.Component {
         opacity: 1.0,
         rampColors: {
           colors: [
-            '#FF4818',
+            'rgba(33,102,172,0)',
-            '#F7B74A',
+            'rgb(103,169,207)',
-            '#FFF598',
+            'rgb(209,229,240)',
-            '#91EABC',
+            'rgb(253,219,199)',
-            '#2EA9A1',
+            'rgb(239,138,98)',
-            '#206C7C',
+            'rgb(178,24,43)',
-          ].reverse(),
+          ],
           positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
         },
       });

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;
   }