Shihui (#962)

* feat: 增加 bloomPass1.0、修改渲染流程，让 multiPass 有正确的渲染顺序

* style: lint style

* feat: 取消 bloom 在 postprocessor 中的多次渲染（没有明显优化）

* feat: polygon extrude 模式支持配置固定高度

* style: lint style

* feat: 优化后处理 bloom 的效果

* feat: 修改交替绘制 bloom 的写法

* style: lint style

* feat: 完善 iconService 加载渲染和销毁

* style: lint style

* feat: 补全 mapbox 模式下等面积点

* style: lint style

* fix: 修复 pointLayer animate 模式 opacity 失效

* style: lint style

* feat: 拆分 pointLayer 的 shader

* style: lint sytle

* feat: 拆分 lineLayer 的 linear 模式

* style: lint style

* feat: 优化点击的拾取判断

* style: lint style

* feat: 取消圆柱 shader 中的三元表达式、增强健壮性

* feat: 点图层圆柱体支持固定高度配置 heightfixed

* feat: 点图层圆柱体支持拾取高亮颜色的光照计算

* style: lint style

* style: lint style

* feat: 拆分 lintLayer line 模式下的 dash line

* style: lint style

packages/core/src/shaders/projection.glsl

@@ -196,6 +196,17 @@ vec2 project_pixel(vec2 pixel) {
   }
   return pixel * -1.;
 }
+vec3 project_pixel(vec3 pixel) {
+  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+    // P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
+    return pixel * pow(2.0, (19.0 - u_Zoom));
+  }
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
+    // P20_2 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减3
+    return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom));
+  }
+  return pixel * -1.;
+}
 
 vec4 project_common_position_to_clipspace(vec4 position, mat4 viewProjectionMatrix, vec4 center) {
   if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||

packages/layers/src/core/interface.ts

@@ -55,13 +55,25 @@ export interface IPointLayerStyleOptions {
   fontFamily?: string;
   textAllowOverlap?: boolean;
 
+  // cylinder
+  pickLight?: boolean;
+  depth?: boolean;
+  sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
+  targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
+  opacityLinear?: {
+    enable: boolean;
+    dir: string;
+  };
+  lightEnable: boolean;
+  heightfixed?: boolean; // 圆柱体高度是否固定（不随 zoom 发生变化）
+
   offsets?: styleOffset;
   blend?: string;
   unit?: string;
   mask?: boolean;
   maskInside?: boolean;
 
-  animateOption?: IAnimateOption;
+  animateOption: IAnimateOption;
 }
 
 export interface IPolygonLayerStyleOptions {

packages/layers/src/line/models/line.ts

@@ -15,6 +15,9 @@ import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineTriangulation } from '../../core/triangulation';
+// dash line shader
+import line_dash_frag from '../shaders/dash/line_dash_frag.glsl';
+import line_dash_vert from '../shaders/dash/line_dash_vert.glsl';
 // other function shaders
 import linear_line_frag from '../shaders/frag/linear_frag.glsl';
 // basic line shader
@@ -166,7 +169,18 @@ export default class LineModel extends BaseModel {
     const {
       sourceColor,
       targetColor,
+      lineType,
+      dashArray,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+
+    if (lineType === 'dash' && dashArray) {
+      return {
+        frag: line_dash_frag,
+        vert: line_dash_vert,
+        type: 'dash',
+      };
+    }
+
     if (sourceColor && targetColor) {
       // 分离 linear 功能
       return {

packages/layers/src/line/shaders/dash/line_dash_frag.glsl

@@ -0,0 +1,31 @@
+#define LineTypeSolid 0.0
+uniform float u_opacity : 1.0;
+
+varying vec4 v_color;
+
+// dash
+varying vec4 v_dash_array;
+
+#pragma include "picking"
+
+uniform float u_time;
+uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // 控制运动
+
+varying mat4 styleMappingMat;
+// [animate, duration, interval, trailLength],
+void main() {
+  float opacity = styleMappingMat[0][0];
+  float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例
+  gl_FragColor = v_color;
+  gl_FragColor.a *= opacity; // 全局透明度
+ // dash line
+ 
+  float flag = 0.;
+  float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+  if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength <  v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
+    flag = 1.;
+  }
+  gl_FragColor.a *=flag;
+
+  gl_FragColor = filterColor(gl_FragColor);
+}

packages/layers/src/line/shaders/dash/line_dash_vert.glsl

@@ -0,0 +1,93 @@
+#define LineTypeSolid 0.0
+#define LineTypeDash 1.0
+#define Animate 0.0
+
+attribute float a_Miter;
+attribute vec4 a_Color;
+attribute vec2 a_Size;
+attribute vec3 a_Normal;
+attribute vec3 a_Position;
+
+attribute vec2 a_iconMapUV;
+
+// dash line
+attribute float a_Total_Distance;
+attribute float a_Distance;
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
+
+uniform float u_vertexScale: 1.0;
+
+#pragma include "projection"
+#pragma include "picking"
+
+varying vec4 v_color;
+varying vec4 v_dash_array;
+
+uniform float u_opacity: 1.0;
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+
+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, // strokeR - strokeG - strokeB - strokeA
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
+    0.0, 0.0, 0.0, 0.0  // distance_ratio/distance/pixelLen/texV
+  );
+
+  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
+  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
+  float columnWidth = 1.0/columnCount;  // 列宽
+  float rowHeight = 1.0/rowCount;       // 行高
+  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
+  float id = a_vertexId; // 第n个顶点
+  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
+  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
+  
+  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
+  // 按顺序从 cell 中取值、若没有则自动往下取值
+  float textureOffset = 0.0; // 在 cell 中取值的偏移量
+
+  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][0] = opacityAndOffset.r;
+  textureOffset = opacityAndOffset.g;
+  // cal style mapping - 数据纹理映射部分的计算
+
+  v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
+  v_color = a_Color;
+
+  vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
+  vec2 offset = project_pixel(size.xy);
+
+  // 设置数据集的参数
+  styleMappingMat[3][0] = a_Distance / a_Total_Distance; // 当前点位距离占线总长的比例
+  styleMappingMat[3][1] = a_Distance;       // 当前顶点的距离
+
+  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
+
+  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, project_pixel(a_Size.y), 1.0));
+  } else {
+    float lineHeight = a_Size.y;
+ 
+    // #define COORDINATE_SYSTEM_P20 5.0
+    // #define COORDINATE_SYSTEM_P20_OFFSET 6.0
+    // amap1.x
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+      // 保持高度相对不变
+      lineHeight *= pow(2.0, 20.0 - u_Zoom);
+    }
+
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight, 1.0));
+  }
+
+  setPickingColor(a_PickingColor);
+}

