From 2c002abf53fb27f4f09f75e7deeb2e5f71052d81 Mon Sep 17 00:00:00 2001
From: thinkinggis <lzx199065@gmail.com>
Date: Tue, 21 Jan 2020 17:19:30 +0800
Subject: [PATCH] fix: hightlight opacity

---
 packages/core/src/shaders/picking.frag.glsl |  8 +-
 stories/Source/Map.stories.tsx              |  4 +-
 stories/Source/components/updatedata.tsx    | 86 +++++++++++++++++++++
 3 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 stories/Source/components/updatedata.tsx

diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl
index 0e58d7eb15..5b1864759e 100644
--- a/packages/core/src/shaders/picking.frag.glsl
+++ b/packages/core/src/shaders/picking.frag.glsl
@@ -16,11 +16,11 @@ vec4 filterHighlightColor(vec4 color) {
   if (selected) {
     vec4 highLightColor = u_HighlightColor * COLOR_SCALE;
 
-    float highLightAlpha = highLightColor.a;
-    float highLightRatio = highLightAlpha / (highLightAlpha + color.a * (1.0 - highLightAlpha));
+    // float highLightAlpha = highLightColor.a;
+    // float highLightRatio = highLightAlpha / (highLightAlpha + color.a * (1.0 - highLightAlpha));
 
-    vec3 resultRGB = mix(color.rgb, highLightColor.rgb, highLightRatio);
-    return vec4(resultRGB, color.a);
+    // vec3 resultRGB = mix(color.rgb, highLightColor.rgb, highLightRatio);
+    return highLightColor;
   } else {
     return color;
   }
diff --git a/stories/Source/Map.stories.tsx b/stories/Source/Map.stories.tsx
index 604e2ee1e9..87b0bd272b 100644
--- a/stories/Source/Map.stories.tsx
+++ b/stories/Source/Map.stories.tsx
@@ -1,10 +1,12 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import MultiPolygon from './components/multiPolygon';
 import MultiLine from './components/multiLine';
+import MultiPolygon from './components/multiPolygon';
+import UpdatePolygon from './components/updatedata';
 // @ts-ignore
 import notes from './Map.md';
 // @ts-ignore
 storiesOf('数据', module)
   .add('multiPolygon', () => <MultiPolygon />, {})
+  .add('updatePolygon', () => <UpdatePolygon />, {})
   .add('MultiLine', () => <MultiLine />, {});
diff --git a/stories/Source/components/updatedata.tsx b/stories/Source/components/updatedata.tsx
new file mode 100644
index 0000000000..b462e4bab7
--- /dev/null
+++ b/stories/Source/components/updatedata.tsx
@@ -0,0 +1,86 @@
+import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
+import { 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('')
+  );
+}
+
+export default class UpdatePolygon extends React.Component {
+  private gui: dat.GUI;
+  private $stats: Node;
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        style: 'dark',
+        center: [104.288144, 31.239692],
+        zoom: 4.4,
+      }),
+    });
+
+    scene.on('loaded', async () => {
+      // https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json
+      const response = await fetch(
+        'https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json',
+      );
+      const data = await response.json();
+      const highlightLayer = new PolygonLayer({})
+        .source({
+          type: 'FeatureCollection',
+          features: [],
+        })
+        .shape('fill')
+        .color('red'); // 20% 透明度;
+      const polygonLayer = new PolygonLayer({})
+        .source(data)
+        .shape('fill')
+        .color('rgba(255,255,255,0.2)') // 20% 透明度
+        .select({
+          color: 'red', // 选中后的颜色同样会有透明度
+        })
+        .style({
+          opacity: 1,
+        });
+      // polygonLayer.on('click', (e) => {
+      //   highlightLayer.setData({
+      //     type: 'FeatureCollection',
+      //     features: [e.feature],
+      //   });
+      // });
+      const lineLayer = new LineLayer({})
+        .source(data)
+        .shape('line')
+        .size(1)
+        .color('#0ffbc4');
+
+      scene.addLayer(polygonLayer);
+      scene.addLayer(highlightLayer);
+      scene.addLayer(lineLayer);
+      this.scene = scene;
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}