fix: fix build layer opactiy

examples/react/covid/index.en.md

@@ -1,4 +1,6 @@
 ---
-title: COVID-19 Map
+title: COVID-19 Map 
 order: 0
 ---
+[![github](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ)](https://github.com/antvis/L7)
+

examples/react/covid/index.zh.md

@@ -2,3 +2,4 @@
 title: COVID-19 地图
 order: 0
 ---
+[![github](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ)](https://github.com/antvis/L7)

packages/layers/src/citybuliding/shaders/build_frag.glsl

@@ -42,8 +42,6 @@ float sdRect(vec2 p, vec2 sz) {
 
 void main() {
   gl_FragColor = v_Color;
-  gl_FragColor.a *= u_opacity;
-
   vec3 baseColor = u_baseColor.xyz;
   vec3 brightColor = u_brightColor.xyz;
   vec3 windowColor = u_windowColor.xyz;
@@ -100,5 +98,6 @@ void main() {
 
         gl_FragColor = vec4(foggedColor,1.0);
   }
+  gl_FragColor.a *= u_opacity;
   gl_FragColor = filterColor(gl_FragColor);
 }

stories/Draw/Components/DrawPolygon.tsx

@@ -0,0 +1,203 @@
+import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox, GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+function convertRGB2Hex(rgb: number[]) {
+  return (
+    '#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
+  );
+}
+function calcMid(data1: number[], data2: number[]) {
+  return {
+    x: (data1[0] + data2[0]) / 2,
+    y: (data1[1] + data2[1]) / 2,
+  };
+}
+export default class MultiPolygon extends React.Component {
+  private gui: dat.GUI;
+  private $stats: Node;
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const data = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [108.6328125, 40.17887331434696],
+                [92.28515625, 37.3002752813443],
+                [99.31640625, 25.799891182088334],
+                [111.26953125, 23.885837699862005],
+                [115.83984375, 36.87962060502676],
+                [108.6328125, 40.17887331434696],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+    const data2 = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [117.59765625, 45.9511496866914],
+                [120.76171875, 35.60371874069731],
+                [129.0234375, 30.90222470517144],
+                [135.703125, 37.43997405227057],
+                [135.703125, 45.9511496866914],
+                [117.59765625, 45.9511496866914],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 0,
+        style: 'dark',
+        center: [121.775374, 31.31067],
+        zoom: 2,
+      }),
+    });
+    const layer = new PolygonLayer()
+      .source(data)
+      .shape('fill')
+      .color('#3bb2d0')
+      .style({
+        opacity: 0.1,
+      });
+    const line = new PolygonLayer()
+      .source(data)
+      .shape('line')
+      .size(1)
+      .color('#3bb2d0')
+      .style({
+        opacity: 1,
+      });
+    scene.addLayer(layer);
+    scene.addLayer(line);
+
+    const activelayer = new PolygonLayer()
+      .source(data2)
+      .shape('fill')
+      .color('#fbb03b')
+      .style({
+        opacity: 0.1,
+      });
+    const activeline = new PolygonLayer()
+      .source(data2)
+      .shape('line')
+      .size(1)
+      .color('#fbb03b')
+      .style({
+        opacity: 1,
+        lineType: 'dash',
+        dashArray: [2, 2],
+      });
+    scene.addLayer(activelayer);
+    scene.addLayer(activeline);
+    scene.addLayer(this.addPoint(data2));
+    scene.addLayer(this.addActivePoint());
+    scene.addLayer(this.addMidPoint(data2));
+  }
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+  private addPoint(data: any) {
+    const pointData = data.features[0].geometry.coordinates[0].map(
+      (coor: any) => {
+        return {
+          x: coor[0],
+          y: coor[1],
+        };
+      },
+    );
+    return new PointLayer()
+      .source(pointData, {
+        parser: {
+          type: 'json',
+          x: 'x',
+          y: 'y',
+        },
+      })
+      .shape('circle')
+      .color('#fbb03b')
+      .size(3)
+      .style({
+        stroke: '#fff',
+        strokeWidth: 2,
+      });
+  }
+
+  private addMidPoint(data: any) {
+    const coords = data.features[0].geometry.coordinates[0];
+    const midPoint = [];
+    for (let i = 0; i < coords.length - 1; i++) {
+      midPoint.push(calcMid(coords[i], coords[i + 1]));
+    }
+    return new PointLayer()
+      .source(midPoint, {
+        parser: {
+          type: 'json',
+          x: 'x',
+          y: 'y',
+        },
+      })
+      .shape('circle')
+      .color('#fbb03b')
+      .size(2);
+  }
+  private addActivePoint() {
+    return new PointLayer()
+      .source(
+        [
+          {
+            x: 117.59765625,
+            y: 45.9511496866914,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'x',
+            y: 'y',
+          },
+        },
+      )
+      .shape('circle')
+      .color('#fbb03b')
+      .size(5)
+      .style({
+        stroke: '#fff',
+        strokeWidth: 2,
+      });
+  }
+}