packages/layers/src/line/shaders/line_dash_frag.glsl

@@ -1,22 +0,0 @@
-uniform float u_blur : 0.9;
-uniform float u_opacity : 1.0;
-uniform float u_dash_offset : 0.0;
-uniform float u_dash_ratio : 0.1;
-varying vec4 v_color;
-varying vec2 v_normal;
-
-uniform float u_time;
-uniform vec3 u_aimate: [ 0, 2., 1.0, 0.2 ];
-
-varying float v_distance_ratio;
-varying vec2 v_dash_array;
-void main() {
-   gl_FragColor = v_color;
-  //  gl_FragColor.a = v_distance_ratio;
-  // anti-alias
-  // float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)) * u_opacity;
-  // gl_FragColor.a *= blur  * ceil(mod(v_distance_ratio, v_dash_array.x) - v_dash_array.y);
-  gl_FragColor.a *= u_opacity  * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
-
-
-}

packages/layers/src/line/shaders/line_dash_vert.glsl

@@ -1,36 +0,0 @@
-
-attribute float a_Miter;
-attribute vec4 a_Color;
-attribute float a_Size;
-attribute vec3 a_Normal;
-attribute float a_Total_Distance;
-attribute vec3 a_Position;
-attribute float a_Distance;
-uniform mat4 u_ModelMatrix;
-uniform vec2 u_dash_array: [10.0, 5.];
-uniform  float u_line_type: 0.0;
-uniform float u_dash_offset: 0;
-
-varying vec4 v_color;
-varying vec2 v_dash_array;
-varying vec2 v_normal;
-
-varying float v_distance_ratio;
-
-
-
-#pragma include "projection"
-void main() {
-
-
-  v_distance_ratio = a_Distance / a_Total_Distance;
-
-  v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
-
-  v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));
-  v_color = a_Color;
-  vec3 size = a_Miter * setPickingSize(a_Size) * reverse_offset_normal(a_Normal);  //v_normal * vec3(1., -1., 1.0);
-  vec2 offset = project_pixel(size.xy);
-  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
-  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0, 1.0));
-}

packages/layers/src/line/shaders/line_frag.glsl

@@ -1,9 +1,6 @@
-#define LineTypeSolid 0.0
-#define LineTypeDash 1.0
 #define Animate 0.0
 #define LineTexture 1.0
 uniform float u_blur : 0.99;
-uniform float u_line_type: 0.0;
 uniform float u_opacity : 1.0;
 uniform float u_textureBlend;
 
