feat: polygon fill/point wave support raisingHeight、polygon add topsu…

…rface/sidesurface (#1074)

* chore: update version 2.8.30 -> 2.8.31

* feat: polygon fill 支持配置 raisingHeight

* feat: polygon extrude 支持配置 side/top 的显隐

* feat: pointLayer fill/wave support raisingHeight

* style: lint style

* docs: update demo

* feat: update demo

packages/layers/src/core/interface.ts

@@ -96,6 +96,9 @@ export interface IPolygonLayerStyleOptions {
     dir: string;
   };
 
+  topsurface?: boolean;
+  sidesurface?: boolean;
+
   mapTexture?: string; // 挤出几何体顶面贴图
   raisingHeight?: number; // 挤出几何体抬升高度
   sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)

packages/layers/src/point/models/fill.ts

@@ -38,6 +38,7 @@ export default class FillModel extends BaseModel {
       offsets = [0, 0],
       blend,
       blur = 0,
+      raisingHeight = 0,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
     if (
@@ -87,6 +88,8 @@ export default class FillModel extends BaseModel {
             });
     }
     return {
+      u_raisingHeight: Number(raisingHeight),
+
       u_isMeter: Number(this.isMeter),
       u_blur: blur,
 

packages/layers/src/point/shaders/fill_vert.glsl

@@ -22,6 +22,7 @@ uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
 uniform vec2 u_offsets;
 
 uniform float u_blur : 0.0;
+uniform float u_raisingHeight: 0.0;
 
 #pragma include "styleMapping"
 #pragma include "styleMappingCalOpacity"
@@ -153,10 +154,16 @@ void main() {
   vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
 
+  float raiseHeight = u_raisingHeight;
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
+    raiseHeight = u_raisingHeight * mapboxZoomScale;
+  }
+
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    gl_Position = u_Mvp * vec4(project_pos.xy + offset, 0.0, 1.0);
+    gl_Position = u_Mvp * vec4(project_pos.xy + offset, raiseHeight, 1.0);
   } else {
-    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, u_raisingHeight, 1.0));
   }
 
   if(u_globel > 0.0) {

packages/layers/src/polygon/models/extrude.ts

@@ -28,6 +28,8 @@ export default class ExtrudeModel extends BaseModel {
       opacity = 1,
       heightfixed = false,
       raisingHeight = 0,
+      topsurface = true,
+      sidesurface = true,
       sourceColor,
       targetColor,
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
@@ -73,6 +75,10 @@ export default class ExtrudeModel extends BaseModel {
     }
 
     return {
+      // 控制侧面和顶面的显示隐藏
+      u_topsurface: Number(topsurface),
+      u_sidesurface: Number(sidesurface),
+
       u_heightfixed: Number(heightfixed),
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),

packages/layers/src/polygon/models/fill.ts

@@ -14,6 +14,7 @@ import polygon_vert from '../shaders/polygon_vert.glsl';
 export default class FillModel extends BaseModel {
   public getUninforms() {
     const {
+      raisingHeight = 0,
       opacity = 1,
       opacityLinear = {
         enable: false,
@@ -53,6 +54,9 @@ export default class FillModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
       // u_opacity: opacity,
+
+      u_raisingHeight: Number(raisingHeight),
+
       u_opacity: isNumber(opacity) ? opacity : 1.0,
 
       u_opacitylinear: Number(opacityLinear.enable),

packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl

@@ -2,6 +2,10 @@ uniform float u_opacity: 1.0;
 uniform vec4 u_sourceColor;
 uniform vec4 u_targetColor;
 uniform float u_linearColor: 0;
+
+uniform float u_topsurface: 1.0;
+uniform float u_sidesurface: 1.0;
+
 varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
@@ -12,11 +16,26 @@ void main() {
   float sidey = styleMappingMat[3][0];
   float lightWeight = styleMappingMat[3][1];
 
-  if(isSide < 1.0 && u_linearColor == 1.0) {
-    vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
-    linearColor.rgb *= lightWeight;
-    gl_FragColor = linearColor;
+  if(isSide < 1.0) {
+    // side face
+    if(u_sidesurface < 1.0) {
+      discard;
+    }
+
+    if(u_linearColor == 1.0) {
+      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
+      linearColor.rgb *= lightWeight;
+      gl_FragColor = linearColor;
+    } else {
+      gl_FragColor = v_Color;
+    }
+
   } else {
+     // top face
+    if(u_topsurface < 1.0) {
+      discard;
+    }
+
     gl_FragColor = v_Color;
   }
 

packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl

@@ -2,6 +2,10 @@ uniform float u_opacity: 1.0;
 uniform vec4 u_sourceColor;
 uniform vec4 u_targetColor;
 uniform float u_linearColor: 0;
+
+uniform float u_topsurface: 1.0;
+uniform float u_sidesurface: 1.0;
+
 varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
@@ -12,11 +16,26 @@ void main() {
   float sidey = styleMappingMat[3][0];
   float lightWeight = styleMappingMat[3][1];
 
-  if(isSide < 1.0 && u_linearColor == 1.0) {
-    vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
-    linearColor.rgb *= lightWeight;
-    gl_FragColor = linearColor;
+  if(isSide < 1.0) {
+    // side face
+    if(u_sidesurface < 1.0) {
+      discard;
+    }
+
+    if( u_linearColor == 1.0) {
+      // side use linear
+      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
+      linearColor.rgb *= lightWeight;
+      gl_FragColor = linearColor;
+    } else {
+      // side notuse linear
+       gl_FragColor = v_Color;
+    }
   } else {
+    // top face
+    if(u_topsurface < 1.0) {
+      discard;
+    }
     gl_FragColor = v_Color;
   }
 

packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl

@@ -54,6 +54,13 @@ void main() {
   textureOffset = opacityAndOffset.g;
   // cal style mapping - 数据纹理映射部分的计算
 
+  if(styleMappingMat[0][3] < 1.0 ) {
+    // side
+    styleMappingMat[0][0] = 0.0;
+  } else {
+
+  }
+
   vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
   vec4 project_pos = project_position(pos);
 

packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl

@@ -2,7 +2,12 @@ uniform sampler2D u_texture;
 uniform float u_opacity: 1.0;
 uniform vec4 u_sourceColor;
 uniform vec4 u_targetColor;
-// varying vec4 v_Color;
+uniform float u_linearColor: 0;
+
+uniform float u_topsurface: 1.0;
+uniform float u_sidesurface: 1.0;
+
+varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
 
@@ -15,9 +20,25 @@ void main() {
 
   float sidey = styleMappingMat[3][0];
   if(isSide < 1.0) {
-    gl_FragColor = mix(u_targetColor, u_sourceColor, sidey);
-    gl_FragColor.rgb *= lightWeight;
+    // side face
+    if(u_sidesurface < 1.0) {
+      discard;
+    }
+
+    if(u_linearColor == 1.0) {
+      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
+      linearColor.rgb *= lightWeight;
+      gl_FragColor = linearColor;
+    } else {
+      gl_FragColor = v_Color;
+    }
   } else {
+
+     // top face
+    if(u_topsurface < 1.0) {
+      discard;
+    }
+
     gl_FragColor = texture2D(u_texture, vec2(topU, topV));
   }
 

packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl

@@ -4,14 +4,15 @@ precision highp float;
 #define diffuseRatio 0.3
 #define specularRatio 0.2
 
+attribute vec4 a_Color;
 attribute vec3 a_Position;
 attribute vec3 a_Normal;
 attribute float a_Size;
 attribute vec3 a_uvs;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
-// varying vec4 v_Color;
+varying vec4 v_Color;
 uniform float u_heightfixed: 0.0; // 默认不固定
 uniform float u_raisingHeight: 0.0;
 uniform float u_opacity: 1.0;
@@ -25,6 +26,8 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
 #pragma include "picking"
 
 void main() {
+  v_Color = a_Color;
+
   // cal style mapping - 数据纹理映射部分的计算
   styleMappingMat = mat4(
     0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - a_Position.z(judge side by a_Position.z)

packages/layers/src/polygon/shaders/polygon_linear_vert.glsl

@@ -1,13 +1,12 @@
 attribute vec4 a_Color;
 attribute vec3 a_Position;
 
-
-
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
+uniform float u_opacity: 1.0;
+uniform float u_raisingHeight: 0.0;
 
 varying vec4 v_Color;
-uniform float u_opacity: 1.0;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
 #pragma include "styleMapping"
@@ -57,6 +56,13 @@ styleMappingMat = mat4(
   v_Color = a_Color;
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  project_pos.z += u_raisingHeight;
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
+    project_pos.z *= mapboxZoomScale;
+    project_pos.z += u_raisingHeight * mapboxZoomScale;
+  }
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));

packages/layers/src/polygon/shaders/polygon_vert.glsl

@@ -1,10 +1,13 @@
 attribute vec4 a_Color;
 attribute vec3 a_Position;
+
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
-varying vec4 v_Color;
 uniform float u_opacity: 1.0;
+uniform float u_raisingHeight: 0.0;
+
+varying vec4 v_Color;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
 #pragma include "styleMapping"
@@ -44,6 +47,14 @@ styleMappingMat = mat4(
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
+  project_pos.z += u_raisingHeight;
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
+    project_pos.z *= mapboxZoomScale;
+    project_pos.z += u_raisingHeight * mapboxZoomScale;
+  }
+
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
   } else {