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

2021-12-27 19:11:51 +08:00 · 2021-12-27 19:11:51 +08:00 · 6585268116
parent b1882ab660 9727081810
commit 6585268116
8 changed files with 189 additions and 129 deletions
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@ -189,6 +189,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
  // TODO: layer 保底颜色
  private bottomColor = 'rgba(0, 0, 0, 0)';

+  private isDestroied: boolean = false;
+
  // private pickingPassRender: IPass<'pixelPicking'>;

  constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
@ -789,12 +791,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
  }

  public destroy() {
+    // debugger
+    if (this.isDestroied) {
+      return;
+    }
    this.hooks.beforeDestroy.call();
    // 清除sources事件
    this.layerSource.off('update', this.sourceEvent);

    this.multiPassRenderer.destroy();
-
+    // console.log(this.styleAttributeService.getAttributes())
    // 清除所有属性以及关联的 vao == 销毁所有 => model this.models.forEach((model) => model.destroy());
    this.styleAttributeService.clearAllAttributes();

@ -803,7 +809,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
    this.hooks.afterDestroy.call();

    // TODO: 清除各个图层自定义的 models 资源
-    this.layerModel?.clearModels();
+    // this.layerModel?.clearModels();

    this.models = [];

@ -822,6 +828,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
    this.removeAllListeners();
    // 解绑图层容器中的服务
    // this.container.unbind(TYPES.IStyleAttributeService);
+
+    this.isDestroied = true;
  }
  public clear() {
    this.styleAttributeService.clearAllAttributes();
--- a/packages/layers/src/core/interface.ts
+++ b/packages/layers/src/core/interface.ts
@ -20,4 +20,7 @@ export interface ILineLayerStyleOptions {

  globalArcHeight?: number; // 可选参数、地球模式下 3D 弧线的高度
  vertexHeightScale?: number; // 可选参数、lineLayer vertex height scale
+
+  borderWidth?: number; // 可选参数 线边框宽度
+  borderColor?: string; // 可选参数 线边框颜色
 }
--- a/packages/layers/src/line/models/line.ts
+++ b/packages/layers/src/line/models/line.ts
@ -34,6 +34,8 @@ export default class LineModel extends BaseModel {
      lineTexture = false,
      iconStep = 100,
      vertexHeightScale = 20.0,
+      borderWidth = 0.0,
+      borderColor = '#ccc',
    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
    if (dashArray.length === 2) {
      dashArray.push(0, 0);
@ -98,6 +100,10 @@ export default class LineModel extends BaseModel {
      u_icon_step: iconStep,
      u_textSize: [1024, this.iconService.canvasHeight || 128],

+      // line border 参数
+      u_borderWidth: borderWidth,
+      u_borderColor: rgb2arr(borderColor),
+
      // 渐变色支持参数
      u_linearColor: useLinearColor,
      u_sourceColor: sourceColorArr,
--- a/packages/layers/src/line/shaders/line_frag.glsl
+++ b/packages/layers/src/line/shaders/line_frag.glsl
@ -6,8 +6,10 @@ uniform float u_blur : 0.99;
 uniform float u_line_type: 0.0;
 uniform float u_opacity : 1.0;
 uniform float u_textureBlend;
+
+uniform float u_borderWidth: 0.0;
+uniform vec4 u_borderColor;
 varying vec4 v_color;
-// varying vec2 v_normal;

 // line texture
 uniform float u_line_texture;
@ -69,7 +71,7 @@ void main() {
    float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
    float v = styleMappingMat[3].a;  // 线图层贴图部分的 v 坐标值

-    v = max(smoothstep(0.95, 1.0, v), v);
+    // v = max(smoothstep(0.95, 1.0, v), v);
    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
    
    // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v)));
@ -87,19 +89,34 @@ void main() {
        gl_FragColor = filterColor(pattern);
    }
  } else {
+
+    float v = styleMappingMat[3].a;
+    float borderWidth = min(0.5, u_borderWidth);
+    // 绘制 border
+    if(borderWidth > 0.0) {
+      float borderOuterWidth = borderWidth/2.0;
+
+      if(v >= 1.0 - borderWidth || v <= borderWidth) {
+        if(v > borderWidth) {
+          float linear = smoothstep(0.0, 1.0, (v - (1.0 - borderWidth))/borderWidth);
+          gl_FragColor.rgb = mix(gl_FragColor.rgb, u_borderColor.rgb, linear);
+        } else if(v <= borderWidth) {
+          float linear = smoothstep(0.0, 1.0, v/borderWidth);
+          gl_FragColor.rgb = mix(u_borderColor.rgb, gl_FragColor.rgb, linear);
+        }
+      }
+
+      if(v < borderOuterWidth) {
+        gl_FragColor.a = mix(0.0, gl_FragColor.a, v/borderOuterWidth);
+      } else if(v > 1.0 - borderOuterWidth) {
+        gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - borderOuterWidth))/borderOuterWidth);
+      }
+    }
+
    gl_FragColor = filterColor(gl_FragColor);
  }

-  // gl_FragColor = (vec4(1.0, 0.0, 0.0, 1.0));
- 
-  // if(rV < r || rV > 1.0 - r) {
-  //   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
-  // } 
-  // if(v > 0.9) {
-    // gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
-  // } else if(v < 0.1) {
-  //   gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
-  // }
-
-  // gl_FragColor = filterColor(gl_FragColor);
+  
+  
+  
 }
