Polygonside (#1069)

* feat: polygon extrude mode support set linear color

* style: lint style

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

@@ -63,11 +63,13 @@ export default class ExtrudeModel extends BaseModel {
     }
 
     // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
     let sourceColorArr = [1, 1, 1, 1];
     let targetColorArr = [1, 1, 1, 1];
     if (sourceColor && targetColor) {
       sourceColorArr = rgb2arr(sourceColor);
       targetColorArr = rgb2arr(targetColor);
+      useLinearColor = 1;
     }
 
     return {
@@ -76,6 +78,9 @@ export default class ExtrudeModel extends BaseModel {
       u_cellTypeLayout: this.getCellTypeLayout(),
       u_raisingHeight: Number(raisingHeight),
       u_opacity: isNumber(opacity) ? opacity : 1.0,
+
+      // 渐变色支持参数
+      u_linearColor: useLinearColor,
       u_sourceColor: sourceColorArr,
       u_targetColor: targetColorArr,
       u_texture: this.texture,
@@ -143,11 +148,6 @@ export default class ExtrudeModel extends BaseModel {
   }
 
   protected registerBuiltinAttributes() {
-    const {
-      mapTexture,
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-
-    if (mapTexture) {
     const bbox = this.layer.getSource().extent;
     const [minLng, minLat, maxLng, maxLat] = bbox;
     const lngLen = maxLng - minLng;
@@ -174,15 +174,10 @@ export default class ExtrudeModel extends BaseModel {
         ) => {
           const lng = vertex[0];
           const lat = vertex[1];
-            return [
-              (lng - minLng) / lngLen,
-              (lat - minLat) / latLen,
-              vertex[4],
-            ];
+          return [(lng - minLng) / lngLen, (lat - minLat) / latLen, vertex[4]];
         },
       },
     });
-    }
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'normal',

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

@@ -1,12 +1,25 @@
 uniform float u_opacity: 1.0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+uniform float u_linearColor: 0;
 varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
 
 void main() {
   float opacity = styleMappingMat[0][0];  
+  float isSide = styleMappingMat[0][3];
+  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;
+  } else {
     gl_FragColor = v_Color;
-  // gl_FragColor.a *= u_opacity;
+  }
+
   gl_FragColor.a *= opacity;
   gl_FragColor = filterColor(gl_FragColor);
 }

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

@@ -1,13 +1,25 @@
 uniform float u_opacity: 1.0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+uniform float u_linearColor: 0;
 varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
-varying float v_lightWeight;
 
 void main() {
   float opacity = styleMappingMat[0][0];
+  float isSide = styleMappingMat[0][3];
+  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;
+  } else {
     gl_FragColor = v_Color;
-  // gl_FragColor.a *= u_opacity;
+  }
+
   gl_FragColor.a *= opacity;
-  gl_FragColor = filterColorAlpha(gl_FragColor, v_lightWeight);
+  gl_FragColor = filterColorAlpha(gl_FragColor, lightWeight);
 }

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

@@ -8,6 +8,7 @@ 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;
 
@@ -24,16 +25,16 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
 #pragma include "light"
 #pragma include "picking"
 
-varying float v_lightWeight;
-
 void main() {
   // cal style mapping - 数据纹理映射部分的计算
   styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
+    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - isSide
     0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
     0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0
+    0.0, 0.0, 0.0, 0.0  // sidey
   );
+  styleMappingMat[0][3] = a_Position.z;
+  styleMappingMat[3][0] = a_uvs[2];
 
   float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
   float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
@@ -75,9 +76,10 @@ void main() {
   }
 
   float lightWeight = calc_lighting(pos);
-  v_lightWeight = lightWeight;
   // v_Color = a_Color;
   v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
 
+  styleMappingMat[3][1] = lightWeight;
+
   setPickingColor(a_PickingColor);
 }

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

@@ -8,6 +8,7 @@ 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;
 
@@ -27,11 +28,13 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
 void main() {
   // cal style mapping - 数据纹理映射部分的计算
   styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
+    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - isSide
     0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
     0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0
+    0.0, 0.0, 0.0, 0.0  // sidey
   );
+  styleMappingMat[0][3] = a_Position.z;
+  styleMappingMat[3][0] = a_uvs[2];
 
   float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
   float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
@@ -81,5 +84,7 @@ void main() {
   // v_Color = a_Color;
   v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
 
+  styleMappingMat[3][1] = lightWeight;
+
   setPickingColor(a_PickingColor);
 }

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

@@ -9,19 +9,18 @@ varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 void main() {
   float opacity = styleMappingMat[0][0];
   float isSide = styleMappingMat[0][3];
-  
+  float lightWeight = styleMappingMat[3][1];
   float topU = styleMappingMat[2][2];
   float topV = styleMappingMat[2][3];
 
   float sidey = styleMappingMat[3][0];
   if(isSide < 1.0) {
     gl_FragColor = mix(u_targetColor, u_sourceColor, sidey);
+    gl_FragColor.rgb *= lightWeight;
   } else {
     gl_FragColor = texture2D(u_texture, vec2(topU, topV));
   }
   
-  // gl_FragColor = v_Color;
-  
 
   gl_FragColor.a *= opacity;
   gl_FragColor = filterColor(gl_FragColor);

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

@@ -4,7 +4,6 @@ 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;
@@ -84,9 +83,8 @@ void main() {
     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
   }
 
-  // float lightWeight = calc_lighting(pos);
-  // v_Color = a_Color;
-  // v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
+  float lightWeight = calc_lighting(pos);
+  styleMappingMat[3][1] = lightWeight;
 
   setPickingColor(a_PickingColor);
 }

stories/Map/components/amap2demo_polygon_extrude.tsx

@@ -117,6 +117,7 @@ export default class Amap2demo_polygon_extrude extends React.Component {
     //   .active(true);
     // scene.addLayer(layer);
 
+    scene.on('loaded', () => {
       // @ts-ignore
       let lineDown, lineUp, textLayer;
 
@@ -204,7 +205,6 @@ export default class Amap2demo_polygon_extrude extends React.Component {
               raisingHeight: 200000,
               opacity: 0.8,
             });
-
           scene.addLayer(provincelayer);
 
           provincelayer.on('mousemove', () => {
@@ -243,6 +243,7 @@ export default class Amap2demo_polygon_extrude extends React.Component {
             });
           });
         });
+    });
   }
 
   public render() {

stories/Map/components/polygon_extrudeTex.tsx

@@ -32,15 +32,16 @@ export default class Amap2demo_polygon_extrude extends React.Component {
           .size(150000)
           .shape('extrude')
           .color('#0DCCFF')
-          // .active({
-          //   color: 'rgb(100,230,255)',
-          // })
+          .active({
+            color: 'rgb(255,255,255)',
+            mix: 0.5,
+          })
           .style({
             heightfixed: true,
             pickLight: true,
             raisingHeight: 200000,
-            mapTexture:
-              'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
+            // mapTexture:
+            //   'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
             // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
             // opacity: 0.8,
             sourceColor: '#f00',