feat: 修复arc3失效

docs/api/changelog.zh.md

@@ -5,6 +5,23 @@ order: 10
 
 `markdown:docs/common/style.md`
 
+## 20201.05.31 2.4 正式版本
+
+###✨ Features
+
+- 支持高德 2.0 JSAPI
+- 支持 iconfont 字体图标功能
+- 支持 line 纹理
+- 支持图层框选
+
+### 🍏 Improvements
+
+- 支持 arc 弧线反向
+
+
+### 🐞 Bug Fixes
+
+- 修复使用多个文字标注图层时存在的问题
 ## 2020.04.20 2.2 正式版本
 
 ###✨ Features

packages/layers/src/line/models/arc.ts

@@ -6,6 +6,7 @@ import {
   ILayerConfig,
   IModel,
   IModelUniform,
+  ITexture2D
 } from '@antv/l7-core';
 
 import BaseModel from '../../core/BaseModel';
@@ -18,16 +19,25 @@ const lineStyleObj: { [key: string]: number } = {
   dash: 1.0,
 };
 export default class ArcModel extends BaseModel {
+  protected texture: ITexture2D;
   public getUninforms(): IModelUniform {
     const {
       opacity,
       lineType = 'solid',
       dashArray = [10, 5],
       forward = true,
+      lineTexture = false,
+      iconStep = 100,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+
     if (dashArray.length === 2) {
       dashArray.push(0, 0);
     }
+
+    if (this.rendererService.getDirty()) {
+      this.texture.bind();
+    }
+
     return {
       u_opacity: opacity || 1,
       segmentNumber: 30,
@@ -35,11 +45,17 @@ export default class ArcModel extends BaseModel {
       u_dash_array: dashArray,
       u_blur: 0.9,
       u_lineDir: forward ? 1 : -1,
+
+      u_texture: this.texture, // 贴图
+      u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
+      u_icon_step: iconStep,
+      u_textSize: [1024, this.iconService.canvasHeight || 128],
     };
   }
 
   public getAnimateUniforms(): IModelUniform {
     const { animateOption } = this.layer.getLayerConfig() as ILayerConfig;
+    // console.log('animateOption', animateOption)
     return {
       u_aimate: this.animateOption2Array(animateOption as IAnimateOption),
       u_time: this.layer.getLayerAnimateTime(),
@@ -47,9 +63,20 @@ export default class ArcModel extends BaseModel {
   }
 
   public initModels(): IModel[] {
+
+    this.updateTexture();
+    this.iconService.on('imageUpdate', this.updateTexture);
+
     return this.buildModels();
   }
 
+  public clearModels() {
+    if (this.texture) {
+      this.texture.destroy();
+    }
+    this.iconService.off('imageUpdate', this.updateTexture);
+  }
+
   public buildModels(): IModel[] {
     return [
       this.layer.buildLayerModel({
@@ -110,5 +137,50 @@ export default class ArcModel extends BaseModel {
         },
       },
     });
+
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_iconMapUV',
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 2,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+        ) => {
+          const iconMap = this.iconService.getIconMap();
+          const { texture } = feature;
+          const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };
+          return [x, y];
+        },
+      },
+    });
   }
+
+  private updateTexture = () => {
+    const { createTexture2D } = this.rendererService;
+    if (this.texture) {
+      this.texture.update({
+        data: this.iconService.getCanvas(),
+      });
+      this.layer.render();
+      return;
+    }
+    this.texture = createTexture2D({
+      data: this.iconService.getCanvas(),
+      mag: gl.NEAREST,
+      min: gl.NEAREST,
+      premultiplyAlpha: false,
+      width: 1024,
+      height: this.iconService.canvasHeight || 128,
+    });
+  };
 }

packages/layers/src/line/models/arc_3d.ts

@@ -11,7 +11,7 @@ import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
 import line_arc_vert from '../shaders/line_arc_3d_vert.glsl';
