Shihui dev (#793)

* feat: add getModelMatrix into viewport

* feat: 新增地球模式 （初步构建）

* feat: 完善地球交互

* style: lint style

* feat: 调整地球图层缩放的方向

* style: lint style

* feat: 增加地球模式的 pointLayer/fill 图层

* style: lint style

* feat: 增加地球、太阳的简单运动系统，优化部分代码结构

* fix: 修复时间点击出错

* style: lint style

* fix: 修复地图 panBy 方法参数错误

* style: lint style

* feat: pointLayer/cylinder 圆柱兼容地球模式

* style: lint style

* feat: 修复 pointLayer/fill 在拾取是破面严重的情况

* style: lint style

* feat: 增加 arc 弧度调节

* chore: update version 2.5.29 -> 2.5.30

* feat: 增加 lineLayer/arc3d 兼容地球模式

* style: lint style

* chore: update version 2.5.30 -> 2.5.31

* style: lint style

* feat: 增加地球图层 - 大气层

* style: lint style

* feat: 增加设置可视化层背景色的能力

* style: lint style

docs/api/district/drilldown.zh.md

@@ -36,13 +36,13 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
 
 向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
 
-### drillDownEvent 
+### drillDownEvent
 
-根据drillDownTriggerEvent类型下钻触发的回调事件 属性
+根据 drillDownTriggerEvent 类型下钻触发的回调事件 属性
 
 ### drillUpEvent
 
-根据drillUpTriggleEvent类型上钻触发的回调事件 属性
+根据 drillUpTriggleEvent 类型上钻触发的回调事件 属性
 
 ### drillUpTriggleEvent
 

lerna.json

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

packages/component/package.json

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

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-core",
-  "version": "2.5.30",
+  "version": "2.5.31",
   "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.5.30",
+    "@antv/l7-utils": "^2.5.31",
     "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",

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

@@ -1,9 +1,11 @@
+import { rgb2arr } from '@antv/l7';
 import { inject, injectable } from 'inversify';
 import 'reflect-metadata';
 import { ILayer } from '../..';
 import { TYPES } from '../../types';
 import Clock from '../../utils/clock';
 import { IGlobalConfigService } from '../config/IConfigService';
+import { IMapService } from '../map/IMapService';
 import { IRendererService } from '../renderer/IRendererService';
 import { ILayerModel, ILayerService } from './ILayerService';
 
@@ -28,6 +30,9 @@ export default class LayerService implements ILayerService {
   @inject(TYPES.IRendererService)
   private readonly renderService: IRendererService;
 
+  @inject(TYPES.IMapService)
+  private readonly mapService: IMapService;
+
   @inject(TYPES.IGlobalConfigService)
   private readonly configService: IGlobalConfigService;
 
@@ -178,8 +183,14 @@ export default class LayerService implements ILayerService {
   }
 
   private clear() {
+    const color = rgb2arr(this.mapService.bgColor) as [
+      number,
+      number,
+      number,
+      number,
+    ];
     this.renderService.clear({
-      color: [0, 0, 0, 0],
+      color,
       depth: 1,
       stencil: 0,
       framebuffer: null,

packages/core/src/services/map/IMapService.ts

@@ -32,6 +32,8 @@ export interface IMapWrapper {
 export interface IMapService<RawMap = {}> {
   version?: string;
   map: RawMap;
+  bgColor: string;
+  setBgColor(color: string): void;
   init(): void;
   initViewPort?(): void;
   destroy(): void;
@@ -104,6 +106,7 @@ export interface IMapService<RawMap = {}> {
         }
       | undefined,
   ): void;
+  clearColor?(): void;
 }
 
 export const MapServiceEvent = ['mapload'];

packages/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.5.30",
+  "version": "2.5.31",
   "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.5.30",
+    "@antv/l7-component": "^2.5.31",
-    "@antv/l7-core": "^2.5.30",
+    "@antv/l7-core": "^2.5.31",
-    "@antv/l7-layers": "^2.5.30",
+    "@antv/l7-layers": "^2.5.31",
-    "@antv/l7-maps": "^2.5.30",
+    "@antv/l7-maps": "^2.5.31",
-    "@antv/l7-scene": "^2.5.30",
+    "@antv/l7-scene": "^2.5.31",
-    "@antv/l7-utils": "^2.5.30",
+    "@antv/l7-utils": "^2.5.31",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.5.30';
+const version = '2.5.31';
 export { version };

packages/layers/package.json

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

packages/layers/src/earth/index.ts

@@ -1,20 +1,25 @@
 import BaseLayer from '../core/BaseLayer';
+import EarthAtomSphereModel from './models/atmosphere';
 import BaseEarthModel from './models/base';
 
-export type EarthType = 'base';
 interface IEarthLayerStyleOptions {
   setEarthTime(time: number): void;
 }
 
-const EarthModels: { [key in EarthType]: any } = {
+export type EarthModelType = 'base' | 'atomSphere';
+
+const EarthModels: { [key in EarthModelType]: any } = {
   base: BaseEarthModel,
+  atomSphere: EarthAtomSphereModel,
 };
 
+const earthLayerTypes = ['base', 'atomSphere'];
+
 export default class EarthLayer extends BaseLayer<IEarthLayerStyleOptions> {
   public type: string = 'EarthLayer';
 
   public buildModels() {
-    const shape = 'base';
+    const shape = this.getModelType();
     this.layerModel = new EarthModels[shape](this);
     this.models = this.layerModel.initModels();
   }
@@ -30,4 +35,15 @@ export default class EarthLayer extends BaseLayer<IEarthLayerStyleOptions> {
       console.error('请在 scene loaded 之后执行该方法！');
     }
   }
+
+  protected getModelType(): EarthModelType {
+    const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
+      'shape',
+    );
+    let shape = (shapeAttribute?.scale?.field || 'base') as string;
+    if (earthLayerTypes.indexOf(shape) < 0) {
+      shape = 'base';
+    }
+    return shape as EarthModelType;
+  }
 }

packages/layers/src/earth/models/atmosphere.ts

@@ -0,0 +1,128 @@
+import {
+  AttributeType,
+  BlendType,
+  gl,
+  IEncodeFeature,
+  ILayerConfig,
+  IModel,
+  IModelUniform,
+  ITexture2D,
+} from '@antv/l7-core';
+import { rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
+
+import BaseModel, { styleOffset, styleSingle } from '../../core/BaseModel';
+import { earthTriangulation } from '../../core/triangulation';
+import atmoSphereFrag from '../shaders/atmosphere_frag.glsl';
+import atmoSphereVert from '../shaders/atmosphere_vert.glsl';
+interface IAtmoLayerStyleOptions {
+  opacity: number;
+}
+
+export default class EarthAtomSphereModel extends BaseModel {
+  public getUninforms(): IModelUniform {
+    const {
+      opacity = 1,
+    } = this.layer.getLayerConfig() as IAtmoLayerStyleOptions;
+    return {
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
+    };
+  }
+
+  public initModels(): IModel[] {
+    return this.buildModels();
+  }
+
+  public clearModels() {
+    return '';
+  }
+
+  public buildModels(): IModel[] {
+    return [
+      this.layer.buildLayerModel({
+        moduleName: 'earthAtmoSphere',
+        vertexShader: atmoSphereVert,
+        fragmentShader: atmoSphereFrag,
+        triangulation: earthTriangulation,
+        depth: {
+          enable: false,
+        },
+        blend: this.getBlend(),
+      }),
+    ];
+  }
+
+  protected registerBuiltinAttributes() {
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 1,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+        ) => {
+          const { size = 1 } = feature;
+          return Array.isArray(size) ? [size[0]] : [size as number];
+        },
+      },
+    });
+
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'normal',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Normal',
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.STATIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 3,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+          normal: number[],
+        ) => {
+          return normal;
+        },
+      },
+    });
+
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        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,
+        ) => {
+          return [vertex[3], vertex[4]];
+        },
+      },
+    });
+  }
+}