@@ -16,11 +13,6 @@ uniform float u_line_texture;
 uniform sampler2D u_texture;
 uniform vec2 u_textSize;
 
-// dash
-uniform float u_dash_offset : 0.0;
-uniform float u_dash_ratio : 0.1;
-varying vec4 v_dash_array;
-
 varying vec2 v_iconMapUV;
 
 #pragma include "picking"
@@ -45,17 +37,8 @@ void main() {
       alpha = smoothstep(0., 1., alpha);
       gl_FragColor.a *= alpha;
   }
- // dash line
-  if(u_line_type == LineTypeDash) {
-    float flag = 0.;
-    float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
-    if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength <  v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
-      flag = 1.;
-    }
-    gl_FragColor.a *=flag;
-  }
 
-  if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
+  if(u_line_texture == LineTexture) { // while load texture
     float aDistance = styleMappingMat[3].g;      // 当前顶点的距离
     float d_texPixelLen = styleMappingMat[3].b;  // 贴图的像素长度，根据地图层级缩放
     float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);

packages/layers/src/line/shaders/line_vert.glsl

@@ -1,5 +1,4 @@
-#define LineTypeSolid 0.0
-#define LineTypeDash 1.0
+
 #define Animate 0.0
 
 attribute float a_Miter;
@@ -16,8 +15,6 @@ attribute float a_Distance;
 
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
-uniform float u_line_type: 0.0;
-uniform vec4 u_dash_array: [10.0, 5., 0, 0];
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 uniform float u_icon_step: 100;
 
@@ -27,7 +24,6 @@ uniform float u_vertexScale: 1.0;
 #pragma include "picking"
 
 varying vec4 v_color;
-varying vec4 v_dash_array;
 
 // texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
 varying vec2 v_iconMapUV;
