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,46 +148,36 @@ export default class ExtrudeModel extends BaseModel {
   }
 
   protected registerBuiltinAttributes() {
-    const {
+    const bbox = this.layer.getSource().extent;
-      mapTexture,
+    const [minLng, minLat, maxLng, maxLat] = bbox;
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
+    const lngLen = maxLng - minLng;
+    const latLen = maxLat - minLat;
 
-    if (mapTexture) {
+    this.styleAttributeService.registerStyleAttribute({
-      const bbox = this.layer.getSource().extent;
+      name: 'uvs',
-      const [minLng, minLat, maxLng, maxLat] = bbox;
+      type: AttributeType.Attribute,
-      const lngLen = maxLng - minLng;
+      descriptor: {
-      const latLen = maxLat - minLat;
+        name: 'a_uvs',
-
+        buffer: {
-      this.styleAttributeService.registerStyleAttribute({
+          // give the WebGL driver a hint that this buffer may change
-        name: 'uvs',
+          usage: gl.STATIC_DRAW,
-        type: AttributeType.Attribute,
+          data: [],
-        descriptor: {
+          type: gl.FLOAT,
-          name: 'a_uvs',
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: gl.STATIC_DRAW,
-            data: [],
-            type: gl.FLOAT,
-          },
-          size: 3,
-          update: (
-            feature: IEncodeFeature,
-            featureIdx: number,
-            vertex: number[],
-            attributeIdx: number,
-            normal: number[],
-          ) => {
-            const lng = vertex[0];
-            const lat = vertex[1];
-            return [
-              (lng - minLng) / lngLen,
-              (lat - minLat) / latLen,
-              vertex[4],
-            ];
-          },
         },
-      });
+        size: 3,
-    }
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+          normal: number[],
+        ) => {
+          const lng = vertex[0];
+          const lat = vertex[1];
+          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 opacity = styleMappingMat[0][0];  
-  gl_FragColor = v_Color;
+  float isSide = styleMappingMat[0][3];
-  // gl_FragColor.a *= u_opacity;
+  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 *= 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];
-  gl_FragColor = v_Color;
+  float isSide = styleMappingMat[0][3];
-  // gl_FragColor.a *= u_opacity;
+  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 *= 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,18 +9,17 @@ 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;

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);
+  float lightWeight = calc_lighting(pos);
-  // v_Color = a_Color;
+  styleMappingMat[3][1] = lightWeight;
-  // v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
 
   setPickingColor(a_PickingColor);
 }

stories/Map/components/amap2demo_polygon_extrude.tsx

@@ -117,132 +117,133 @@ export default class Amap2demo_polygon_extrude extends React.Component {
     //   .active(true);
     // scene.addLayer(layer);
 
-    // @ts-ignore
+    scene.on('loaded', () => {
-    let lineDown, lineUp, textLayer;
+      // @ts-ignore
+      let lineDown, lineUp, textLayer;
 
-    fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
+      fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
-      .then((res) => res.json())
+        .then((res) => res.json())
-      .then((data) => {
+        .then((data) => {
-        let texts: any[] = [];
+          let texts: any[] = [];
 
-        data.features.map((option: any) => {
+          data.features.map((option: any) => {
-          const { name, center } = option.properties;
+            const { name, center } = option.properties;
-          const [lng, lat] = center;
+            const [lng, lat] = center;
-          texts.push({ name, lng, lat });
+            texts.push({ name, lng, lat });
+          });
+
+          textLayer = new PointLayer({ zIndex: 2 })
+            .source(texts, {
+              parser: {
+                type: 'json',
+                x: 'lng',
+                y: 'lat',
+              },
+            })
+            .shape('name', 'text')
+            .size(14)
+            .color('#0ff')
+            .style({
+              textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+              spacing: 2, // 字符间距
+              padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+              stroke: '#0ff', // 描边颜色
+              strokeWidth: 0.2, // 描边宽度
+              raisingHeight: 200000 + 150000 + 10000,
+              textAllowOverlap: true,
+            });
+          scene.addLayer(textLayer);
+
+          lineDown = new LineLayer()
+            .source(data)
+            .shape('line')
+            .color('#0DCCFF')
+            .size(1)
+            .style({
+              raisingHeight: 200000,
+            });
+
+          lineUp = new LineLayer({ zIndex: 1 })
+            .source(data)
+            .shape('line')
+            .color('#0DCCFF')
+            .size(1)
+            .style({
+              raisingHeight: 200000 + 150000,
+            });
+
+          scene.addLayer(lineDown);
+          scene.addLayer(lineUp);
         });
 
-        textLayer = new PointLayer({ zIndex: 2 })
+      fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
-          .source(texts, {
+        .then((res) => res.json())
-            parser: {
+        .then((data) => {
-              type: 'json',
+          const lineLayer = new LineLayer()
-              x: 'lng',
+            .source(data)
-              y: 'lat',
+            .shape('wall')
-            },
+            .size(150000)
-          })
+            .style({
-          .shape('name', 'text')
+              heightfixed: true,
-          .size(14)
+              opacity: 0.6,
-          .color('#0ff')
+              sourceColor: '#0DCCFF',
-          .style({
+              targetColor: 'rbga(255,255,255, 0)',
-            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+            });
-            spacing: 2, // 字符间距
+          scene.addLayer(lineLayer);
-            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-            stroke: '#0ff', // 描边颜色
-            strokeWidth: 0.2, // 描边宽度
-            raisingHeight: 200000 + 150000 + 10000,
-            textAllowOverlap: true,
-          });
-        scene.addLayer(textLayer);
 
-        lineDown = new LineLayer()
+          const provincelayer = new PolygonLayer({})
-          .source(data)
+            .source(data)
-          .shape('line')
+            .size(150000)
-          .color('#0DCCFF')
+            .shape('extrude')
-          .size(1)
+            .color('#0DCCFF')
-          .style({
+            .active({
-            raisingHeight: 200000,
+              color: 'rgb(100,230,255)',
+            })
+            .style({
+              heightfixed: true,
+              pickLight: true,
+              raisingHeight: 200000,
+              opacity: 0.8,
+            });
+          scene.addLayer(provincelayer);
+
+          provincelayer.on('mousemove', () => {
+            provincelayer.style({
+              raisingHeight: 200000 + 100000,
+            });
+            // @ts-ignore
+            lineDown.style({
+              raisingHeight: 200000 + 100000,
+            });
+            // @ts-ignore
+            lineUp.style({
+              raisingHeight: 200000 + 150000 + 100000,
+            });
+            // @ts-ignore
+            textLayer.style({
+              raisingHeight: 200000 + 150000 + 10000 + 100000,
+            });
           });
 
-        lineUp = new LineLayer({ zIndex: 1 })
+          provincelayer.on('unmousemove', () => {
-          .source(data)
+            provincelayer.style({
-          .shape('line')
+              raisingHeight: 200000,
-          .color('#0DCCFF')
+            });
-          .size(1)
+            // @ts-ignore
-          .style({
+            lineDown.style({
-            raisingHeight: 200000 + 150000,
+              raisingHeight: 200000,
-          });
+            });
-
+            // @ts-ignore
-        scene.addLayer(lineDown);
+            lineUp.style({
-        scene.addLayer(lineUp);
+              raisingHeight: 200000 + 150000,
-      });
+            });
-
+            // @ts-ignore
-    fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
+            textLayer.style({
-      .then((res) => res.json())
+              raisingHeight: 200000 + 150000 + 10000,
-      .then((data) => {
+            });
-        const lineLayer = new LineLayer()
-          .source(data)
-          .shape('wall')
-          .size(150000)
-          .style({
-            heightfixed: true,
-            opacity: 0.6,
-            sourceColor: '#0DCCFF',
-            targetColor: 'rbga(255,255,255, 0)',
-          });
-        scene.addLayer(lineLayer);
-
-        const provincelayer = new PolygonLayer({})
-          .source(data)
-          .size(150000)
-          .shape('extrude')
-          .color('#0DCCFF')
-          .active({
-            color: 'rgb(100,230,255)',
-          })
-          .style({
-            heightfixed: true,
-            pickLight: true,
-            raisingHeight: 200000,
-            opacity: 0.8,
-          });
-
-        scene.addLayer(provincelayer);
-
-        provincelayer.on('mousemove', () => {
-          provincelayer.style({
-            raisingHeight: 200000 + 100000,
-          });
-          // @ts-ignore
-          lineDown.style({
-            raisingHeight: 200000 + 100000,
-          });
-          // @ts-ignore
-          lineUp.style({
-            raisingHeight: 200000 + 150000 + 100000,
-          });
-          // @ts-ignore
-          textLayer.style({
-            raisingHeight: 200000 + 150000 + 10000 + 100000,
           });
         });
-
+    });
-        provincelayer.on('unmousemove', () => {
-          provincelayer.style({
-            raisingHeight: 200000,
-          });
-          // @ts-ignore
-          lineDown.style({
-            raisingHeight: 200000,
-          });
-          // @ts-ignore
-          lineUp.style({
-            raisingHeight: 200000 + 150000,
-          });
-          // @ts-ignore
-          textLayer.style({
-            raisingHeight: 200000 + 150000 + 10000,
-          });
-        });
-      });
   }
 
   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({
+          .active({
-          //   color: 'rgb(100,230,255)',
+            color: 'rgb(255,255,255)',
-          // })
+            mix: 0.5,
+          })
           .style({
             heightfixed: true,
             pickLight: true,
             raisingHeight: 200000,
-            mapTexture:
+            // mapTexture:
-              'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
+            //   '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',