-import line_arc_frag from '../shaders/line_arc_frag.glsl';
+import line_arc_frag from '../shaders/line_arc_3d_frag.glsl';
 const lineStyleObj: { [key: string]: number } = {
   solid: 0.0,
   dash: 1.0,

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

@@ -0,0 +1,50 @@
+#define LineTypeSolid 0.0
+#define LineTypeDash 1.0
+#define Animate 0.0
+
+uniform float u_opacity;
+uniform float u_blur : 0.9;
+uniform float u_line_type: 0.0;
+varying vec2 v_normal;
+varying vec4 v_dash_array;
+varying float v_distance_ratio;
+varying vec4 v_color;
+
+uniform float u_time;
+uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+
+#pragma include "picking"
+
+void main() {
+  gl_FragColor = v_color;
+  // float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
+  // float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
+  gl_FragColor.a *= u_opacity;
+  if(u_line_type == LineTypeDash) {
+   float flag = 0.;
+    float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+    if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength <  v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
+      flag = 1.;
+    }
+    gl_FragColor.a *=flag;
+  }
+
+  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;
+      alpha = smoothstep(0., 1., alpha);
+      gl_FragColor.a *= alpha;
+  }
+
+  // if(u_line_texture == LineTexture) { // while load texture
+  //    //v_u; // 水平
+  //   float v = length(v_offset)/(v_a); // 横向
+  //   vec2 uv= v_iconMapUV / u_textSize + vec2(v_u, v) / u_textSize * 64.;
+  //   // gl_FragColor = vec4(v_u, v, 0.0, 1.0);
+  //   // gl_FragColor = vec4(1.0, 0.0, 0.0, v_u);
+  //   gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
+  // } else {
+  //    gl_FragColor = filterColor(gl_FragColor);
+  // }
+  gl_FragColor = filterColor(gl_FragColor);
+}

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

@@ -1,6 +1,7 @@
 #define LineTypeSolid 0.0
 #define LineTypeDash 1.0
 #define Animate 0.0
+#define LineTexture 1.0
 
 uniform float u_opacity;
 uniform float u_blur : 0.9;
@@ -13,12 +14,23 @@ varying vec4 v_color;
 uniform float u_time;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 
-varying float v_u;
+uniform float u_line_texture;
+uniform sampler2D u_texture;
+uniform vec2 u_textSize;
+
+uniform float segmentNumber;
 varying float v_segmentIndex;
+varying float v_arcDistrance;
+varying float v_pixelLen;
+varying float v_a;
+varying vec2 v_offset;
+varying vec2 v_iconMapUV;
 
 #pragma include "picking"
 
 void main() {
+  float animateSpeed = 0.0; // 运动速度
+
   gl_FragColor = v_color;
   // float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
   // float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
@@ -33,32 +45,32 @@ void main() {
   }
 
   if(u_aimate.x == Animate) {
+      animateSpeed = u_time / u_aimate.y;
       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;
       alpha = smoothstep(0., 1., alpha);
       gl_FragColor.a *= alpha;
   }
 
-  // if(u_line_texture == LineTexture) { // while load texture
-  //    //v_u; // 水平
-  //   float v = length(v_offset)/(v_a); // 横向
-  //   vec2 uv= v_iconMapUV / u_textSize + vec2(v_u, v) / u_textSize * 64.;
-  //   // gl_FragColor = vec4(v_u, v, 0.0, 1.0);
-  //   // gl_FragColor = vec4(1.0, 0.0, 0.0, v_u);
-  //   gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
-  // } else {
-  //    gl_FragColor = filterColor(gl_FragColor);
-  // }
-  gl_FragColor = filterColor(gl_FragColor);
-  // gl_FragColor.a = v_u;
-  gl_FragColor = v_color;
+  if(u_line_texture == LineTexture) { // while load texture
+    float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
+    float count = floor(v_arcDistrance/v_pixelLen);
 
-  if(v_segmentIndex < 15.0) {
-    // v_u = (segmentIndex + 1.0)/15.0;
-    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+    float u = 1.0 - fract(arcRadio * count + animateSpeed);
+    float alpha = 1.0;
+    if(u_aimate.x == Animate) {
+      u = gl_FragColor.a;
+      alpha = gl_FragColor.a;
+    }
+    float v = length(v_offset)/(v_a); // 横向
+    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
+    
+    gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
+    gl_FragColor.a *= alpha;
+    
   } else {
-    // v_u = (segmentIndex + 1.0 - 15.0)/15.0;
-    // v_u = 0.0;
-    gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+     gl_FragColor = filterColor(gl_FragColor);
   }
-}
+  // gl_FragColor = filterColor(gl_FragColor);
+
+}

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

