fix: 修复冲突

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

lerna.json

@@ -14,7 +14,7 @@
       "message": "chore: publish"
     }
   },
-  "version": "2.4.0",
+  "version": "2.4.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,8 +25,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.4.0",
-    "@antv/l7-utils": "2.4.0",
+    "@antv/l7-core": "^2.4.1",
+    "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",

packages/component/src/control/BaseControl.ts

@@ -44,6 +44,7 @@ export default class Control extends EventEmitter {
       name: `${controlId++}`,
     };
   }
+
   public setPosition(position: PositionName = 'bottomright') {
     // 考虑组件的自动布局，需要销毁重建
     const controlService = this.controlService;

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-core",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,7 +24,7 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-utils": "2.4.0",
+    "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",

packages/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,12 +25,12 @@
   "author": "antv",
   "license": "MIT",
   "dependencies": {
-    "@antv/l7-component": "2.4.0",
-    "@antv/l7-core": "2.4.0",
-    "@antv/l7-layers": "2.4.0",
-    "@antv/l7-maps": "2.4.0",
-    "@antv/l7-scene": "2.4.0",
-    "@antv/l7-utils": "2.4.0",
+    "@antv/l7-component": "^2.4.1",
+    "@antv/l7-core": "^2.4.1",
+    "@antv/l7-layers": "^2.4.1",
+    "@antv/l7-maps": "^2.4.1",
+    "@antv/l7-scene": "^2.4.1",
+    "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.4.0';
+const version = '2.4.1';
 export { version };

packages/layers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,10 +24,10 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "2.4.0",
-    "@antv/l7-layers": "2.4.0",
-    "@antv/l7-source": "2.4.0",
-    "@antv/l7-utils": "2.4.0",
+    "@antv/l7-core": "^2.4.1",
+    "@antv/l7-layers": "^2.4.1",
+    "@antv/l7-source": "^2.4.1",
+    "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.2.0",
     "@turf/meta": "^6.0.2",

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,19 @@ 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 +136,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

@@ -10,8 +10,8 @@ import {
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
+import line_arc_frag from '../shaders/line_arc_3d_frag.glsl';
 import line_arc_vert from '../shaders/line_arc_3d_vert.glsl';
-import line_arc_frag from '../shaders/line_arc_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,9 +14,23 @@ varying vec4 v_color;
 uniform float u_time;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 
+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));
@@ -30,21 +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);
-}
+  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);
+
+    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 {
+     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,13 +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;
-// varying float v_u;
-// varying vec2 v_offset;
-// varying float v_a;
-// attribute vec2 a_iconMapUV;
-// varying vec2 v_iconMapUV;
+uniform float u_icon_step: 100;
+uniform float u_line_texture: 0.0;
+varying float v_segmentIndex;
+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"
@@ -80,6 +83,7 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
 
 void main() {
   v_color = a_Color;
+  
 
   vec2 source = a_Instance.rg;
   vec2 target =  a_Instance.ba;
@@ -105,23 +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;
+  if(LineTexture == u_line_texture) { // 开启贴图模式
 
-  //   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);
-  // }
+    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));

packages/map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-map",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "l7 map",
   "keywords": [],
   "author": "thinkinggis <lzx199065@gmail.com>",
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/antvis/L7#readme",
   "dependencies": {
-    "@antv/l7-utils": "2.4.0",
+    "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "@mapbox/point-geometry": "^0.1.0",
     "@mapbox/unitbezier": "^0.0.0",

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-maps",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -27,9 +27,9 @@
   "license": "ISC",
   "dependencies": {
     "@amap/amap-jsapi-loader": "^0.0.3",
-    "@antv/l7-core": "2.4.0",
-    "@antv/l7-map": "2.4.0",
-    "@antv/l7-utils": "2.4.0",
+    "@antv/l7-core": "^2.4.1",
+    "@antv/l7-map": "^2.4.1",
+    "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "@types/amap-js-api": "^1.4.6",
     "@types/mapbox-gl": "^1.11.2",

packages/renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,7 +26,7 @@
     "gl": "^4.4.0"
   },
   "dependencies": {
-    "@antv/l7-core": "2.4.0",
+    "@antv/l7-core": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "lodash": "^4.17.15",

packages/scene/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-scene",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,12 +23,12 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "2.4.0",
-    "@antv/l7-core": "2.4.0",
-    "@antv/l7-layers": "2.4.0",
-    "@antv/l7-maps": "2.4.0",
-    "@antv/l7-renderer": "2.4.0",
-    "@antv/l7-utils": "2.4.0",
+    "@antv/l7-component": "^2.4.1",
+    "@antv/l7-core": "^2.4.1",
+    "@antv/l7-layers": "^2.4.1",
+    "@antv/l7-maps": "^2.4.1",
+    "@antv/l7-renderer": "^2.4.1",
+    "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",

packages/source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-source",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "2.4.0",
-    "@antv/l7-utils": "2.4.0",
+    "@antv/l7-core": "^2.4.1",
+    "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",

packages/three/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-three",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "three for L7 ",
   "keywords": [
     "3D",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/antvis/L7#readme",
   "dependencies": {
-    "@antv/l7": "2.4.0",
+    "@antv/l7": "^2.4.1",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "rollup": "^2.3.3",

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-utils",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",

stories/Map/components/amap2demo.tsx

@@ -17,7 +17,7 @@ export default class Amap2demo extends React.Component {
         center: [121.107846, 30.267069],
         pitch: 0,
         style: 'normal',
-        zoom: 13,
+        zoom: 20,
         animateEnable: false,
       }),
     });
@@ -27,7 +27,7 @@ export default class Amap2demo extends React.Component {
         lat: 30.267069,
       },
       {
-        lng: 121.1,
+        lng: 121.107,
         lat: 30.267069,
       },
       {

stories/Map/components/amap2demo_arcLine3DTex.tsx

@@ -0,0 +1,89 @@
+// @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,22 +27,10 @@ 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 = [
-        // {
-        //   lng1: 91.111891,
-        //   lat1: 40.662557,
-        //   lng2: 120.342625,
-        //   lat2: 37.373799,
-        // },
-        // {
-        //   lng1: 116.98242187499999,
-        //   lat1: 43.004647127794435,
-        //   lng2: 105.64453124999999,
-        //   lat2: 28.998531814051795,
-        // },
         {
           lng1: 75.76171875,
           lat1: 36.31512514748051,
@@ -62,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, // 设置贴图纹理的间距
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 100, // 设置贴图纹理的间距
+          opacity: 0,
         })
-        .animate(true);
+        .animate({
+          duration: 50,
+          interval: 0.3,
+          trailLength: 0.1,
+        });
       scene.addLayer(layer);
     });
   }

stories/Map/components/mapCenter.tsx

@@ -18,7 +18,7 @@ export default class GaodeMapComponent extends React.Component {
         center: [121.107846, 30.267069],
         pitch: 0,
         style: 'normal',
-        zoom: 13,
+        zoom: 20,
         animateEnable: false,
       }),
     });
@@ -31,7 +31,7 @@ export default class GaodeMapComponent extends React.Component {
             lat: 30.267069,
           },
           {
-            lng: 121.1,
+            lng: 121.107,
             lat: 30.267069,
           },
           {

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 />)