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

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

@@ -23,32 +23,48 @@ void main() {
   );
 
   float opacity = styleMappingMat[0][0];
-  float stroke_opacity = styleMappingMat[0][1];
-  float strokeWidth = styleMappingMat[0][2];
-  vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke;
 
-  float r = v_radius / (v_radius + strokeWidth);
+  lowp float antialiasblur = v_data.z;
+  float r = v_radius / (v_radius);
+
+  float outer_df;
+  float inner_df;
+  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'
+  
+  outer_df = sdCircle(v_data.xy, 1.0);
+  inner_df = sdCircle(v_data.xy, r);
+
+
+  if(u_globel > 0.0) {
+    // TODO: 地球模式下避免多余片元绘制，同时也能避免有用片元在透明且重叠的情况下无法写入
+    // 付出的代价是边缘会有一些锯齿
+    if(outer_df > antialiasblur + 0.018) discard;
+  }
+  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);
+
+  float color_t = smoothstep(
+    antialiasblur,
+    0.0,
+    inner_df
+  );
+  float PI = 3.14159;
+  float N_RINGS = 3.0;
+  float FREQ = 1.0;
+
+ gl_FragColor = vec4(v_color.rgb, v_color.a * opacity);
 
-  // 'circle'
-  float outer_df = sdCircle(v_data.xy, 1.0);
-  float inner_df = sdCircle(v_data.xy, r);
- 
   float d = length(v_data.xy);
   if(d > 0.5) {
     discard;
   }
-  float PI = 3.14159;
   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);
-
-  // TODO: 根据叠加水波效果
-  gl_FragColor = vec4(v_color.xyz, v_color.a * opacity * intensity);
-
+  
+  // TODO: 根据叠加模式选择效果
   if(u_additive > 0.0) {
-    gl_FragColor *= gl_FragColor.a;
-  } 
-
-  // TODO: 优化在水波纹情况下的拾取
-  if(d < 0.5) {
+    gl_FragColor *= intensity;
+    gl_FragColor = filterColorAnimate(gl_FragColor);
+  } else {
+    gl_FragColor = vec4(gl_FragColor.xyz, gl_FragColor.a * intensity);
     gl_FragColor = filterColor(gl_FragColor);
   }
 }

packages/maps/src/amap2/map.ts

@@ -157,8 +157,7 @@ export default class AMapService
         'amap-maps',
       )[0] as HTMLElement;
       // TODO: amap2 的 amap-maps 新增 z-index=0; 样式，让 marker 中 zIndex 失效
-      // * 设置 amap.style.zIndex = 'auto'; 会导致 GaodeMapV2 在移动端的事件失效
-      // amap.style.zIndex = 'auto';
+      amap.style.zIndex = 'auto';
       this.markerContainer = DOM.create('div', 'l7-marker-container2', amap);
       // this.markerContainer = DOM.create(
       //   'div',

stories/Map/components/mapCenter.tsx

@@ -20,8 +20,8 @@ export default class GaodeMapComponent extends React.Component {
         center: aspaceLnglat,
         // pitch: 0,
         // pitch: 40,
-        style: 'dark',
-        zoom: 17,
+        // style: 'dark',
+        zoom: 14,
         // dragEnable: false
       }),
     });
@@ -53,7 +53,7 @@ export default class GaodeMapComponent extends React.Component {
     //   .size(2)
     //   .color('#000');
 
-    let layer = new PointLayer({}) // blend: 'additive'
+    let layer = new PointLayer({ blend: 'additive' }) // blend: 'additive'
       .source(
         [
           {
@@ -61,6 +61,11 @@ export default class GaodeMapComponent extends React.Component {
             lat: 30.264701434772807,
             name: 'n3',
           },
+          {
+            lng: 120.111,
+            lat: 30.264701434772807,
+            name: 'n3',
+          },
         ],
         {
           parser: {
@@ -78,19 +83,19 @@ export default class GaodeMapComponent extends React.Component {
       // .shape('cylinder')
       // .color('#0f9')
       // .color('#4169E1')
-      .color('#4cfd47')
+      .color('#66CCFF')
       // .color('name', ['#f00', '#ff0'])
       // .size([100, 100, 1000])
       // .size([20, 20, 200])
-      .size(20)
+      .size(50)
       // .size('name', [20, 40])
       // .animate({
       //   // enable: true,
       //   enable: false,
       //   // type: 'www'
       // })
-      // .animate(true)
-      .select(true)
+      .animate(true)
+      .active(true)
       // .active({ color: '#ff0' })
       .style({
         // heightfixed: true,
@@ -104,18 +109,6 @@ export default class GaodeMapComponent extends React.Component {
         // strokeOpacity: 1,
         // unit: 'meter',
       });
-    // .animate(true)
-    // .animate({
-    //   enable: true,
-    //   speed: 0.02,
-    //   repeat: 1
-    // })
-    // .active({ color: '#00f' });
-
-    setTimeout(() => {
-      layer.shape('triangleColumn');
-      scene.render();
-    }, 2000);
 
     this.scene = scene;
 

stories/React/components/Scene.tsx

@@ -1,5 +1,6 @@
 import {
   AMapScene,
+  AMapSceneV2,
   LayerContext,
   LayerEvent,
   LineLayer,
@@ -37,7 +38,7 @@ export default React.memo(function Map() {
   };
   return (
     <>
-      <AMapScene
+      <AMapSceneV2
         map={{
           center: [110.19382669582967, 50.258134],
           pitch: 0,
@@ -52,7 +53,7 @@ export default React.memo(function Map() {
           bottom: 0,
         }}
       >
-        <Popup
+        {/* <Popup
           option={{
             closeOnClick: false,
             stopPropagation: false,
@@ -60,16 +61,20 @@ export default React.memo(function Map() {
           lnglat={[115, 30.25] as number[]}
         >
           <p onClick={popupClick}>122224</p>
-        </Popup>
+        </Popup> */}
         <Marker lnglat={[100.1938, 27.25] as number[]}>
           <div
             style={{
               border: '1px solid #fff',
               background: '#FFF',
               fontSize: '24px',
+              width: '50px',
+              height: '150px',
             }}
+            // onClick={markerClick}
+            onTouchStart={markerClick}
           >
-            <p onClick={markerClick}>tes</p>
+            1
           </div>
         </Marker>
         <PolygonLayer
@@ -105,7 +110,7 @@ export default React.memo(function Map() {
             }}
           />
         </PolygonLayer>
-      </AMapScene>
+      </AMapSceneV2>
     </>
   );
 });