stories/Draw/Draw.stories.tsx

@@ -0,0 +1,5 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import DrawPolygon from './Components/DrawPolygon';
+
+storiesOf('绘制', module).add('绘制面', () => <DrawPolygon />, {});

stories/Layers/components/Point.tsx

@@ -12,50 +12,52 @@ export default class Point3D extends React.Component {
   }
 
   public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
-    );
-    const pointsData = await response.json();
-
     const scene = new Scene({
-      id: document.getElementById('map') as HTMLDivElement,
+      id: 'map',
       map: new GaodeMap({
-        center: [120.19382669582967, 30.258134],
+        style: 'light',
+        center: [-121.24357, 37.58264],
         pitch: 0,
-        style: 'dark',
-        zoom: 0,
+        zoom: 6.45,
       }),
     });
     scene.on('loaded', () => {
-      const pointLayer = new PointLayer({})
-        .source(pointsData, {
-          cluster: false,
-        })
-        .scale({
-          size: {
-            type: 'power',
-            field: 'mag',
-          },
-          color: {
-            type: 'linear',
-            field: 'mag',
-          },
-        })
-        .shape('circle')
-        .size('mag', [2, 8, 14, 20, 26, 32, 40])
-        .animate(false)
-        .active(true)
-        .color('mag', ['red', 'blue', 'yellow', 'green'])
-        .style({
-          opacity: 0.5,
-          strokeWidth: 1,
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
+      )
+        .then((res) => res.text())
+        .then((data) => {
+          const pointLayer = new PointLayer({})
+            .source(data, {
+              parser: {
+                type: 'csv',
+                x: 'Longitude',
+                y: 'Latitude',
+              },
+            })
+            .shape('circle')
+            .size(8)
+            .active(true)
+            .color('Magnitude', [
+              '#0A3663',
+              '#1558AC',
+              '#3771D9',
+              '#4D89E5',
+              '#64A5D3',
+              '#72BED6',
+              '#83CED6',
+              '#A6E1E0',
+              '#B8EFE2',
+              '#D7F9F0',
+            ])
+            .style({
+              opacity: 1,
+              strokeWidth: 0,
+            });
+
+          scene.addLayer(pointLayer);
+          this.scene = scene;
         });
-      scene.addLayer(pointLayer);
-      const hander = () => {
-        console.log('click');
-      };
-      scene.on('click', hander);
-      this.scene = scene;
     });
   }
 

stories/Layers/components/citybuilding.tsx

@@ -34,7 +34,7 @@ export default class CityBuildingLayerDemo extends React.Component {
         enable: false,
       })
       .style({
-        opacity: 1.0,
+        opacity: 0.7,
         baseColor: 'rgb(16,16,16)',
         windowColor: 'rgb(30,60,89)',
         brightColor: 'rgb(255,176,38)',