fix(layer): 采用默认抗锯齿效果

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

@@ -1,7 +1,7 @@
 #define LineTypeSolid 0.0
 #define LineTypeDash 1.0
 #define Animate 0.0
-uniform float u_blur : 0.9;
+uniform float u_blur : 0.99;
 uniform float u_line_type: 0.0;
 uniform float u_opacity : 1.0;
 varying vec4 v_color;
@@ -24,9 +24,8 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 void main() {
   gl_FragColor = v_color;
   // anti-alias
-  float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
-  gl_FragColor.a *= u_opacity * blur ;
-
+  // float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy));
+  // gl_FragColor.a *= u_opacity * blur ;
   if(u_aimate.x == Animate) {
       float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
       alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;

stories/Layers/components/Line.tsx

@@ -1,5 +1,5 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
+import { GaodeMap,Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class LineDemo extends React.Component {
@@ -12,45 +12,39 @@ export default class LineDemo extends React.Component {
 
   public async componentDidMount() {
     const response = await fetch(
-      'https://arcgis.github.io/arcgis-samples-javascript/sample-data/custom-gl-animated-lines/lines.json',
+      'https://gw-office.alipayobjects.com/bmw-prod/037b4240-f9ee-4dd8-b90c-178af4e4c9b8.json',
     );
+    const data = await response.json()
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
-        center: [-74.006, 40.7128],
+      map: new GaodeMap({
+        center: [120, 30.7128],
         zoom: 11.5,
-        style: 'dark',
+        style: 'light',
       }),
     });
-    const lineLayer = new LineLayer({
-      minZoom: 12,
-      maxZoom: 15,
+    const polygonLayer = new PolygonLayer({
+      autoFit: true,
     })
-      .source(await response.json(), {
-        parser: {
-          type: 'json',
-          coordinates: 'path',
-        },
-      })
-      .size(3)
+      .source(data)
+      .size(1)
+      .shape('fill')
+      .color('rgb(254,153,41)')
+      .style({
+        opacity: 1.0,
+      });
+    const lineLayer = new PolygonLayer({
+      autoFit: true,
+    })
+      .source(data)
+      .size(1)
       .shape('line')
-      .active(true)
-      .color('color', (v) => {
-        return `rgb(${v})`;
-      })
-      .animate({
-        enable: true,
-        interval: 0.5,
-        trailLength: 0.4,
-        duration: 4,
-      })
+      .color('#f00')
       .style({
         opacity: 1.0,
       });
 
-    lineLayer.on('click', (e) => {
-      console.log(e);
-    });
+    scene.addLayer(polygonLayer);
     scene.addLayer(lineLayer);
     this.scene = scene;
   }
@@ -70,3 +64,4 @@ export default class LineDemo extends React.Component {
     );
   }
 }
+

stories/Layers/components/dash.tsx

@@ -16,10 +16,10 @@ export default class DashLineDemo extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         center: [102.602992, 23.107329],
         pitch: 0,
-        style: 'dark',
+        style: 'light',
         zoom: 14,
       }),
     });
@@ -46,8 +46,8 @@ export default class DashLineDemo extends React.Component {
         ].reverse(),
       )
       .style({
-        lineType: 'dash',
-        dashArray: [4, 2, 2, 2],
+        // lineType: 'dash',
+        // dashArray: [4, 2, 2, 2],
         opacity: 1.0,
       });