packages/layers/src/earth/shaders/atmosphere_frag.glsl

@@ -0,0 +1,15 @@
+
+uniform float u_opacity;
+uniform vec3 u_CameraPosition;
+varying vec3 vVertexNormal;
+
+varying vec4 v_Color;
+void main() {
+
+
+    float intensity = pow(0.5 + dot(normalize(vVertexNormal), normalize(u_CameraPosition)), 3.0);
+    // TODO: 去除背面
+    if(intensity > 1.0) intensity = 0.0;
+
+    gl_FragColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);
+}

packages/layers/src/earth/shaders/atmosphere_vert.glsl

@@ -0,0 +1,20 @@
+
+attribute vec3 a_Position;
+attribute vec3 a_Normal;
+attribute vec2 a_Uv;
+attribute vec4 a_Color;
+uniform vec3 u_CameraPosition;
+uniform mat4 u_ViewProjectionMatrix;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_ViewMatrix;
+
+varying vec3 vVertexNormal;
+varying vec4 v_Color;
+
+void main() {
+    v_Color = a_Color;
+
+    vVertexNormal = a_Normal;
+
+    gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);
+}

packages/layers/src/earth/utils.ts

@@ -61,7 +61,6 @@ export function primitiveSphere(
   const indicesArr = [];
   const positions = [];
   const positionsArr = [];
-  const normals = [];
   const normalArr = [];
   const uvs = [];
 
@@ -96,7 +95,6 @@ export function primitiveSphere(
       positionsArr.push(...tmpVec3.slice());
 
       vec3.normalize(tmpVec3, tmpVec3);
-      normals.push(tmpVec3.slice());
       normalArr.push(...tmpVec3.slice());
 
       uvs.push([normalizedY, 1 - normalizedZ]);
@@ -141,7 +139,6 @@ export function primitiveSphere(
   return {
     cells: indices,
     positions,
-    normals,
     uvs,
     positionsArr,
     indicesArr,

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

@@ -9,7 +9,6 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { rgb2arr } from '@antv/l7-utils';
 import BaseModel, {
   styleColor,
   styleOffset,
@@ -22,7 +21,7 @@ import {
 import pointFillFrag from '../shaders/fill_frag.glsl';
 import pointFillVert from '../shaders/fill_vert.glsl';
 
-import { isNumber, isString } from 'lodash';
+import { isNumber } from 'lodash';
 
 import { mat4, vec3 } from 'gl-matrix';
 
@@ -32,7 +31,6 @@ interface IPointLayerStyleOptions {
   stroke: styleColor;
   strokeOpacity: styleSingle;
   offsets: styleOffset;
-  isGlobel?: boolean;
 }
 // 判断当前使用的 style 中的变量属性是否需要进行数据映射
 export default class FillModel extends BaseModel {
@@ -43,8 +41,6 @@ export default class FillModel extends BaseModel {
       strokeWidth = 0,
       stroke = 'rgba(0,0,0,0)',
       offsets = [0, 0],
-      // TODO: 判断当前图层是否为地球模式
-      isGlobel = false,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
     if (

packages/map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-map",
-  "version": "2.5.30",
+  "version": "2.5.31",
   "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.5.30",
+    "@antv/l7-utils": "^2.5.31",
     "@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.5.30",
+  "version": "2.5.31",
   "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.5.30",
+    "@antv/l7-core": "^2.5.31",
-    "@antv/l7-map": "^2.5.30",
+    "@antv/l7-map": "^2.5.31",
-    "@antv/l7-utils": "^2.5.30",
+    "@antv/l7-utils": "^2.5.31",
     "@babel/runtime": "^7.7.7",
     "@types/amap-js-api": "^1.4.6",
     "@types/mapbox-gl": "^1.11.2",

packages/maps/src/amap/map.ts

@@ -61,6 +61,9 @@ export default class AMapService
    */
   public map: AMap.Map & IAMapInstance;
 
+  // 背景色
+  public bgColor: string = 'rgba(0, 0, 0, 0)';
+
   @inject(TYPES.IGlobalConfigService)
   private readonly configService: IGlobalConfigService;
 
@@ -79,6 +82,9 @@ export default class AMapService
   private viewport: Viewport;
 
   private cameraChangedCallback: (viewport: IViewport) => void;
+  public setBgColor(color: string) {
+    this.bgColor = color;
+  }
 
   public addMarkerContainer(): void {
     const mapContainer = this.map.getContainer();

packages/maps/src/amap2/map.ts

@@ -70,6 +70,9 @@ export default class AMapService
   public sceneCenter!: [number, number]; // 一般使用用户数据的第一个
   public sceneCenterMKT!: [number, number]; // 莫卡托
 
+  // 背景色
+  public bgColor: string = 'rgba(0, 0, 0, 0)';
+
   @inject(TYPES.IGlobalConfigService)
   private readonly configService: IGlobalConfigService;
 
@@ -88,6 +91,9 @@ export default class AMapService
   private viewport: Viewport;
 
   private cameraChangedCallback: (viewport: IViewport) => void;
+  public setBgColor(color: string) {
+    this.bgColor = color;
+  }
 
   /**
    *   设置数据的绘制中心 高德2.0

packages/maps/src/earth/map.ts

@@ -11,6 +11,7 @@ import {
   IMapService,
   IMercator,
   IPoint,
+  IRendererService,
   IStatusOptions,
   IViewport,
   MapServiceEvent,
@@ -42,6 +43,9 @@ export default class L7MapService implements IMapService<Map> {
   public version: string = Version.GLOBEL;
   public map: Map;
 
+  // 背景色
+  public bgColor: string = '#000';
+
   @inject(TYPES.MapConfig)
   private readonly config: Partial<IMapConfig>;
 
@@ -51,6 +55,9 @@ export default class L7MapService implements IMapService<Map> {
   @inject(TYPES.ICoordinateSystemService)
   private readonly coordinateSystemService: ICoordinateSystemService;
 
+  @inject(TYPES.IRendererService)
+  private readonly renderService: IRendererService;
+
   @inject(TYPES.IEventEmitter)
   private eventEmitter: any;
   private viewport: Viewport;
@@ -60,7 +67,9 @@ export default class L7MapService implements IMapService<Map> {
   // T: 用于记录鼠标对相机的控制
   private handleCameraChanging: boolean;
   private handleCameraTimer: any;
-
+  public setBgColor(color: string) {
+    this.bgColor = color;
+  }
   // init
   public addMarkerContainer(): void {
     const container = this.map.getCanvasContainer();
@@ -331,9 +340,15 @@ export default class L7MapService implements IMapService<Map> {
         // mapbox 中固定相机高度为 viewport 高度的 1.5 倍
         cameraHeight: 0,
       });
+
+      this.cameraChangedCallback(this.viewport);
     }
   }
 
+  public clearColor() {
+    this.renderService.clear({ color: [0.0, 0.0, 0.0, 1.0] });
+  }
+
   private handleCameraChanged = (e: any) => {
     const DELAY_TIME = 2000;
     this.handleCameraChanging = true;

packages/maps/src/map/map.ts

@@ -43,6 +43,9 @@ export default class L7MapService implements IMapService<Map> {
   public version: string = Version.L7MAP;
   public map: Map;
 
+  // 背景色
+  public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
+
   @inject(TYPES.MapConfig)
   private readonly config: Partial<IMapConfig>;
 
@@ -58,6 +61,9 @@ export default class L7MapService implements IMapService<Map> {
   private markerContainer: HTMLElement;
   private cameraChangedCallback: (viewport: IViewport) => void;
   private $mapContainer: HTMLElement | null;
+  public setBgColor(color: string) {
+    this.bgColor = color;
+  }
 
   // init
   public addMarkerContainer(): void {

packages/maps/src/mapbox/map.ts

@@ -50,6 +50,9 @@ export default class MapboxService
   public version: string = Version.MAPBOX;
   public map: Map & IMapboxInstance;
 
+  // 背景色
+  public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
+
   @inject(TYPES.MapConfig)
   private readonly config: Partial<IMapConfig>;
 
@@ -65,6 +68,9 @@ export default class MapboxService
   private markerContainer: HTMLElement;
   private cameraChangedCallback: (viewport: IViewport) => void;
   private $mapContainer: HTMLElement | null;
+  public setBgColor(color: string) {
+    this.bgColor = color;
+  }
 
   // init
   public addMarkerContainer(): void {

packages/renderer/package.json

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

packages/scene/package.json

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

packages/scene/src/index.ts

@@ -153,6 +153,10 @@ class Scene
     return this.mapService.map;
   }
 
+  public setBgColor(color: string) {
+    this.mapService.setBgColor(color);
+  }
+
   // layer 管理
   public addLayer(layer: ILayer): void {
     // 为当前图层创建一个容器

packages/source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-source",
-  "version": "2.5.30",
+  "version": "2.5.31",
   "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.5.30",
+    "@antv/l7-core": "^2.5.31",
-    "@antv/l7-utils": "^2.5.30",
+    "@antv/l7-utils": "^2.5.31",
     "@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.5.30",
+  "version": "2.5.31",
   "description": "three for L7 ",
   "keywords": [
     "3D",
@@ -44,9 +44,9 @@
   },
   "homepage": "https://github.com/antvis/L7#readme",
   "dependencies": {
-    "@antv/l7-core": "^2.5.30",
+    "@antv/l7-core": "^2.5.31",
-    "@antv/l7-layers": "^2.5.30",
+    "@antv/l7-layers": "^2.5.31",
-    "@antv/l7-scene": "^2.5.30",
+    "@antv/l7-scene": "^2.5.31",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "reflect-metadata": "^0.1.13",

packages/utils/package.json

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

stories/customMap/components/earth2.tsx

@@ -21,6 +21,8 @@ export default class ScaleComponent extends React.Component {
       }),
     });
 
+    scene.setBgColor('#333');
+
     let data = [
       {
         lng1: 100,
@@ -102,7 +104,8 @@ export default class ScaleComponent extends React.Component {
           },
         },
       )
-      .color('#2E8AE6')
+      // .color('#2E8AE6')
+      .color('#f00')
       .shape('fill')
       .style({
         opacity: 1.0,
@@ -114,16 +117,43 @@ export default class ScaleComponent extends React.Component {
           // earthTime: 4.0
           earthTime: 0.1,
         },
-      });
+      })
-    // .animate(true);
+      .animate(true);
     // earthlayer.setEarthTime(4.0)
+
+    const atomLayer = new EarthLayer()
+      .source(
+        [
+          {
+            lng1: 100,
+            lat1: 30.0,
+            lng2: 130,
+            lat2: 30,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng1',
+            y: 'lat1',
+            x1: 'lng2',
+            y1: 'lat2',
+          },
+        },
+      )
+      .color('#2E8AE6')
+      .shape('atomSphere')
+      .style({
+        opacity: 1.5,
+      });
+
     scene.on('loaded', () => {
       scene.addLayer(earthlayer);
       // scene.addLayer(pointlayer);
       // console.log(pointlayer)
 
       // earthlayer.setEarthTime(4.0);
-
+      scene.addLayer(atomLayer);
       scene.addLayer(lineLayer);
     });
   }