--- a/packages/layers/src/line/shaders/line_vert.glsl
+++ b/packages/layers/src/line/shaders/line_vert.glsl
@ -28,7 +28,6 @@ uniform float u_vertexScale: 1.0;

 varying vec4 v_color;
 varying vec4 v_dash_array;
-varying vec2 v_normal;

 // texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
 varying vec2 v_iconMapUV;
@ -85,8 +84,6 @@ void main() {
  if(u_aimate.x == Animate || u_linearColor == 1.0) {
      d_distance_ratio = a_Distance / a_Total_Distance;
  }
-  v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));
-
  v_color = a_Color;

  vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
--- a/stories/Map/components/amap2demo_road2.tsx
+++ b/stories/Map/components/amap2demo_road2.tsx
@ -15,9 +15,10 @@ export default class Amap2demo_road2 extends React.Component {
      id: 'map',
      map: new GaodeMap({
        center: [120.165, 30.25],
-        pitch: 50,
-        zoom: 16.8,
+        pitch: 0,
+        zoom: 15,
        viewMode: '3D',
+        style: 'dark',
      }),
    });
    this.scene = scene;
@ -37,7 +38,7 @@ export default class Amap2demo_road2 extends React.Component {
            .source(data)
            .size(5)
            .shape('line')
-            .texture('02')
+            // .texture('02')
            // .color('#ccc')
            .color('rgb(20, 180, 90)')
            // .animate({
@ -46,10 +47,13 @@ export default class Amap2demo_road2 extends React.Component {
            //   trailLength: 2, // 流线长度
            // })
            .style({
+              borderWidth: 0.35,
+              borderColor: '#fff',
              // opacity: 0.5,
-              lineTexture: true, // 开启线的贴图功能
-              iconStep: 80, // 设置贴图纹理的间距
-            });
+              // lineTexture: true, // 开启线的贴图功能
+              // iconStep: 80, // 设置贴图纹理的间距
+            })
+            .active(true);
          scene.addLayer(layer);
        });
    });
