为点图层补充 blur 配置 (#1059)

* feat: 补充 pointLayer/blur

* style: lint style

packages/core/src/shaders/picking.frag.glsl

@@ -66,23 +66,13 @@ vec4 filterColor(vec4 color) {
   
 }
 
-// TODO: 优化水波点 blend additive 模式下有的拾取效果 
-vec4 filterColorAnimate(vec4 color) {
-  // TODO: 过滤多余的 shader 计算
-  if(u_shaderPick < 0.5) {
-    return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
-  } else {
-    return filterPickingColor(filterHighlightColor(color, color.a));
-  }
-}
-
-vec4 filterColorWithLight(vec4 color, float lightWeight) {
+vec4 filterColorAlpha(vec4 color, float alpha) {
   // TODO: 过滤多余的 shader 计算
   // return color;
   if(u_shaderPick < 0.5) {
     return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
   } else {
-    return filterPickingColor(filterHighlightColor(color, lightWeight));
+    return filterPickingColor(filterHighlightColor(color, alpha));
   }
 }
 

packages/layers/src/core/interface.ts

@@ -50,6 +50,9 @@ export interface IPointLayerStyleOptions {
   strokeWidth: number;
   stroke: string;
 
+  blur?: number;
+
+  // text
   textOffset?: [number, number];
   textAnchor?: anchorType;
   spacing?: number;

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

@@ -37,6 +37,7 @@ export default class FillModel extends BaseModel {
       stroke = 'rgba(0,0,0,0)',
       offsets = [0, 0],
       blend,
+      blur = 0,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
     if (
@@ -87,6 +88,7 @@ export default class FillModel extends BaseModel {
     }
     return {
       u_isMeter: Number(this.isMeter),
+      u_blur: blur,
 
       u_additive: blend === 'additive' ? 1.0 : 0.0,
       u_globel: this.mapService.version === Version.GLOBEL ? 1 : 0,

packages/layers/src/point/shaders/animate/wave_frag.glsl

@@ -56,7 +56,8 @@ void main() {
   // TODO: 根据叠加模式选择效果
   if(u_additive > 0.0) {
     gl_FragColor *= intensity;
-    gl_FragColor = filterColorAnimate(gl_FragColor);
+    // TODO: 优化水波点 blend additive 模式下有的拾取效果 
+    gl_FragColor = filterColorAlpha(gl_FragColor, gl_FragColor.a);
   } else {
     gl_FragColor = vec4(gl_FragColor.xyz, gl_FragColor.a * intensity);
     gl_FragColor = filterColor(gl_FragColor);

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

@@ -37,7 +37,7 @@ void main() {
 
   // picking
   if(u_pickLight > 0.0) {
-    gl_FragColor = filterColorWithLight(gl_FragColor, v_lightWeight);
+    gl_FragColor = filterColorAlpha(gl_FragColor, v_lightWeight);
   } else {
     gl_FragColor = filterColor(gl_FragColor);
   }

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

@@ -83,11 +83,9 @@ void main() {
 
   if(u_additive > 0.0) {
     gl_FragColor *= opacity_t;
+    gl_FragColor = filterColorAlpha(gl_FragColor, gl_FragColor.a);
   } else {
     gl_FragColor.a *= opacity_t;
-  }
-
-  if(gl_FragColor.a > 0.0) {
     gl_FragColor = filterColor(gl_FragColor);
   }
 }

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

@@ -9,5 +9,5 @@ void main() {
   gl_FragColor = v_Color;
   // gl_FragColor.a *= u_opacity;
   gl_FragColor.a *= opacity;
-  gl_FragColor = filterColorWithLight(gl_FragColor, v_lightWeight);
+  gl_FragColor = filterColorAlpha(gl_FragColor, v_lightWeight);
 }

stories/Map/components/amap2demo_styleMap.tsx

@@ -12,7 +12,7 @@ export default class Amap2demo_styleMap extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMapV2({
+      map: new GaodeMap({
         center: [112, 30.267069],
         pitch: 0,
         style: 'dark',
@@ -36,14 +36,18 @@ export default class Amap2demo_styleMap extends React.Component {
             })
             .shape('circle')
             .color('color')
+            // .color('#f00')
             .size('value', (v) => 5 + 15 * v)
             .style({
+              // blur: 2.5,
+
               stroke: 'strokeColor',
               // stroke: ['strokeColor', (d: any) => {
               //   return d
               // }],
 
               strokeWidth: 'strokeWidth',
+              // strokeWidth: 0,
               // strokeWidth: ["strokeWidth", (d: any) => {
               //   return d * 2
               // }],

stories/Map/components/mapCenter.tsx

@@ -53,7 +53,7 @@ export default class GaodeMapComponent extends React.Component {
     //   .size(2)
     //   .color('#000');
 
-    let layer = new PointLayer({ blend: 'additive' }) // blend: 'additive'
+    let layer = new PointLayer({}) // blend: 'additive'
       .source(
         [
           {
@@ -83,7 +83,8 @@ export default class GaodeMapComponent extends React.Component {
       // .shape('cylinder')
       // .color('#0f9')
       // .color('#4169E1')
-      .color('#66CCFF')
+      // .color('#66CCFF')
+      .color('#f00')
       // .color('name', ['#f00', '#ff0'])
       // .size([100, 100, 1000])
       // .size([20, 20, 200])
@@ -94,7 +95,7 @@ export default class GaodeMapComponent extends React.Component {
       //   enable: false,
       //   // type: 'www'
       // })
-      .animate(true)
+      // .animate(true)
       .active(true)
       // .active({ color: '#ff0' })
       .style({
@@ -102,7 +103,8 @@ export default class GaodeMapComponent extends React.Component {
         // pickLight: false,
         // pickLight: true,
         // lightEnable: true,
-        // opacity: 0.5,
+        // blur: 0.2,
+        // opacity: 0.3,
         // stroke: '#f00',
         // strokeWidth: 10,
         // strokeWidth: 0,