@@ -1,7 +1,8 @@
 #define LineTypeSolid 0.0
 #define LineTypeDash 1.0
 #define Animate 0.0
-// #define LineTexture 1.0
+#define LineTexture 1.0
+
 attribute vec4 a_Color;
 attribute vec3 a_Position;
 attribute vec4 a_Instance;
@@ -19,14 +20,15 @@ uniform vec4 u_dash_array: [10.0, 5., 0, 0];
 uniform float u_lineDir: 1.0;
 varying vec4 v_dash_array;
 
-// uniform float u_icon_step: 100;
-// uniform float u_line_texture;
+uniform float u_icon_step: 100;
+uniform float u_line_texture: 0.0;
 varying float v_segmentIndex;
-varying float v_u;
-// varying vec2 v_offset;
-// varying float v_a;
-// attribute vec2 a_iconMapUV;
-// varying vec2 v_iconMapUV;
+varying float v_arcDistrance;
+varying float v_pixelLen;
+varying float v_a;
+varying vec2 v_offset;
+attribute vec2 a_iconMapUV;
+varying vec2 v_iconMapUV;
 
 #pragma include "projection"
 #pragma include "project"
@@ -81,7 +83,7 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
 
 void main() {
   v_color = a_Color;
-  v_segmentIndex = a_Position.x + 1.0;
+  
 
   vec2 source = a_Instance.rg;
   vec2 target =  a_Instance.ba;
@@ -107,32 +109,15 @@ void main() {
   
   vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
 
-  // if(LineTexture == u_line_texture) { // 开启贴图模式
-  //   v_iconMapUV = a_iconMapUV;
-  // float r = (segmentIndex + 1.0)/30.0;
-  // if(segmentIndex < 15.0) {
-  //   // v_u = (segmentIndex + 1.0)/15.0;
-  //   v_color = vec4(1.0, 0.0, 0.0, 1.0);
-  // } else {
-  //   // v_u = (segmentIndex + 1.0 - 15.0)/15.0;
-  //   // v_u = 0.0;
-  //   v_color = vec4(1.0, 1.0, 0.0, 1.0);
-  // }
-  // v_u = fract(r * 2.0);
-  //   float arctotal_Distance = length(source - target);
-  //   float pixelLen = project_pixel(u_icon_step);
-  //   v_u = fract(segmentRatio * (floor(arctotal_Distance/pixelLen)));
-  //   // v_u = fract(segmentIndex/(segmentNumber) * (2.0));
-  //   // v_u = fract(segmentIndex/(segmentNumber - 1.0) * 1.0  + 0.3);
-  //   // v_u = fract(mod(1.0- v_distance_ratio, 0.2)* (1.0/ 0.5));
-  //   // v_u = fract(clamp(v_u, 0.0, 1.0)*2.0);
-  //   // v_u = fract(((segmentIndex * indexDir) / (segmentNumber - 1.)) * (floor(arctotal_Distance/pixelLen)));
-  //   // float s = 6.0;
-  //   // float l = segmentNumber/s;
-  //   // v_u = mod(segmentIndex, l) / (segmentNumber/s);
-  //   v_a = project_pixel(a_Size);
-  //   v_offset = offset + offset * sign(a_Position.y);
-  // }
+  if(LineTexture == u_line_texture) { // 开启贴图模式
+
+    v_segmentIndex = a_Position.x + 1.0;
+    v_arcDistrance = length(source - target);
+    v_iconMapUV = a_iconMapUV;
+    v_pixelLen = project_pixel(u_icon_step);
+    v_a = project_pixel(a_Size);
+    v_offset = offset + offset * sign(a_Position.y);
+  }
   
 
   // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));

stories/Map/components/amap2demo_arcLine3DTex.tsx

@@ -0,0 +1,91 @@
+// @ts-ignore
+import { LineLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_arcLine3DTex extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 40,
+        center: [107.77791556935472, 35.443286920228644],
+        zoom: 2.9142882493605033,
+        viewMode: '3D',
+        style: "dark"
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      scene.addImage(
+        '02',
+        'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
+      );
+
+      let data = [
+        {
+          lng1: 75.76171875,
+          lat1: 36.31512514748051,
+          lng2: 46.23046874999999,
+          lat2: 52.802761415419674,
+        },
+      ];
+
+      const layer = new LineLayer({
+        blend: 'normal',
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'lng1',
+            y: 'lat1',
+            x1: 'lng2',
+            y1: 'lat2',
+          },
+        })
+        .size(10)
+        .shape('arc3d')
+        // .texture('02')
+        .color('#8C1EB2')
+        .style({
+          // forward: false,
+          // lineTexture: true, // 开启线的贴图功能
+          // iconStep: 100, // 设置贴图纹理的间距
+          // // opacity: 0
+        })
+      // .animate({
+      //   duration: 50,
+      //   interval: 0.3,
+      //   trailLength: 0.1,
+      // });
+      scene.addLayer(layer);
+
+
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_arcLineTex.tsx

@@ -19,6 +19,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
         center: [107.77791556935472, 35.443286920228644],
         zoom: 2.9142882493605033,
         viewMode: '3D',
+        style: "dark"
       }),
     });
     this.scene = scene;
