Merge branch 'master' of https://github.com/antvis/L7

packages/core/src/services/interaction/PickingService.ts

@@ -171,8 +171,8 @@ export default class PickingService implements IPickingService {
     }
     this.alreadyInPicking = true;
     const t = new Date().getTime();
-    // @ts-ignore
+    // TODO: 优化拾取操作 在右键时 mousedown 和 contextmenu 几乎同时触发，所以不能舍去这一次的触发
-    if (t - this.lastPickTime > 10) {
+    if (t - this.lastPickTime > 10 || target.type === 'contextmenu') {
       await this.pickingLayers(target);
     }
     // await this.pickingLayers(target);
@@ -206,8 +206,6 @@ export default class PickingService implements IPickingService {
       getContainer,
     } = this.rendererService;
 
-    this.resizePickingFBO();
-
     useFramebuffer(this.pickingFBO, () => {
       const layers = this.layerService.getRenderList();
       layers

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

@@ -11,7 +11,7 @@ uniform float u_shaderPick;
 /*
  * Returns highlight color if this item is selected.
  */
-vec4 filterHighlightColor(vec4 color, float lightWeight) {
+vec4 filterHighlightColor(vec4 color, float weight) {
   bool selected = bool(v_PickingResult.a);
 
   if (selected) {
@@ -21,7 +21,7 @@ vec4 filterHighlightColor(vec4 color, float lightWeight) {
     float highLightRatio = highLightAlpha / (highLightAlpha + color.a * (1.0 - highLightAlpha));
 
     vec3 resultRGB = mix(color.rgb, highLightColor.rgb, highLightRatio);
-    return vec4(resultRGB * lightWeight, color.a);
+    return vec4(resultRGB * weight, color.a);
   } else {
     return color;
   }
@@ -53,6 +53,16 @@ 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) {
   // TODO: 过滤多余的 shader 计算
   // return color;

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

@@ -31,6 +31,7 @@ interface IPointLayerStyleOptions {
   stroke: styleColor;
   strokeOpacity: styleSingle;
   offsets: styleOffset;
+  blend: string;
 }
 // 判断当前使用的 style 中的变量属性是否需要进行数据映射
 export default class FillModel extends BaseModel {
@@ -41,6 +42,7 @@ export default class FillModel extends BaseModel {
       strokeWidth = 0,
       stroke = 'rgba(0,0,0,0)',
       offsets = [0, 0],
+      blend,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
     if (
@@ -90,6 +92,7 @@ export default class FillModel extends BaseModel {
             });
     }
     return {
+      u_additive: blend === 'additive' ? 1.0 : 0.0,
       u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0,
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),

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

@@ -1,8 +1,7 @@
 #define Animate 0.0
 
 uniform float u_globel;
-uniform float u_blur : 0;
+uniform float u_additive;
-// uniform float u_stroke_width : 1;
 
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 
@@ -33,8 +32,6 @@ void main() {
   vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke;
 
   lowp float antialiasblur = v_data.z;
-  float antialiased_blur = -max(u_blur, antialiasblur);
-  // float r = v_radius / (v_radius + u_stroke_width);
   float r = v_radius / (v_radius + strokeWidth);
 
   float outer_df;
@@ -72,18 +69,12 @@ void main() {
   if(u_globel > 0.0) {
     // TODO: 地球模式下避免多余片元绘制，同时也能避免有用片元在透明且重叠的情况下无法写入
     // 付出的代价是边缘会有一些锯齿
-    if(outer_df > antialiased_blur + 0.018) discard;
+    if(outer_df > antialiasblur + 0.018) discard;
   }
-  float opacity_t = smoothstep(0.0, antialiased_blur, outer_df);
+  float opacity_t = smoothstep(0.0, antialiasblur, outer_df); 
-  
+
- 
+  float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
-  // float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(
+    antialiasblur,
-  //   antialiased_blur,
-  //   0.0,
-  //   inner_df
-  // );
-   float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
-    antialiased_blur,
     0.0,
     inner_df
   );
@@ -93,21 +84,26 @@ void main() {
 
   gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t);
 
-  gl_FragColor.a = gl_FragColor.a * opacity_t;
   if(u_aimate.x == Animate) {
     float d = length(v_data.xy);
     float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_aimate.z - u_aimate.y * u_time)), 0.0, 1.0);
-    gl_FragColor = vec4(gl_FragColor.xyz, intensity);
+    
+    // TODO: 根据叠加模式选择效果
+    if(u_additive > 0.0) {
+      gl_FragColor *= intensity;
+    } else {
+      gl_FragColor = vec4(gl_FragColor.xyz, intensity);
+    }
+  
     // TODO: 优化在水波纹情况下的拾取（a == 0 时无法拾取）
     if(d < 0.7) {
       gl_FragColor.a = max(gl_FragColor.a, 0.001);
     }
+
+    gl_FragColor = u_additive > 0.0 ？filterColorAnimate(gl_FragColor) : filterColor(gl_FragColor);
+  } else {
+    gl_FragColor = filterColor(gl_FragColor);
   }
-  
+
-  gl_FragColor = filterColor(gl_FragColor);
+  gl_FragColor *= opacity_t;
-  if(gl_FragColor.a == 0.00) {
-    gl_FragColor.rgb *= gl_FragColor.a;
-  }
-  // gl_FragColor.rgb *= gl_FragColor.a;
-  
 }

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

@@ -20,6 +20,8 @@ uniform float u_stroke_width : 2;
 uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
 uniform vec2 u_offsets;
 
+uniform float u_blur : 0.0;
+
 #pragma include "styleMapping"
 #pragma include "styleMappingCalOpacity"
 #pragma include "styleMappingCalStrokeOpacity"
@@ -121,7 +123,8 @@ void main() {
 
   // TODO: billboard
   // anti-alias
-  float antialiasblur = 1.0 / u_DevicePixelRatio / (newSize + u_stroke_width);
+  //  float antialiased_blur = -max(u_blur, antialiasblur);
+  float antialiasblur = -max(1.0 / u_DevicePixelRatio / (newSize + u_stroke_width), u_blur);
 
   // construct point coords
   // TODP: /abs(extrude.x) 是为了兼容地球模式

packages/map/src/map.ts

@@ -122,7 +122,8 @@ export class Map extends Camera {
     const height = dimensions[1];
 
     this.transform.resize(width, height);
-    if (!isMini) {
+    // TODO: 小程序环境不需要执行后续动作
+    if (isMini) {
       return this;
     }
     const fireMoving = !this.moving;

stories/Map/components/mapCenter.tsx

@@ -28,7 +28,9 @@ export default class GaodeMapComponent extends React.Component {
     // min = 'min',
     // max = 'max',
     // none = 'none',
-    const layer = new PointLayer({ zIndex: 2, blend: 'additive' }) //
+    // blend: 'additive'
+
+    let layer = new PointLayer({ zIndex: 2, blend: 'additive' })
       .source(
         [
           {
@@ -49,48 +51,26 @@ export default class GaodeMapComponent extends React.Component {
         },
       )
       .shape('circle')
-      // .shape('normal')
       .color('#1990FF')
-      .size(20)
+      .size(40)
       .style({
-        stroke: '#fff',
+        stroke: '#f00',
-        storkeWidth: 2,
+        strokeWidth: 3,
-      });
+        strokeOpacity: 1,
+      })
+      .animate(true)
+      .active({ color: '#ff0' });
 
     this.scene = scene;
 
-    const linelayer = new LineLayer({ blend: 'additive' })
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'MultiLineString',
-              coordinates: [
-                [
-                  [121.107846, 30.267069],
-                  [121.107, 30.267069],
-                ],
-              ],
-            },
-          },
-        ],
-      })
-      .shape('line')
-      .color('#78FFFF')
-      .size(10);
-
     scene.on('loaded', () => {
-      // scene.addLayer(linelayer);
       scene.addLayer(layer);
     });
     layer.on('click', () => console.log('point click'));
-    layer.on('mousemove', (e) => {
+    layer.on('contextmenu', () => console.log('contextmenu'));
-      console.log(e.feature);
+    // layer.on('mousemove', (e) => {
-    });
+    //   console.log(e.feature);
-    linelayer.on('click', () => console.log('line click'));
+    // });
   }
 
   public render() {

stories/customMap/components/Map.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Scene, PolygonLayer, PointLayer, Map } from '@antv/l7-mini';
 // import { Scene } from '@antv/l7';
 // import { PolygonLayer, PointLayer } from '@antv/l7-layers';
@@ -8,68 +9,61 @@ export default class ScaleComponent extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMap({
+      map: new Map({
         center: [105, 32],
         pitch: 0,
         zoom: 3,
       }),
     });
     // scene.setBgColor('#000');
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          let layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true
+            .source(data)
+            .size('name', [0, 10000, 50000, 30000, 100000])
+            .color('name', [
+              '#2E8AE6',
+              '#69D1AB',
+              '#DAF291',
+              '#FFD591',
+              '#FF7A45',
+              '#CF1D49',
+            ])
+            .shape('fill')
+            .select(true)
+            .style({
+              opacity: 0.8,
+              opacityLinear: {
+                enable: true,
+                dir: 'in', // in - out
+              },
+            });
 
-    fetch(
+          let layer2 = new PolygonLayer({ blend: 'normal' })
-      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+            .source(data)
-    )
+            .size(1)
-      .then((res) => res.json())
+            .color('name', [
-      .then((data) => {
+              '#2E8AE6',
-        const layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true
+              '#69D1AB',
-          .source(data)
+              '#DAF291',
-          .size('name', [0, 10000, 50000, 30000, 100000])
+              '#FFD591',
-          .color('name', [
+              '#FF7A45',
-            '#2E8AE6',
+              '#CF1D49',
-            '#69D1AB',
+            ])
-            '#DAF291',
+            .shape('line')
-            '#FFD591',
+            .select(true)
-            '#FF7A45',
+            .style({
-            '#CF1D49',
+              opacity: 1.0,
-          ])
+            });
-          .shape('fill')
-          .select(true)
-          .style({
-            opacity: 0.8,
-            opacityLinear: {
-              enable: true,
-              dir: 'in', // in - out
-            },
-          });
 
-        const layer2 = new PolygonLayer({ blend: 'normal' })
-          .source(data)
-          .size(1)
-          .color('name', [
-            '#2E8AE6',
-            '#69D1AB',
-            '#DAF291',
-            '#FFD591',
-            '#FF7A45',
-            '#CF1D49',
-          ])
-          .shape('line')
-          .select(true)
-          .style({
-            opacity: 1.0,
-          });
-
-        scene.on('loaded', () => {
           scene.addLayer(layer);
           scene.addLayer(layer2);
-          scene.fitBounds([
-            [48.073279, 3.067261],
-            [160.573279, 54.003394],
-          ]);
-
-          console.log('getBounds', scene.getBounds());
         });
-      });
+    });
   }
 
   public render() {