fix: line opacity & text stroke opacity

package.json

@@ -62,7 +62,7 @@
     "eslint": "^6.6.0",
     "eslint-config-egg": "^7.5.1",
     "eslint-plugin-html": "^6.0.0",
-    "gatsby": "^2.17.7",
+    "gatsby": "2.19.5",
     "gatsby-plugin-google-analytics": "^2.1.27",
     "gatsby-remark-prettier": "^1.0.0",
     "geotiff": "^1.0.0-beta.6",
@@ -119,7 +119,7 @@
   "scripts": {
     "start": "yarn run site:clean && yarn run site:develop",
     "site:develop": "cross-env BABEL_ENV=site gatsby develop --open -H 0.0.0.0",
-    "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths",
+    "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths --no-uglify",
     "site:clean": "gatsby clean",
     "site:deploy": "yarn run site:build && gh-pages -d public",
     "site:publish": "gh-pages -d public",

packages/core/src/services/layer/LayerService.ts

@@ -72,6 +72,7 @@ export default class LayerService implements ILayerService {
     //
     this.alreadyInRendering = true;
     this.clear();
+    this.updateRenderOrder();
     this.layers
       .filter((layer) => layer.inited)
       .filter((layer) => layer.isVisible())

packages/layers/src/core/BaseLayer.ts

@@ -173,6 +173,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
     super();
     this.name = config.name || this.id;
+    this.zIndex = config.zIndex || 0;
     this.rawConfig = config;
   }
 

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

@@ -24,17 +24,17 @@ 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)) * u_opacity;
-  // gl_FragColor.a *= blur;
+  float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
+  gl_FragColor.a *= blur * u_opacity;
 
   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;
-      gl_FragColor.a *= alpha * blur;
+      gl_FragColor.a *= alpha;
   }
  // dash line
   if(u_line_type == LineTypeDash) {
-    gl_FragColor.a *= blur  * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
+    gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
   }
 
   gl_FragColor = filterColor(gl_FragColor);

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

@@ -89,13 +89,16 @@ export default class TextModel extends BaseModel {
     const {
       fontWeight = 800,
       fontFamily = 'sans-serif',
+      opacity = 1.0,
       stroke = '#fff',
       strokeWidth = 0,
+      strokeOpacity = 1,
     } = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
     this.updateTexture();
     const { canvas } = this.fontService;
     return {
-      u_opacity: 1.0,
+      u_opacity: opacity,
+      u_stroke_opacity: strokeOpacity,
       u_sdf_map: this.texture,
       u_stroke: rgb2arr(stroke),
       u_halo_blur: 0.5,

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

@@ -4,6 +4,7 @@ uniform sampler2D u_sdf_map;
 uniform float u_gamma_scale : 0.5;
 uniform float u_font_size : 24;
 uniform float u_opacity : 1.0;
+uniform float u_stroke_opacity: 1.0;
 uniform vec4 u_stroke : [0, 0, 0, 1];
 uniform float u_strokeWidth : 2.0;
 uniform float u_halo_blur : 0.5;
@@ -27,6 +28,6 @@ void main() {
 
   highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
 
-  gl_FragColor = mix(v_color * u_opacity, u_stroke, smoothstep(0., 0.5, 1. - dist)) * alpha;
+  gl_FragColor = mix(v_color * u_opacity, u_stroke * u_stroke_opacity, smoothstep(0., 0.5, 1. - dist)) * alpha;
   gl_FragColor = filterColor(gl_FragColor);
 }

stories/Layers/components/Arc2DLine.tsx

@@ -42,7 +42,7 @@ export default class Arc2DLineDemo extends React.Component {
         trailLength: 0.4,
       })
       .style({
-        opacity: 0.6,
+        opacity: 0.1,
       });
     scene.addLayer(lineLayer);
     scene.render();

stories/Layers/components/Arcline.tsx

@@ -53,6 +53,7 @@ export default class ArcLineDemo extends React.Component {
       })
       .style({
         lineType: 'dash',
+        opacity: 0.5,
       });
     scene.addLayer(lineLayer);
     scene.render();

stories/Layers/components/Line.tsx

@@ -36,13 +36,16 @@ export default class LineDemo extends React.Component {
       .shape('line')
       .active(true)
       .color('color', (v) => {
-        return `rgb(${v[0]})`;
+        return `rgb(${v})`;
       })
       .animate({
         enable: true,
         interval: 0.5,
         trailLength: 0.4,
         duration: 4,
+      })
+      .style({
+        opacity: 1.0,
       });
 
     scene.addLayer(lineLayer);

stories/Layers/components/Text.tsx

@@ -65,8 +65,9 @@ export default class TextLayerDemo extends React.Component {
     const styleOptions = {
       textAnchor: 'center',
       strokeWidth: 1,
+      opacity: 1,
     };
-    const rasterFolder = gui.addFolder('栅格可视化');
+    const rasterFolder = gui.addFolder('文本可视化');
     rasterFolder
       .add(styleOptions, 'textAnchor', [
         'center',
@@ -85,6 +86,23 @@ export default class TextLayerDemo extends React.Component {
         });
         scene.render();
       });
+
+    rasterFolder
+      .add(styleOptions, 'strokeWidth', 0, 10)
+      .onChange((strokeWidth: number) => {
+        pointLayer.style({
+          strokeWidth,
+        });
+        scene.render();
+      });
+    rasterFolder
+      .add(styleOptions, 'opacity', 0, 1)
+      .onChange((opacity: number) => {
+        pointLayer.style({
+          opacity,
+        });
+        scene.render();
+      });
     // });
   }
 

stories/Layers/components/dash.tsx

@@ -43,7 +43,8 @@ export default class DashLineDemo extends React.Component {
         ].reverse(),
       )
       .style({
-        lineType: 'dash',
+        // lineType: 'dash',
+        opacity: 0.5,
       });
 
     scene.addLayer(lineLayer);