@@ -26,7 +27,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
     scene.on('loaded', () => {
       scene.addImage(
         '02',
-        'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
+        'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
       );
 
       let data = [
@@ -50,16 +51,21 @@ export default class Amap2demo_arcLineTex extends React.Component {
             y1: 'lat2',
           },
         })
-        .size(10)
+        .size(20)
         .shape('arc')
-        // .texture('02')
+        .texture('02')
         .color('#8C1EB2')
         .style({
           forward: false,
-          // lineTexture: true, // 开启线的贴图功能
-          // iconStep: 100, // 设置贴图纹理的间距
-        });
-      // .animate(true);
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 100, // 设置贴图纹理的间距
+          opacity: 0
+        })
+      .animate({
+        duration: 50,
+        interval: 0.3,
+        trailLength: 0.1,
+      });
       scene.addLayer(layer);
     });
   }

stories/Map/map.stories.tsx

@@ -21,6 +21,7 @@ import Amap2demo_lineHeight from "./components/amap2demo_lineHeight"
 import Amap2demo_lineDash from "./components/amap2demo_lineDash"
 import Amap2demo_arcLineDir from "./components/amap2demo_arcLineDir"
 import Amap2demo_arcLineTex from './components/amap2demo_arcLineTex';
+import Amap2demo_arcLine3DTex from './components/amap2demo_arcLine3DTex';
 import Amap2demo_lineStreet from './components/amap2demo_lineStreet';
 import Amap2demo_road from './components/amap2demo_road';
 import Amap2demo_road2 from './components/amap2demo_road2';
@@ -67,8 +68,11 @@ storiesOf('地图方法', module)
         .add('高德地图2.0 line_arc3d_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
         .add('高德地图2.0 lineHeight', () => <Amap2demo_lineHeight />)
         .add('高德地图2.0 lineDash', () => <Amap2demo_lineDash />)
+
         .add('高德地图2.0 line_arcDir', () => <Amap2demo_arcLineDir />)
         .add('高德地图2.0 line_arcTex', () => <Amap2demo_arcLineTex />)
+        .add('高德地图2.0 line_arc3DTex', () => <Amap2demo_arcLine3DTex />)
+
         .add('高德地图2.0 line_winds', () => <Amap2demo_winds />)
         .add('高德地图2.0 line_Street', () => <Amap2demo_lineStreet />)
         .add('高德地图2.0 road', () => <Amap2demo_road />)