@@ -68,7 +64,6 @@ void main() {
   textureOffset = opacityAndOffset.g;
   // cal style mapping - 数据纹理映射部分的计算
 
-  float d_distance_ratio; // 当前点位距离占线总长的比例
   float d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
 
   v_iconMapUV = a_iconMapUV;
@@ -77,13 +72,6 @@ void main() {
     d_texPixelLen *= 10.0;
   }
 
-  if(u_line_type == LineTypeDash) {
-    d_distance_ratio = a_Distance / a_Total_Distance;
-    v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
-  }
-  if(u_aimate.x == Animate || u_linearColor == 1.0) {
-      d_distance_ratio = a_Distance / a_Total_Distance;
-  }
   v_color = a_Color;
 
   vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
@@ -95,7 +83,7 @@ void main() {
   float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
 
   // 设置数据集的参数
-  styleMappingMat[3][0] = d_distance_ratio; // 当前点位距离占线总长的比例
+  styleMappingMat[3][0] = a_Distance / a_Total_Distance;; // 当前点位距离占线总长的比例
   styleMappingMat[3][1] = a_Distance;       // 当前顶点的距离
   styleMappingMat[3][2] = d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
   styleMappingMat[3][3] = texV;             // 线图层贴图部分的 v 坐标值

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

@@ -1,33 +1,14 @@
-import {
-  AttributeType,
-  gl,
-  IAnimateOption,
-  IEncodeFeature,
-  IModel,
-} from '@antv/l7-core';
+import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
 import { rgb2arr } from '@antv/l7-utils';
-import { isBoolean, isNumber } from 'lodash';
-import BaseModel, { styleOffset, styleSingle } from '../../core/BaseModel';
+import { isNumber } from 'lodash';
+import BaseModel from '../../core/BaseModel';
+import { IPointLayerStyleOptions } from '../../core/interface';
 import { PointExtrudeTriangulation } from '../../core/triangulation';
 import { lglt2xyz } from '../../earth/utils';
 import { calculateCentroid } from '../../utils/geo';
-import pointExtrudeFrag from '../shaders/extrude_frag.glsl';
-import pointExtrudeVert from '../shaders/extrude_vert.glsl';
-interface IPointLayerStyleOptions {
-  animateOption: IAnimateOption;
-  depth: boolean;
-  opacity: styleSingle;
-  offsets: styleOffset;
+import pointExtrudeFrag from '../shaders/extrude/extrude_frag.glsl';
+import pointExtrudeVert from '../shaders/extrude/extrude_vert.glsl';
 
-  sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
-  targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
-  opacityLinear?: {
-    enable: boolean;
-    dir: string;
-  };
-
-  lightEnable: boolean;
-}
 export default class ExtrudeModel extends BaseModel {
   private raiseCount: number = 0;
   private raiserepeat: number = 0;
@@ -43,6 +24,9 @@ export default class ExtrudeModel extends BaseModel {
       sourceColor,
       targetColor,
 
+      pickLight = false,
+      heightfixed = false,
+
       opacityLinear = {
         enable: false,
         dir: 'up',
@@ -113,6 +97,11 @@ export default class ExtrudeModel extends BaseModel {
     }
 
     return {
+      // 圆柱体的拾取高亮是否要计算光照
+      u_pickLight: Number(pickLight),
+      // 圆柱体是否固定高度
+      u_heightfixed: Number(heightfixed),
+
       u_r: animateOption.enable && this.raiserepeat > 0 ? this.raiseCount : 1.0,
       // TODO: 判断当前的点图层的模型是普通地图模式还是地球模式
       u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0,

packages/layers/src/point/shaders/extrude/extrude_frag.glsl

@@ -3,6 +3,7 @@ uniform float u_opacity: 1.0;
 
 varying float v_z;
 varying float v_lightWeight;
+uniform float u_pickLight: 0.0;
 
 #pragma include "picking"
 
@@ -35,5 +36,9 @@ void main() {
   }
 
   // picking
+  if(u_pickLight > 0.0) {
+    gl_FragColor = filterColorWithLight(gl_FragColor, v_lightWeight);
+  } else {
     gl_FragColor = filterColor(gl_FragColor);
+  }
 }

packages/layers/src/point/shaders/extrude/extrude_vert.glsl

@@ -11,6 +11,7 @@ attribute vec4 a_Color;
 attribute vec3 a_Size;
 attribute vec3 a_Normal;
 
+uniform float u_heightfixed: 0.0; // 默认不固定
 uniform float u_globel;
 uniform float u_r;
 uniform mat4 u_ModelMatrix;
@@ -80,15 +81,30 @@ void main() {
   // a_Position.z 是在构建网格的时候传入的标准值 0 - 1，在插值器插值可以获取 0～1 线性渐变的值
   v_z = a_Position.z;
 
-  vec2 offset = project_pixel(size.xy);
+ 
+
+  // vec2 offset = project_pixel(size.xy);
+  // vec2 offset = (size.xy);
+
+  vec3 offset = size; // 控制圆柱体的大小 - 从标准单位圆柱体进行偏移
+  if(u_heightfixed < 1.0) { // 圆柱体不固定高度
+    offset = project_pixel(offset);
+  }
 
   vec4 project_pos = project_position(vec4(a_Pos.xy, 0., 1.0));
 
-  vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z) * u_r, 1.0);
+  // vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z) * u_r, 1.0);
+  // u_r 控制圆柱的生长
+  vec4 pos = vec4(project_pos.xy + offset.xy, offset.z * u_r, 1.0);
 
   // 圆柱光照效果
-  float lightWeight = u_lightEnable > 0.0 ? calc_lighting(pos): 1.0;
+  // float lightWeight = u_lightEnable > 0.0 ? calc_lighting(pos): 1.0;
+  float lightWeight = 1.0;
+  if(u_lightEnable > 0.0) { // 取消三元表达式，增强健壮性
+    lightWeight = calc_lighting(pos);
+  }
   v_lightWeight = lightWeight;
+
   v_color =vec4(a_Color.rgb * lightWeight, a_Color.w);
 
   // gl_Position = project_common_position_to_clipspace(pos);

stories/Map/components/amap2demo_lineDash.tsx

@@ -35,6 +35,7 @@ export default class Amap2demo_lineDash extends React.Component {
             .size(1.5)
             .shape('line')
             .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])
+            .active(true)
             .style({
               lineType: 'dash',
               dashArray: [5, 5],

stories/Map/components/mapCenter.tsx

@@ -103,20 +103,26 @@ export default class GaodeMapComponent extends React.Component {
           },
         },
       )
-      .shape('circle')
+      // .shape('circle')
+      .shape('cylinder')
       // .color('#0f9')
       // .color('#4169E1')
       .color('#4cfd47')
-      // .size([10, 10, 100])
-      .size(100)
+      // .size([100, 100, 1000])
+      .size([100, 100, 1000])
+      // .size(100)
       // .animate({
       //   // enable: true,
       //   enable: false,
       //   // type: 'www'
       // })
-      .animate(true)
+      // .animate(true)
       .active({ color: '#00f' })
       .style({
+        heightfixed: true,
+        // pickLight: false,
+        pickLight: true,
+        // lightEnable: true,
         // opacity: 0.5,
         stroke: '#f00',
         // strokeWidth: 10,