Merge pull request #707 from antvis/shihui_dev

Shihui dev

docs/api/map.zh.md

@@ -15,8 +15,8 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
 ### 引入 Map
 
 ```javascript
-import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德2.0
+import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德1.x
-import { GaodeMapV1 } from '@antv/l7-maps'; // 默认引入高德1.x 版本
+import { GaodeMapV2 } from '@antv/l7-maps'; // 默认引入高德2.0 版本
 
 import { Mapbox } from '@antv/l7-maps';
 ```

packages/component/package.json

@@ -32,7 +32,7 @@
     "inversify": "^5.0.1",
     "load-styles": "^2.0.0"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/component/src/markerlayer.ts

@@ -77,7 +77,8 @@ export default class MarkerLayer extends EventEmitter {
       this.initCluster();
       this.update();
       // 地图视野变化时，重新计算视野内的聚合点。
-      this.mapsService.on('camerachange', this.update);
+      this.mapsService.on('camerachange', this.update); // amap1.x 更新事件
+      this.mapsService.on('viewchange', this.update); // amap2.0 更新事件
     }
     this.addMarkers();
     return this;
@@ -98,6 +99,24 @@ export default class MarkerLayer extends EventEmitter {
     }
   }
 
+  /**
+   * 隐藏 marker 在每个 marker 上单独修改属性而不是在 markerContainer 上修改（在 markerContainer 修改会有用户在场景加载完之前调用失败的问题）
+   */
+  public hide() {
+    this.markers.map((m) => {
+      m.getElement().style.opacity = '0';
+    });
+  }
+
+  /**
+   * 显示 marker
+   */
+  public show() {
+    this.markers.map((m) => {
+      m.getElement().style.opacity = '1';
+    });
+  }
+
   public getMarkers() {
     const cluster = this.markerLayerOption.cluster;
     return cluster ? this.clusterMarkers : this.markers;

packages/core/package.json

@@ -47,7 +47,7 @@
     "@types/lodash": "^4.14.138",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/core/src/services/interaction/PickingService.ts

@@ -321,7 +321,29 @@ export default class PickingService implements IPickingService {
       featureId: number | null;
     },
   ) {
-    layer.emit(target.type, target);
+    // 判断是否发生事件冲突
+    if (this.isEventCrash(target)) {
+      layer.emit(target.type, target);
+    }
+  }
+
+  /**
+   * 检测触发事件是否是在 marker/popup 上发生，若是则会发生冲突（发生冲突时 marker/popup 事件优先）
+   * @param obj
+   * @returns
+   */
+  private isEventCrash(obj: any) {
+    let notCrash = true;
+    obj.target.path.map((p: HTMLElement) => {
+      if (p.classList) {
+        p.classList.forEach((n: any) => {
+          if (n === 'l7-marker' || n === 'l7-popup') {
+            notCrash = false;
+          }
+        });
+      }
+    });
+    return notCrash;
   }
 
   /**

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

@@ -130,7 +130,7 @@ export interface ILayer {
   scale(field: string | number | IScaleOptions, cfg?: IScale): ILayer;
   size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
-  texture?(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
+  texture(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   label(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   animate(option: Partial<IAnimateOption> | boolean): ILayer;

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

@@ -1,4 +1,4 @@
-import { inject, injectable } from 'inversify';
+import { inject, injectable, optional } from 'inversify';
 import { TYPES } from '../../types';
 import { gl } from '../renderer/gl';
 import { IAttribute } from '../renderer/IAttribute';

packages/l7/package.json

@@ -33,7 +33,7 @@
     "@antv/l7-utils": "^2.4.1",
     "@babel/runtime": "^7.7.7"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/layers/package.json

@@ -53,7 +53,7 @@
     "@types/gl-matrix": "^2.4.5",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/layers/src/core/interface.ts

@@ -5,10 +5,13 @@ export enum lineStyleType {
 
 export interface ILineLayerStyleOptions {
   opacity: number;
-  lineType?: keyof typeof lineStyleType;
+  lineType?: keyof typeof lineStyleType; // 可选参数、线类型(all - dash/solid)
-  dashArray?: [number, number];
+  dashArray?: [number, number]; //  可选参数、虚线间隔
   segmentNumber: number;
-  forward?: boolean;
+  forward?: boolean; // 可选参数、是否反向(arcLine)
-  lineTexture?: boolean;
+  lineTexture?: boolean; // 可选参数、是否开启纹理贴图功能(all)
-  iconStep?: number;
+  iconStep?: number; // 可选参数、纹理贴图步长(all)
+  textureBlend?: string; // 可选参数、供给纹理贴图使用(all)
+  sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
+  targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
 }

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

@@ -9,6 +9,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 
+import { rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
@@ -23,6 +24,9 @@ export default class ArcModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       opacity,
+      sourceColor,
+      targetColor,
+      textureBlend = 'normal',
       lineType = 'solid',
       dashArray = [10, 5],
       forward = true,
@@ -34,22 +38,39 @@ export default class ArcModel extends BaseModel {
       dashArray.push(0, 0);
     }
 
+    // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
+    let sourceColorArr = [0, 0, 0, 0];
+    let targetColorArr = [0, 0, 0, 0];
+    if (sourceColor && targetColor) {
+      sourceColorArr = rgb2arr(sourceColor);
+      targetColorArr = rgb2arr(targetColor);
+      useLinearColor = 1;
+    }
+
     if (this.rendererService.getDirty()) {
       this.texture.bind();
     }
 
     return {
-      u_opacity: opacity || 1,
+      u_opacity: opacity === undefined ? 1 : opacity,
+      u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
       segmentNumber: 30,
       u_line_type: lineStyleObj[lineType || 'solid'],
       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],
+
+      // 渐变色支持参数
+      u_linearColor: useLinearColor,
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
     };
   }
 

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

@@ -6,7 +6,9 @@ import {
   ILayerConfig,
   IModel,
   IModelUniform,
+  ITexture2D,
 } from '@antv/l7-core';
+import { rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
@@ -17,22 +19,57 @@ const lineStyleObj: { [key: string]: number } = {
   dash: 1.0,
 };
 export default class Arc3DModel extends BaseModel {
+  protected texture: ITexture2D;
   public getUninforms(): IModelUniform {
     const {
       opacity,
+      sourceColor,
+      targetColor,
+      textureBlend = 'normal',
       lineType = 'solid',
       dashArray = [10, 5],
+      lineTexture = false,
+      iconStep = 100,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+
     if (dashArray.length === 2) {
       dashArray.push(0, 0);
     }
+
+    // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
+    let sourceColorArr = [0, 0, 0, 0];
+    let targetColorArr = [0, 0, 0, 0];
+    if (sourceColor && targetColor) {
+      sourceColorArr = rgb2arr(sourceColor);
+      targetColorArr = rgb2arr(targetColor);
+      useLinearColor = 1;
+    }
+
+    if (this.rendererService.getDirty()) {
+      this.texture.bind();
+    }
+
     return {
-      u_opacity: opacity || 1,
+      u_opacity: opacity === undefined ? 1 : opacity,
+      u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
       segmentNumber: 30,
       u_line_type: lineStyleObj[lineType as string] || 0.0,
       u_dash_array: dashArray,
+
+      // 纹理支持参数
+      u_texture: this.texture, // 贴图
+      u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
+      u_icon_step: iconStep,
+      u_textSize: [1024, this.iconService.canvasHeight || 128],
+
+      // 渐变色支持参数
+      u_linearColor: useLinearColor,
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
     };
   }
+
   public getAnimateUniforms(): IModelUniform {
     const { animateOption } = this.layer.getLayerConfig() as ILayerConfig;
     return {
@@ -42,9 +79,19 @@ export default class Arc3DModel 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({
@@ -103,5 +150,50 @@ export default class Arc3DModel 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/great_circle.ts

@@ -6,12 +6,15 @@ import {
   ILayerConfig,
   IModel,
   IModelUniform,
+  ITexture2D,
 } from '@antv/l7-core';
 
+import { rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
-import line_arc_frag from '../shaders/line_arc_frag.glsl';
+// import line_arc_frag from '../shaders/line_arc_frag.glsl';
+import line_arc_frag from '../shaders/line_arc_great_circle_frag.glsl';
 import line_arc2d_vert from '../shaders/line_arc_great_circle_vert.glsl';
 const lineStyleObj: { [key: string]: number } = {
   solid: 0.0,
@@ -19,20 +22,54 @@ const lineStyleObj: { [key: string]: number } = {
 };
 
 export default class GreatCircleModel extends BaseModel {
+  protected texture: ITexture2D;
   public getUninforms(): IModelUniform {
     const {
       opacity,
+      sourceColor,
+      targetColor,
+      textureBlend = 'normal',
       lineType = 'solid',
       dashArray = [10, 5],
+      lineTexture = false,
+      iconStep = 100,
     } = this.layer.getLayerConfig() as Partial<ILineLayerStyleOptions>;
+    // console.log('opacity', opacity)
     if (dashArray.length === 2) {
       dashArray.push(0, 0);
     }
+
+    if (this.rendererService.getDirty()) {
+      this.texture.bind();
+    }
+
+    // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
+    let sourceColorArr = [0, 0, 0, 0];
+    let targetColorArr = [0, 0, 0, 0];
+    if (sourceColor && targetColor) {
+      sourceColorArr = rgb2arr(sourceColor);
+      targetColorArr = rgb2arr(targetColor);
+      useLinearColor = 1;
+    }
+
     return {
-      u_opacity: opacity || 1,
+      u_opacity: opacity === undefined ? 1 : opacity,
+      u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
       segmentNumber: 30,
       u_line_type: lineStyleObj[lineType as string] || 0.0,
       u_dash_array: dashArray,
+
+      // 纹理支持参数
+      u_texture: this.texture, // 贴图
+      u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
+      u_icon_step: iconStep,
+      u_textSize: [1024, this.iconService.canvasHeight || 128],
+
+      // 渐变色支持参数
+      u_linearColor: useLinearColor,
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
     };
   }
   public getAnimateUniforms(): IModelUniform {
@@ -44,9 +81,19 @@ export default class GreatCircleModel 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({
@@ -105,5 +152,51 @@ export default class GreatCircleModel 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;
+          // console.log('icon feature', 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/line.ts

@@ -10,6 +10,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 
+import { rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineTriangulation } from '../../core/triangulation';
@@ -24,6 +25,9 @@ export default class LineModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       opacity,
+      sourceColor,
+      targetColor,
+      textureBlend = 'normal',
       lineType = 'solid',
       dashArray = [10, 5, 0, 0],
       lineTexture = false,
@@ -37,15 +41,32 @@ export default class LineModel extends BaseModel {
       this.texture.bind();
     }
 
+    // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
+    let sourceColorArr = [0, 0, 0, 0];
+    let targetColorArr = [0, 0, 0, 0];
+    if (sourceColor && targetColor) {
+      sourceColorArr = rgb2arr(sourceColor);
+      targetColorArr = rgb2arr(targetColor);
+      useLinearColor = 1;
+    }
+
     return {
-      u_opacity: opacity || 1.0,
+      u_opacity: opacity === undefined ? 1 : opacity,
+      u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
       u_line_type: lineStyleObj[lineType],
       u_dash_array: dashArray,
 
+      // 纹理支持参数
       u_texture: this.texture, // 贴图
       u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
       u_icon_step: iconStep,
       u_textSize: [1024, this.iconService.canvasHeight || 128],
+
+      // 渐变色支持参数
+      u_linearColor: useLinearColor,
+      u_sourceColor: sourceColorArr,
+      u_targetColor: targetColorArr,
     };
   }
   public getAnimateUniforms(): IModelUniform {

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

@@ -1,8 +1,10 @@
 #define LineTypeSolid 0.0
 #define LineTypeDash 1.0
 #define Animate 0.0
+#define LineTexture 1.0
 
 uniform float u_opacity;
+uniform float u_textureBlend;
 uniform float u_blur : 0.9;
 uniform float u_line_type: 0.0;
 varying vec2 v_normal;
@@ -10,13 +12,36 @@ varying vec4 v_dash_array;
 varying float v_distance_ratio;
 varying vec4 v_color;
 
+uniform float u_line_texture: 0.0;
+uniform sampler2D u_texture;
+uniform vec2 u_textSize;
+varying float v_segmentIndex;
+uniform float segmentNumber;
+varying float v_arcDistrance;
+varying float v_pixelLen;
+varying float v_a;
+varying vec2 v_offset;
+varying vec2 v_iconMapUV;
+
 uniform float u_time;
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 
+uniform float u_linearColor: 0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+
 #pragma include "picking"
 
 void main() {
-  gl_FragColor = v_color;
+  float animateSpeed = 0.0; // 运动速度
+  // gl_FragColor = v_color;
+
+  if(u_linearColor == 1.0) { // 使用渐变颜色
+    gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
+  } else { // 使用 color 方法传入的颜色
+     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;
@@ -30,21 +55,47 @@ 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);
+      // alpha = smoothstep(0., 1., alpha);
+      alpha = clamp(alpha, 0.0, 1.0);
       gl_FragColor.a *= alpha;
   }
 
-  // if(u_line_texture == LineTexture) { // while load texture
+  if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
-  //    //v_u; // 水平
+    // float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / segmentNumber));
-  //   float v = length(v_offset)/(v_a); // 横向
+    float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
-  //   vec2 uv= v_iconMapUV / u_textSize + vec2(v_u, v) / u_textSize * 64.;
+    float count = floor(v_arcDistrance/v_pixelLen);
-  //   // gl_FragColor = vec4(v_u, v, 0.0, 1.0);
+
-  //   // gl_FragColor = vec4(1.0, 0.0, 0.0, v_u);
+    float u = fract(arcRadio * count - animateSpeed * count);
-  //   gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
+ 
-  // } else {
+    if(u_aimate.x == Animate) {
-  //    gl_FragColor = filterColor(gl_FragColor);
+      u = gl_FragColor.a/u_opacity;
-  // }
+    }
-  gl_FragColor = filterColor(gl_FragColor);
+    float v = length(v_offset)/(v_a); // 横向
+
+    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
+    vec4 pattern = texture2D(u_texture, uv);
+
+    if(u_textureBlend == 0.0) { // normal
+      pattern.a = 0.0;
+      gl_FragColor = filterColor(gl_FragColor + pattern);
+    } else { // replace
+        pattern.a *= u_opacity;
+        if(gl_FragColor.a <= 0.0) {
+          pattern.a = 0.0;
+        }
+        gl_FragColor = filterColor(pattern);
+    }
+    
+
+    // gl_FragColor = filterColor(gl_FragColor + pattern);
+
+  } else {
+    gl_FragColor = filterColor(gl_FragColor);
+  }
+
+  // gl_FragColor = filterColor(gl_FragColor);
 }

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

@@ -1,6 +1,7 @@
 #define LineTypeSolid 0.0
 #define LineTypeDash 1.0
 #define Animate 0.0
+#define LineTexture 1.0
 attribute vec3 a_Position;
 attribute vec4 a_Instance;
 attribute vec4 a_Color;
@@ -17,6 +18,16 @@ uniform float u_line_type: 0.0;
 uniform vec4 u_dash_array: [10.0, 5., 0, 0];
 varying vec4 v_dash_array;
 
+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"
 #pragma include "picking"
@@ -73,7 +84,15 @@ void main() {
 
    if(u_line_type == LineTypeDash) {
     v_distance_ratio = segmentIndex / segmentNumber;
-    float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
+    // float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
+    vec2 s = source;
+    vec2 t = target;
+    
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      s = unProjCustomCoord(source);
+      t = unProjCustomCoord(target);
+    }
+    float total_Distance = pixelDistance(s, t) / 2.0 * PI;
     v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
   }
     if(u_aimate.x == Animate) {
@@ -86,6 +105,19 @@ void main() {
   vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y);
   v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
 
+
+  v_segmentIndex = a_Position.x;
+  if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式  
+    v_arcDistrance = length(source - target);
+    v_pixelLen = project_pixel(u_icon_step);
+
+    vec2 projectOffset = project_pixel(offset);
+    v_offset = projectOffset + projectOffset * sign(a_Position.y);
+    v_a = project_pixel(a_Size);
+    v_iconMapUV = a_iconMapUV;
+  }
+  
+
   // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(curr.xy + project_pixel(offset), curr.z, 1.0));

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

@@ -4,6 +4,7 @@
 #define LineTexture 1.0
 
 uniform float u_opacity;
+uniform float u_textureBlend;
 uniform float u_blur : 0.9;
 uniform float u_line_type: 0.0;
 varying vec2 v_normal;
@@ -26,12 +27,23 @@ varying float v_a;
 varying vec2 v_offset;
 varying vec2 v_iconMapUV;
 
+uniform float u_linearColor: 0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+
 #pragma include "picking"
 
 void main() {
   float animateSpeed = 0.0; // 运动速度
 
-  gl_FragColor = v_color;
+  if(u_linearColor == 1.0) { // 使用渐变颜色
+    gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
+  } else { // 使用 color 方法传入的颜色
+     gl_FragColor = v_color;
+  }
+
+  // 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;
@@ -48,25 +60,40 @@ void main() {
       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);
+      // alpha = smoothstep(0., 1., alpha);
+      alpha = clamp(alpha, 0.0, 1.0);
       gl_FragColor.a *= alpha;
   }
 
-  if(u_line_texture == LineTexture) { // while load texture
+  if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
-    float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
+    float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / segmentNumber));
+    // float arcRadio = smoothstep( 0.0, 1.0, v_distance_ratio);
+    // float arcRadio = 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;
+      u = gl_FragColor.a/u_opacity;
-      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));
+    vec4 pattern = texture2D(u_texture, uv);
-    gl_FragColor.a *= alpha;
+
+    if(u_textureBlend == 0.0) { // normal
+      pattern.a = 0.0;
+      gl_FragColor = filterColor(gl_FragColor + pattern);
+    } else { // replace
+        pattern.a *= u_opacity;
+        if(gl_FragColor.a <= 0.0) {
+          pattern.a = 0.0;
+        }
+        gl_FragColor = filterColor(pattern);
+    }
+    // gl_FragColor = vec4(arcRadio, 0.0, 0.0, 1.0);
+    // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
+    // gl_FragColor = filterColor(texture2D(u_texture, uv));
     
   } else {
      gl_FragColor = filterColor(gl_FragColor);

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

@@ -0,0 +1,102 @@
+#define LineTypeSolid 0.0
+#define LineTypeDash 1.0
+#define Animate 0.0
+#define LineTexture 1.0
+
+uniform float u_opacity;
+uniform float u_textureBlend;
+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 ];
+
+uniform float u_line_texture: 0.0;
+uniform sampler2D u_texture;
+uniform vec2 u_textSize;
+uniform float segmentNumber;
+varying float v_segmentIndex;
+varying float v_arcDistrance;
+varying float v_pixelLen;
+varying vec2 v_offset;
+varying float v_a;
+varying vec2 v_iconMapUV;
+
+uniform float u_linearColor: 0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+
+#pragma include "picking"
+
+void main() {
+  float animateSpeed = 0.0;
+  // gl_FragColor = v_color;
+  
+  if(u_linearColor == 1.0) { // 使用渐变颜色
+    gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
+  } else { // 使用 color 方法传入的颜色
+     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) {
+      animateSpeed = u_time / u_aimate.y;
+      // float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
+      // float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
+      float alpha =1.0 - fract( mod(1.0- smoothstep(0.0, 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);
+      // alpha = clamp(alpha, 0.1, 1.0);
+      // if(alpha < 0.01) alpha = 0.0;
+      gl_FragColor.a *= alpha;
+  }
+
+  if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式
+    float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
+    // float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
+    float count = floor(v_arcDistrance/v_pixelLen);
+    // float u = fract(arcRadio * count);
+    float u = fract(arcRadio * count - animateSpeed * count);
+    // float u = fract(arcRadio * count - animateSpeed);
+    if(u_aimate.x == Animate) {
+      u = gl_FragColor.a;
+    }
+
+    float v = length(v_offset)/(v_a); // 横向
+
+    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
+    vec4 pattern = texture2D(u_texture, uv);
+    
+
+    if(u_textureBlend == 0.0) { // normal
+      pattern.a = 0.0;
+      gl_FragColor = filterColor(gl_FragColor + pattern);
+    } else { // replace
+        pattern.a *= u_opacity;
+        if(gl_FragColor.a <= 0.0) {
+          pattern.a = 0.0;
+        }
+        gl_FragColor = filterColor(pattern);
+    }
+    // gl_FragColor = filterColor(gl_FragColor + pattern);
+  } else {
+    gl_FragColor = filterColor(gl_FragColor);
+  }
+
+  // gl_FragColor = filterColor(gl_FragColor);
+}

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

@@ -1,6 +1,8 @@
 #define LineTypeSolid 0.0
 #define LineTypeDash 1.0
 #define Animate 0.0
+#define LineTexture 1.0
+
 attribute vec4 a_Color;
 attribute vec3 a_Position;
 attribute vec4 a_Instance;
@@ -17,6 +19,17 @@ uniform float u_line_type: 0.0;
 uniform vec4 u_dash_array: [10.0, 5., 0, 0];
 varying vec4 v_dash_array;
 
+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 vec2 v_offset;
+varying float v_a;
+
+attribute vec2 a_iconMapUV;
+varying vec2 v_iconMapUV;
+
 #pragma include "projection"
 #pragma include "project"
 #pragma include "picking"
@@ -119,7 +132,16 @@ void main() {
   float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
   if(u_line_type == LineTypeDash) {
     v_distance_ratio = segmentIndex / segmentNumber;
-    float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba);
+    vec2 s = source;
+    vec2 t = target;
+    
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      s = unProjCustomCoord(source);
+      t = unProjCustomCoord(target);
+    }
+    float total_Distance = pixelDistance(s, t) / 2.0 * PI;
+    total_Distance = total_Distance*8.0;
+    // float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba);
     v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
   }
   if(u_aimate.x == Animate) {
@@ -134,6 +156,16 @@ void main() {
   //  vec4 project_pos = project_position(vec4(curr.xy, 0, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
 
+  v_segmentIndex = a_Position.x;
+  if(LineTexture == u_line_texture) { // 开启贴图模式  
+    v_arcDistrance = length(source - target);
+    v_pixelLen = project_pixel(u_icon_step)/8.0;
+
+    v_a = project_pixel(a_Size);
+    v_offset = offset + offset * sign(a_Position.y);
+    v_iconMapUV = a_iconMapUV;
+  }
+
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(curr.xy + offset, curr.z, 1.0));
   } else {

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

@@ -94,24 +94,35 @@ void main() {
   float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
   if(u_line_type == LineTypeDash) {
       v_distance_ratio = segmentIndex / segmentNumber;
-      float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
+      vec2 s = source;
+      vec2 t = target;
+      
+      if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+        s = unProjCustomCoord(source);
+        t = unProjCustomCoord(target);
+      }
+      float total_Distance = pixelDistance(s, t) / 2.0 * PI;
+      // float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI;
       v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex);
-    }
+  }
+  
   if(u_aimate.x == Animate) {
       v_distance_ratio = segmentIndex / segmentNumber;
       if(u_lineDir != 1.0) {
         v_distance_ratio = 1.0 - v_distance_ratio;
       }
   }
+
   vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0));
   vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0));
   v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
+  //unProjCustomCoord
   
   vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
 
+  v_segmentIndex = a_Position.x + 1.0;
   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);
@@ -122,6 +133,7 @@ void main() {
 
   // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    // gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
     gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
   } else {
     gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));

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

@@ -5,6 +5,7 @@
 uniform float u_blur : 0.99;
 uniform float u_line_type: 0.0;
 uniform float u_opacity : 1.0;
+uniform float u_textureBlend;
 varying vec4 v_color;
 varying vec2 v_normal;
 
@@ -27,6 +28,10 @@ varying float v_pixelLen;
 varying vec2 v_iconMapUV;
 varying float v_strokeWidth;
 
+uniform float u_linearColor: 0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+
 #pragma include "picking"
 
 uniform float u_time;
@@ -34,7 +39,14 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // 控制运动
 // [animate, duration, interval, trailLength],
 void main() {
   float animateSpeed = 0.0; // 运动速度
-  gl_FragColor = v_color;
+  // gl_FragColor = v_color;
+
+  if(u_linearColor == 1.0) { // 使用渐变颜色
+    gl_FragColor = mix(u_sourceColor, u_targetColor, v_distance_ratio);
+  } else { // 使用 color 方法传入的颜色
+     gl_FragColor = v_color;
+  }
+
   // anti-alias
   // float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy));
   gl_FragColor.a *= u_opacity; // 全局透明度
@@ -56,13 +68,25 @@ void main() {
     // gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, dashLength)));
   }
 
-  if(u_line_texture == LineTexture) { // while load texture
+  if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture
     float u = fract(mod(v_distance, v_pixelLen)/v_pixelLen - animateSpeed);
     float v = length(v_offset)/(v_a*2.0);
     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)));
-    gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
+    // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
+     vec4 pattern = texture2D(u_texture, uv);
+
+    if(u_textureBlend == 0.0) { // normal
+      pattern.a = 0.0;
+      gl_FragColor = filterColor(gl_FragColor + pattern);
+    } else { // replace
+        pattern.a *= u_opacity;
+        if(gl_FragColor.a <= 0.0) {
+          pattern.a = 0.0;
+        }
+        gl_FragColor = filterColor(pattern);
+    }
   } else {
     gl_FragColor = filterColor(gl_FragColor);
   }

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

@@ -36,6 +36,7 @@ varying float v_size;
 varying float v_a;
 varying float v_pixelLen;
 varying vec2 v_iconMapUV;
+uniform float u_linearColor: 0;
 // varying float v_strokeWidth;
 
 void main() {
@@ -49,7 +50,7 @@ void main() {
     // v_distance_ratio = 0.01;
     v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
   }
-  if(u_aimate.x == Animate) {
+  if(u_aimate.x == Animate || u_linearColor == 1.0) {
       v_distance_ratio = a_Distance / a_Total_Distance;
   }
   v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -117,7 +117,8 @@ export default class DataMappingPlugin implements ILayerPlugin {
         coordinates: record.coordinates,
         ...preRecord,
       };
-
+      // console.log('encodeRecord', encodeRecord)
+      // console.log('attributes', attributes)
       attributes
         .filter((attribute) => attribute.scale !== undefined)
         .forEach((attribute: IStyleAttribute) => {
@@ -126,6 +127,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
 
           // TODO: 支持每个属性配置 postprocess
           if (attribute.name === 'color') {
+            // console.log('attribute', attribute)
             values = values.map((c: unknown) => {
               return rgb2arr(c as string);
             });

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

@@ -10,6 +10,7 @@ uniform vec2 u_offsets;
 
 #pragma include "projection"
 #pragma include "picking"
+#pragma include "project"
 void main() {
   v_color = a_Color;
   // vec2 offset = project_pixel(u_offsets);
@@ -17,7 +18,8 @@ void main() {
   // gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));\
   // 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    gl_Position = u_Mvp * vec4(a_Position, 1.0);
+    vec2 offset = project_pixel((u_offsets));
+    gl_Position = u_Mvp * vec4(a_Position.xy + offset, a_Position.z, 1.0);
   } else { // else
     vec2 offset = project_pixel(u_offsets);
     vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);

packages/map/package.json

@@ -44,5 +44,5 @@
     "eventemitter3": "^4.0.4",
     "lodash": "^4.17.15"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83"
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0"
 }

packages/maps/package.json

@@ -43,7 +43,7 @@
     "@types/gl-matrix": "^2.4.5",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/maps/src/amap2/map.ts

@@ -152,7 +152,12 @@ export default class AMapService
       //   'amap-maps',
       // )[0] as HTMLElement;
       // this.markerContainer = DOM.create('div', 'l7-marker-container2', amap);
-      this.markerContainer = mapContainer;
+      this.markerContainer = DOM.create(
+        'div',
+        'l7-marker-container2',
+        mapContainer,
+      );
+      // this.markerContainer = mapContainer;
     }
   }
   public getMarkerContainer(): HTMLElement {

packages/maps/src/index.ts

@@ -1,7 +1,8 @@
 // import GaodeMap from './amap/';
-import GaodeMapV1 from './amap/';
+import GaodeMap from './amap/';
-import GaodeMap from './amap2/';
+// import GaodeMapV1 from './amap/';
+import GaodeMapV2 from './amap2/';
 import Map from './map/';
 import Mapbox from './mapbox/';
 
-export { GaodeMap, GaodeMapV1, Mapbox, Map };
+export { GaodeMap, GaodeMapV2, Mapbox, Map };

packages/renderer/package.json

@@ -33,7 +33,7 @@
     "reflect-metadata": "^0.1.13",
     "regl": "^1.6.1"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/scene/package.json

@@ -34,7 +34,7 @@
     "mapbox-gl": "^1.2.1",
     "reflect-metadata": "^0.1.13"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/source/package.json

@@ -45,7 +45,7 @@
     "@types/d3-hexbin": "^0.2.3",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/three/package.json

@@ -53,7 +53,7 @@
   "devDependencies": {
     "three": "^0.115.0"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

packages/utils/package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@types/d3-color": "^1.2.2"
   },
-  "gitHead": "488447e4f819c80c3325bd7a6c25d276fe868f83",
+  "gitHead": "719d3b75bdfbb7a98767858333b90be92179fed0",
   "publishConfig": {
     "access": "public"
   }

stories/3D_Model/Components/amap_three.tsx

@@ -1,5 +1,5 @@
 import { Scene } from '@antv/l7';
-import { GaodeMap, Mapbox, GaodeMapV1 } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import { ThreeLayer, ThreeRender } from '@antv/l7-three';
 import * as React from 'react';
 // import { DirectionalLight, Scene as ThreeScene } from 'three';
@@ -23,8 +23,7 @@ export default class GlTFThreeJSDemo extends React.Component {
 
     const scene = new Scene({
       id: 'map',
-      // map: new GaodeMap({
+      map: new GaodeMap({
-      map: new GaodeMapV1({
         center: [111.4453125, 32.84267363195431],
         pitch: 45,
         rotation: 30,

stories/Map/components/amap2demo.tsx

@@ -42,11 +42,11 @@ export default class Amap2demo extends React.Component {
     this.scene = scene;
 
     scene.on('loaded', () => {
-      console.log('event test');
+      // console.log('event test');
       // @ts-ignore
-      console.log(scene.map.getProjection().project);
+      // console.log(scene.map.getProjection().project);
       // @ts-ignore
-      console.log(scene.map.customCoords.lngLatToCoord);
+      // console.log(scene.map.customCoords.lngLatToCoord);
       const layer = new PointLayer()
         .source(originData, {
           parser: {
@@ -55,13 +55,15 @@ export default class Amap2demo extends React.Component {
             y: 'lat',
           },
         })
-        .shape('circle')
+        // .shape('circle')
         // .shape('normal')
+        .shape('fill')
         .color('rgba(255, 0, 0, 0.9)')
         .size(10)
         .style({
           stroke: '#fff',
           storkeWidth: 2,
+          offsets: [100, 100],
         })
         .active(true);
       scene.addLayer(layer);

stories/Map/components/amap2demo_arcLine.tsx

@@ -45,6 +45,8 @@ export default class Amap2demo_arcLine extends React.Component {
             .style({
               opacity: 0.8,
               blur: 0.99,
+              lineType: 'dash',
+              dashArray: [5, 5],
             });
           // .forward(false)
           scene.addLayer(layer);

stories/Map/components/amap2demo_arcLine3DTex.tsx

@@ -25,6 +25,9 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
     this.scene = scene;
 
     scene.on('loaded', () => {
+      setTimeout(() => {
+        scene.setPitch(0);
+      }, 4000);
       scene.addImage(
         '02',
         'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
@@ -38,7 +41,7 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
           lat2: 52.802761415419674,
         },
       ];
-
+      //// @ts-ignore
       const layer = new LineLayer({
         blend: 'normal',
       })
@@ -53,18 +56,25 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
         })
         .size(10)
         .shape('arc3d')
-        // .texture('02')
+        .texture('02')
         .color('#8C1EB2')
         .style({
-          // forward: false,
+          lineTexture: true, // 开启线的贴图功能
-          // lineTexture: true, // 开启线的贴图功能
+          iconStep: 10, // 设置贴图纹理的间距
-          // iconStep: 100, // 设置贴图纹理的间距
+          // opacity: 0,
-          // // opacity: 0
+          opacity: 0.8,
+          // opacity: 0.2,
+          // lineType: 'dash',
+          // dashArray: [5, 5],
+          // textureBlend: 'replace',
+          // textureBlend: 'normal',
+          sourceColor: '#f00',
+          targetColor: '#0f0',
         });
       // .animate({
       //   duration: 50,
-      //   interval: 0.3,
+      //   interval: 0.2,
-      //   trailLength: 0.1,
+      //   trailLength: 0.02,
       // });
       scene.addLayer(layer);
     });

stories/Map/components/amap2demo_arcLineLinear.tsx

@@ -0,0 +1,95 @@
+// @ts-ignore
+import { LineLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_arcLineLinear 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,
+        },
+      ];
+      // @ts-ignore
+      const layer = new LineLayer({
+        blend: 'normal',
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'lng1',
+            y: 'lat1',
+            x1: 'lng2',
+            y1: 'lat2',
+          },
+        })
+        .size(20)
+        .shape('arc')
+        .color('#f00')
+        .style({
+          // forward: false,
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 30, // 设置贴图纹理的间距
+          // opacity: 0.5,
+          // opacity: 0.2,
+          // lineType: 'dash',
+          // dashArray: [5, 5],
+          // textureBlend: 'replace',
+          // textureBlend: 'normal',
+          sourceColor: '#f00',
+          targetColor: '#0f0',
+        });
+      // .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

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class Amap2demo_arcLineTex extends React.Component {
@@ -14,6 +14,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
+      // map: new GaodeMapV2({
       map: new GaodeMap({
         pitch: 40,
         center: [107.77791556935472, 35.443286920228644],
@@ -38,7 +39,7 @@ export default class Amap2demo_arcLineTex extends React.Component {
           lat2: 52.802761415419674,
         },
       ];
-
+      // @ts-ignore
       const layer = new LineLayer({
         blend: 'normal',
       })
@@ -51,21 +52,26 @@ export default class Amap2demo_arcLineTex extends React.Component {
             y1: 'lat2',
           },
         })
-        .size(20)
+        .size(25)
         .shape('arc')
         .texture('02')
         .color('#8C1EB2')
         .style({
           forward: false,
           lineTexture: true, // 开启线的贴图功能
-          iconStep: 100, // 设置贴图纹理的间距
+          iconStep: 30, // 设置贴图纹理的间距
-          opacity: 0,
+          // opacity: 0.5,
-        })
+          // opacity: 0.2,
-        .animate({
+          // lineType: 'dash',
-          duration: 50,
+          // dashArray: [5, 5],
-          interval: 0.3,
+          // textureBlend: 'replace',
-          trailLength: 0.1,
+          // textureBlend: 'normal',
         });
+      // .animate({
+      //   duration: 50,
+      //   interval: 0.3,
+      //   trailLength: 0.1,
+      // })
       scene.addLayer(layer);
     });
   }

stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx

@@ -0,0 +1,104 @@
+// @ts-ignore
+import { LineLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Amap2demo_arcLine_greatCircle 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: 0,
+        center: [107.77791556935472, 35.443286920228644],
+        zoom: 2.9142882493605033,
+        viewMode: '3D',
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      scene.addImage(
+        '00',
+        'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+        // "https://gw-office.alipayobjects.com/bmw-prod/ae2a8580-da3d-43ff-add4-ae9c1bfc75bb.svg"
+      );
+      scene.addImage(
+        '01',
+        'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
+      );
+      scene.addImage(
+        '02',
+        'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
+      );
+
+      const layer = new LineLayer({ blend: 'normal' })
+        .source(
+          [
+            {
+              lng1: 75.9375,
+              lat1: 37.71859032558816,
+              lng2: 123.3984375,
+              lat2: 39.639537564366684,
+            },
+          ],
+          {
+            parser: {
+              type: 'json',
+              x: 'lng1',
+              y: 'lat1',
+              x1: 'lng2',
+              y1: 'lat2',
+            },
+          },
+        )
+        .size(20)
+        .shape('greatcircle')
+        .color('#ff0000')
+        .texture('02')
+        .style({
+          opacity: 0.6,
+          // textureBlend: 'replace',
+          // textureBlend: 'normal',
+          blur: 0.99,
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 5, // 设置贴图纹理的间距
+
+          // lineType: 'dash',
+          // dashArray: [5, 5],
+          sourceColor: '#f00',
+          targetColor: '#0f0',
+        });
+      // .animate({
+      //   duration: 5,
+      //   interval: 0.2,
+      //   trailLength: 0.4,
+      // });
+      // .animate(true);
+      scene.addLayer(layer);
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_clustermarker.tsx

@@ -0,0 +1,65 @@
+//@ts-ignore
+import { MarkerLayer, Marker, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+export default class Amap2demo_clustermarker 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({
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      addMarkers();
+      scene.render();
+    });
+    function addMarkers() {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+      )
+        .then((res) => res.json())
+        .then((nodes) => {
+          const markerLayer = new MarkerLayer({
+            cluster: true,
+          });
+          for (let i = 0; i < nodes.features.length; i++) {
+            const { coordinates } = nodes.features[i].geometry;
+            const marker = new Marker().setLnglat({
+              lng: coordinates[0],
+              lat: coordinates[1],
+            });
+            markerLayer.addMarker(marker);
+          }
+          scene.addMarkerLayer(markerLayer);
+        });
+    }
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_drawControl.tsx

@@ -1,6 +1,6 @@
 //@ts-ignore
 import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMapV1 } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 import { DrawControl } from '@antv/l7-draw';
 import * as React from 'react';
 export default class Amap2demo_drawControl extends React.Component {
@@ -14,7 +14,7 @@ export default class Amap2demo_drawControl extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMapV1({
+      map: new GaodeMap({
         pitch: 0,
         style: 'light',
         layers: [],

stories/Map/components/amap2demo_heatmap_hexagon.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { Scene, HeatmapLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class Amap2demo_heatmap_hexagon extends React.Component {
@@ -47,7 +47,7 @@ export default class Amap2demo_heatmap_hexagon extends React.Component {
               ],
             })
             .size('sum', (sum) => {
-              return sum * 200;
+              return sum * 20000;
             })
             .shape('hexagonColumn')
             .style({

stories/Map/components/amap2demo_instance.tsx

@@ -1,6 +1,6 @@
 //@ts-ignore
 import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
 import AMapLoader from '@amap/amap-jsapi-loader';
 import * as React from 'react';
 export default class Amap2demo_instance extends React.Component {
@@ -12,10 +12,10 @@ export default class Amap2demo_instance extends React.Component {
   }
 
   public async componentDidMount() {
-    // const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
+    const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
-    // const AMAP_VERSION: string = '1.4.15';
+    const AMAP_VERSION: string = '1.4.15';
-    const AMAP_API_KEY: string = 'ff533602d57df6f8ab3b0fea226ae52f';
+    // const AMAP_API_KEY: string = 'ff533602d57df6f8ab3b0fea226ae52f';
-    const AMAP_VERSION: string = '2.0';
+    // const AMAP_VERSION: string = '2.0';
 
     AMapLoader.load({
       key: AMAP_API_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填

stories/Map/components/amap2demo_lineLinear.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_lineLinear 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({
+        center: [120.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 16,
+        viewMode: '3D',
+      }),
+    });
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          scene.addImage(
+            '00',
+            'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+          );
+          scene.addImage(
+            '01',
+            'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
+          );
+          scene.addImage(
+            '02',
+            'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
+          );
+          // @ts-ignore
+          const layer = new LineLayer({})
+            .source(data)
+            .size(5)
+            .shape('line')
+            .texture('01')
+            .color('#25d8b7')
+            // .animate({
+            //   interval: 1, // 间隔
+            //   duration: 1, // 持续时间，延时
+            //   trailLength: 2, // 流线长度
+            // })
+            .style({
+              opacity: 0.5,
+              // opacity: 0,
+              // lineTexture: true, // 开启线的贴图功能
+              // iconStep: 50, // 设置贴图纹理的间距
+              // lineType: 'dash',
+              // dashArray: [5, 5],
+              // textureBlend: 'replace',
+              // textureBlend: 'normal',
+              sourceColor: '#f00',
+              targetColor: '#0f0',
+            });
+          scene.addLayer(layer);
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/components/amap2demo_lineStreet.tsx

@@ -41,22 +41,27 @@ export default class Amap2demo_lineStreet extends React.Component {
             '02',
             'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
           );
-
+          // @ts-ignore
           const layer = new LineLayer({})
             .source(data)
             .size(5)
             .shape('line')
-            .texture('02')
+            .texture('01')
             .color('#25d8b7')
-            .animate({
+            // .animate({
-              interval: 1, // 间隔
+            //   interval: 1, // 间隔
-              duration: 1, // 持续时间，延时
+            //   duration: 1, // 持续时间，延时
-              trailLength: 2, // 流线长度
+            //   trailLength: 2, // 流线长度
-            })
+            // })
             .style({
-              // opacity: 0.5,
+              opacity: 0.5,
+              // opacity: 0,
               lineTexture: true, // 开启线的贴图功能
               iconStep: 50, // 设置贴图纹理的间距
+              // lineType: 'dash',
+              // dashArray: [5, 5],
+              textureBlend: 'replace',
+              // textureBlend: 'normal',
             });
           scene.addLayer(layer);
         });

stories/Map/components/amap2demo_markerlayer.tsx

@@ -1,6 +1,6 @@
 //@ts-ignore
 import { MarkerLayer, Marker, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 export default class Amap2demo_markerlayer extends React.Component {
   // @ts-ignore
@@ -58,7 +58,20 @@ export default class Amap2demo_markerlayer extends React.Component {
       markerLayer.addMarker(marker);
     }
     scene.addMarkerLayer(markerLayer);
+    // scene.on('loaded', () => {
+    //   markerLayer.hide()
+    // })
 
+    let f = 0;
+    setInterval(() => {
+      if (f === 0) {
+        markerLayer.hide();
+        f = 1;
+      } else {
+        markerLayer.show();
+        f = 0;
+      }
+    }, 800);
     this.scene = scene;
   }
 

stories/Map/components/amap2demo_road.tsx

@@ -33,7 +33,7 @@ export default class Amap2demo_road extends React.Component {
             'road',
             'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ',
           );
-
+          // @ts-ignore
           const layer = new LineLayer()
             .source(data)
             .size(10)

stories/Map/components/amap2demo_road2.tsx

@@ -33,7 +33,7 @@ export default class Amap2demo_road2 extends React.Component {
             '02',
             'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
           );
-
+          // @ts-ignore
           const layer = new LineLayer({})
             .source(data)
             .size(5)

stories/Map/components/mapCenter.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class GaodeMapComponent extends React.Component {
@@ -14,7 +14,7 @@ export default class GaodeMapComponent extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMapV1({
+      map: new GaodeMap({
         center: [121.107846, 30.267069],
         pitch: 0,
         style: 'normal',
@@ -58,6 +58,7 @@ export default class GaodeMapComponent extends React.Component {
       .style({
         stroke: '#fff',
         storkeWidth: 2,
+        offsets: [100, 100],
       });
     scene.addLayer(layer);
     scene.render();

stories/Map/map.stories.tsx

@@ -17,12 +17,15 @@ import Amap2demo_polygon_extrude from './components/amap2demo_polygon_extrude'
 import Amap2demo_arcLine from "./components/amap2demo_arcLine"
 import Amap2demo_arcLine3d from "./components/amap2demo_arcLine3d"
 import Amap2demo_arcLine_greatCircle from "./components/amap2demo_arcLine_greatCircle"
+import Amap2demo_arcLine_greatCircleTex from "./components/amap2demo_arcLine_greatCircleTex"
 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_arcLineLinear from './components/amap2demo_arcLineLinear';
 import Amap2demo_arcLine3DTex from './components/amap2demo_arcLine3DTex';
 import Amap2demo_lineStreet from './components/amap2demo_lineStreet';
+import Amap2demo_lineLinear from './components/amap2demo_lineLinear';
 import Amap2demo_road from './components/amap2demo_road';
 import Amap2demo_road2 from './components/amap2demo_road2';
 
@@ -41,6 +44,7 @@ import Amap2demo_citybuilding from "./components/amap2demo_citybuilding"
 import Amap2demo_drilldown from "./components/amap2demo_drilldown"
 
 import Amap2demo_markerlayer from "./components/amap2demo_markerlayer"
+import Amap2demo_clustermarker from './components/amap2demo_clustermarker';
 
 import Amap2demo_instance from "./components/amap2demo_instance"
 
@@ -65,16 +69,19 @@ storiesOf('地图方法', module)
 
         .add('高德地图2.0 line_arc', () => <Amap2demo_arcLine />)
         .add('高德地图2.0 line_arc3d', () => <Amap2demo_arcLine3d />)
-        .add('高德地图2.0 line_arc3d_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
+        .add('高德地图2.0 line_arc_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
+        .add('高德地图2.0 line_arc_greatCircleTex', () => <Amap2demo_arcLine_greatCircleTex />)
         .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_arcLinear', () => <Amap2demo_arcLineLinear />)
         .add('高德地图2.0 line_arc3DTex', () => <Amap2demo_arcLine3DTex />)
 
         .add('高德地图2.0 line_winds', () => <Amap2demo_winds />)
         .add('高德地图2.0 line_Street', () => <Amap2demo_lineStreet />)
+        .add('高德地图2.0 line_Linear', () => <Amap2demo_lineLinear />)
         .add('高德地图2.0 road', () => <Amap2demo_road />)
         .add('高德地图2.0 road2', () => <Amap2demo_road2 />)
 
@@ -90,6 +97,7 @@ storiesOf('地图方法', module)
         .add('高德地图2.0 点击下钻', () => <Amap2demo_drilldown />)
 
         .add('高德地图2.0 Marker图层', () => <Amap2demo_markerlayer />)
+        .add('高德地图2.0 clusterMarker图层', () => <Amap2demo_clustermarker />)
 
         .add('高德地图2.0 instance实例', () => <Amap2demo_instance />)
 

stories/React/components/Scene.tsx

@@ -25,9 +25,16 @@ export default React.memo(function Map() {
     fetchData();
   }, []);
   const popupClick = (e: any) => {
-    e.stopPropagation();
+    console.log(e);
+    // e.stopPropagation();
     alert('11333');
   };
+
+  const markerClick = (e: any) => {
+    console.log(e);
+    // e.stopPropagation();
+    alert('marker');
+  };
   return (
     <>
       <AMapScene
@@ -50,12 +57,20 @@ export default React.memo(function Map() {
             closeOnClick: false,
             stopPropagation: false,
           }}
-          lnglat={[110.1938, 30.25] as number[]}
+          lnglat={[115, 30.25] as number[]}
         >
           <p onClick={popupClick}>122224</p>
         </Popup>
-        <Marker lnglat={[100.1938, 30.25] as number[]}>
+        <Marker lnglat={[100.1938, 27.25] as number[]}>
-          <p onClick={popupClick}>tes</p>
+          <div
+            style={{
+              border: '1px solid #fff',
+              background: '#FFF',
+              fontSize: '24px',
+            }}
+          >
+            <p onClick={markerClick}>tes</p>
+          </div>
         </Marker>
         <PolygonLayer
           key={'2'}
@@ -86,7 +101,7 @@ export default React.memo(function Map() {
           <LayerEvent
             type="click"
             handler={(e) => {
-              console.log(e);
+              console.log('LayerEvent', e);
             }}
           />
         </PolygonLayer>