--- a/stories/React/components/world_ncov_fill.tsx
+++ b/stories/React/components/world_ncov_fill.tsx
@ -65,6 +65,7 @@ function joinData(geodata: any, ncovData: any) {
 }

 export default React.memo(function Map() {
+  const [showScene, setShowScene] = React.useState(true);
  const [data, setData] = React.useState();
  const [popupInfo, setPopupInfo] = React.useState<{
    lnglat: number[];
@ -92,115 +93,128 @@ export default React.memo(function Map() {
    };
    fetchData();
  }, []);
+
+  setTimeout(() => {
+    // setShowScene(false)
+  }, 3000);
+
  return (
    <>
-      <AMapScene
-        map={{
-          center: [110.19382669582967, 50.258134],
-          pitch: 0,
-          style: 'blank',
-          zoom: 10,
-        }}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      >
-        {popupInfo && (
-          <Popup lnglat={popupInfo.lnglat}>
-            {popupInfo.feature.name}
-            <ul
+      {showScene && (
+        <AMapScene
+          map={{
+            center: [110.19382669582967, 50.258134],
+            pitch: 0,
+            style: 'blank',
+            zoom: 10,
+          }}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+          onSceneLoaded={(scene) => {
+            // setTimeout(() => {
+            //   scene.removeAllLayer()
+            // }, 3000)
+            // setTimeout(() => scene.destroy(), 5000)
+          }}
+        >
+          {popupInfo && (
+            <Popup lnglat={popupInfo.lnglat}>
+              {popupInfo.feature.name}
+              <ul
+                style={{
+                  margin: 0,
+                }}
+              >
+                <li>
+                  <button
+                    onClick={() => {
+                      alert('test');
+                    }}
+                    value="点击"
+                  >
+                    点击
+                  </button>
+                  现有确诊:{popupInfo.feature.currentConfirmedCount}
+                </li>
+                <li>累计确诊:{popupInfo.feature.confirmedCount}</li>
+                <li>治愈:{popupInfo.feature.curedCount}</li>
+                <li>死亡:{popupInfo.feature.deadCount}</li>
+              </ul>
+            </Popup>
+          )}
+          {data && [
+            <PolygonLayer
+              key={'1'}
+              options={{
+                autoFit: true,
+                fitBoundsOptions: {
+                  duration: 0,
+                  animate: false,
+                },
+              }}
+              source={{
+                data,
+              }}
+              scale={{
+                values: {
+                  confirmedCount: {
+                    type: 'quantile',
+                  },
+                },
+              }}
+              active={{
+                option: {
+                  color: '#0c2c84',
+                },
+              }}
+              color={{
+                field: 'confirmedCount',
+                values: [
+                  '#732200',
+                  '#CC3D00',
+                  '#FF6619',
+                  '#FF9466',
+                  '#FFC1A6',
+                  '#FCE2D7',
+                ].reverse(),
+              }}
+              shape={{
+                values: 'fill',
+              }}
              style={{
-                margin: 0,
+                opacity: 1,
              }}
            >
-              <li>
-                <button
-                  onClick={() => {
-                    alert('test');
-                  }}
-                  value="点击"
-                >
-                  点击
-                </button>
-                现有确诊:{popupInfo.feature.currentConfirmedCount}
-              </li>
-              <li>累计确诊:{popupInfo.feature.confirmedCount}</li>
-              <li>治愈:{popupInfo.feature.curedCount}</li>
-              <li>死亡:{popupInfo.feature.deadCount}</li>
-            </ul>
-          </Popup>
-        )}
-        {data && [
-          <PolygonLayer
-            key={'1'}
-            options={{
-              autoFit: true,
-              fitBoundsOptions: {
-                duration: 0,
-                animate: false,
-              },
-            }}
-            source={{
-              data,
-            }}
-            scale={{
-              values: {
-                confirmedCount: {
-                  type: 'quantile',
-                },
-              },
-            }}
-            active={{
-              option: {
-                color: '#0c2c84',
-              },
-            }}
-            color={{
-              field: 'confirmedCount',
-              values: [
-                '#732200',
-                '#CC3D00',
-                '#FF6619',
-                '#FF9466',
-                '#FFC1A6',
-                '#FCE2D7',
-              ].reverse(),
-            }}
-            shape={{
-              values: 'fill',
-            }}
-            style={{
-              opacity: 1,
-            }}
-          >
-            <LayerEvent type="click" handler={showPopup} />
-            {/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
-          </PolygonLayer>,
-          ,
-          <LineLayer
-            key={'2'}
-            source={{
-              data,
-            }}
-            size={{
-              values: 0.6,
-            }}
-            color={{
-              values: '#aaa',
-            }}
-            shape={{
-              values: 'line',
-            }}
-            style={{
-              opacity: 1,
-            }}
-          />,
-        ]}
-      </AMapScene>
+              <LayerEvent type="click" handler={showPopup} />
+              {/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
+            </PolygonLayer>,
+            ,
+            <LineLayer
+              key={'2'}
+              source={{
+                data,
+              }}
+              size={{
+                values: 0.6,
+              }}
+              color={{
+                values: '#aaa',
+              }}
+              shape={{
+                values: 'line',
+              }}
+              style={{
+                opacity: 1,
+              }}
+            />,
+          ]}
+        </AMapScene>
+      )}
    </>
  );
 });
--- a/tbeta.sh
+++ b/tbeta.sh
@ -0,0 +1,11 @@
+tnpm dist-tag add @antv/l7-component@2.6.20  beta
+tnpm dist-tag add @antv/l7-core@2.6.20  beta
+tnpm dist-tag add @antv/l7@2.6.20  beta
+tnpm dist-tag add @antv/l7-layers@2.6.20  beta
+tnpm dist-tag add @antv/l7-map@2.6.20  beta
+tnpm dist-tag add @antv/l7-maps@2.6.20  beta
+tnpm dist-tag add @antv/l7-renderer@2.6.20  beta
+tnpm dist-tag add @antv/l7-scene@2.6.20  beta
+tnpm dist-tag add @antv/l7-source@2.6.20  beta
+tnpm dist-tag add @antv/l7-three@2.6.20  beta
+tnpm dist-tag add @antv/l7-utils@2.6.20  beta