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

README.en-US.md

@@ -0,0 +1,98 @@
+# L7
+
+.
+[![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
+
+Large-scale WebGL-powered Geospatial data visualization analysis framework.
+
+[中文 README](./README.md)
+
+[GitHub](https://github.com/antvis/L7)
+
+Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting.
+
+L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services
+
+## 🌄 L7 visualization demos
+
+![L7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ)
+
+## 🌟 Highlight features of L7 2.0
+
+- 🌏 Data-driven Visualization
+
+  Layer visualization API design base Semiology of Graphics.
+
+  It supports rich map visualization types for a better insight on data.
+
+- 🌏 High performance rendering with 2D/3D effect
+  Real-time and dynamic rendering with millions of spatial data.
+
+- 🌏 Simple and flexible data format
+
+  L7 supports a wide variety of data formats including CSV, JSON, geojson, among others, eliminating the need to run conversions ahead of time.
+
+- 🌏 Multi-basemap
+
+  For global users, Mapbox is easy to be embedded by a simple line of code.
+
+## Getting Started
+
+### 📦 Installation
+
+```bash
+npm install @antv/l7
+```
+
+### Init Map by L7 scene
+
+```javascript
+import { Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [107.054293, 35.246265],
+    zoom: 4.056,
+  }),
+});
+```
+
+### Add Layer
+
+```javascript
+import { PointLayer } from '@antv/l7';
+
+const pointLayer = new PointLayer()
+  .source(data)
+  .shape('circle')
+  .size('mag', [1, 25])
+  .color('mag', ['#5B8FF9', '#5CCEA1'])
+  .style({
+    opacity: 0.3,
+    strokeWidth: 1,
+  });
+
+scene.addLayer(pointLayer);
+```
+
+## :memo: Documentation
+
+- [Getting started with L7](https://l7.antv.vision/en/docs/api/l7)
+- [Tutorials](https://l7.antv.vision/en/docs/tutorial/quickstart)
+- [API documentation](https://l7.antv.vision/en/docs/api/l7)
+- [Examples](https://l7.antv.vision/en/examples/gallery/basic)
+- [Contributor documentation](./.github/CONTRIBUTING.md)
+
+## 🔗 Links
+
+- [L7 React](https://github.com/antvis/L7-React)
+- [L7 Boundary](https://github.com/antvis/L7-boundary)
+- [L7 draw](https://github.com/antvis/L7-draw)
+
+## ✅ License
+
+[MIT license](./LICENSE).

README.md

@@ -1,50 +1,82 @@
-# L7
+## L7 地理空间数据可视分析引擎
 
-.
 [![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
 
-Large-scale WebGL-powered Geospatial data visualization analysis framework.
+[README](./README.en-US.md)
-
-[中文 README](./README.zh-CN.md)
 
 [GitHub](https://github.com/antvis/L7)
 
-Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting.
+```bash
-
+  git clone https://github.com/antvis/L7  --depth=1
-L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services
-
-## 🌄 l7 visualization demos
-
-![l7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ)
-
-## 🌟 Highlight features of L7 2.0
-
-- 🌏 Data-driven Visualization
-
-  Layer visualization API design base Semiology of Graphics.
-
-  It supports rich map visualization types for a better insight on data.
-
-- 🌏 High performance rendering with 2D/3D effect
-  Real-time and dynamic rendering with millions of spatial data.
-
-- 🌏 Simple and flexible data format
-
-  L7 supports a wide variety of data formats including CSV, JSON, geojson, among others, eliminating the need to run conversions ahead of time.
-
-- 🌏 Multi-basemap
-
-  For global users, Mapbox is easy to be embedded by a simple line of code.
-
-## Getting Started
-
-### 📦 Installation
-
 ```
+
+L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
+
+L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
+
+![L7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ)
+
+## 🌟 核心特性
+
+🌏 数据驱动可视化展示
+
+数据驱动，灵活数据映射，从数到形，支持丰富的地图可视化类型，更好洞察数据。
+
+🌏 2D，3D 一体化的海量数据高性能渲染
+
+海量空间数据实时，可交互，动态渲染，
+
+🌏 简单灵活的数据接入
+
+支持 CSV，JSON，GeoJSON 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
+
+🌏 多地图底图支持，支持离线内网部署
+
+屏蔽不同底图之间的差异，用户只需要关注数据层表达，交互。高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
+
+## 🌈 支持丰富的图表类型
+
+#### 点图层
+
+- 气泡图
+- 散点图
+- 符号地图
+- 3D 柱状地图
+- 聚合地图
+- 复合图表地图
+- 自定义 Marker
+
+#### 线图层
+
+- 路径地图
+- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
+- 等值线
+
+#### 面图层
+
+- 填充图
+- 3D 填充图
+
+#### 热力图
+
+- 经典热力图
+- 蜂窝热力图
+- 网格热力图
+
+#### 栅格地图
+
+- 图片
+- Raster
+
+## 📦 如何使用
+
+### 安装
+
+```bash
 npm install @antv/l7
 ```
 
-### Init Map by L7 scene
+### 初始化地图
 
 ```javascript
 import { Scene } from '@antv/l7';
@@ -61,7 +93,7 @@ const scene = new Scene({
 });
 ```
 
-### Add Layer
+### 添加图层
 
 ```javascript
 import { PointLayer } from '@antv/l7';
@@ -79,13 +111,13 @@ const pointLayer = new PointLayer()
 scene.addLayer(pointLayer);
 ```
 
-## :memo: Documentation
+## :memo: 文档
 
-- [Getting started with L7](https://l7.antv.vision/en/docs/api/l7)
+- [开始使用](https://l7.antv.vision/en/docs/api/l7)
-- [Tutorials](https://l7.antv.vision/en/docs/tutorial/quickstart)
+- [教程](https://l7.antv.vision/en/docs/tutorial/quickstart)
-- [API documentation](https://l7.antv.vision/en/docs/api/l7)
+- [文档](https://l7.antv.vision/en/docs/api/l7)
-- [Examples](https://l7.antv.vision/en/examples/gallery/basic)
+- [示例](https://l7.antv.vision/en/examples/gallery/basic)
-- [Contributor documentation](./.github/CONTRIBUTING.md)
+- [贡献](./.github/CONTRIBUTING.md)
 
 ## 🔗 Links
 

README.zh-CN.md

@@ -1,131 +0,0 @@
-## L7 地理空间数据可视分析引擎
-
-[![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
-
-[README](./README.md)
-
-[GitHub](https://github.com/antvis/L7)
-
-```bash
-  git clone https://github.com/antvis/L7  --depth=1
-```
-
-L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
-
-L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
-
-![l7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ)
-
-## 🌟 核心特性
-
-🌏 数据驱动可视化展示
-
-数据驱动，灵活数据映射，从数到形，支持丰富的地图可视化类型，更好洞察数据。
-
-🌏 2D，3D 一体化的海量数据高性能渲染
-
-海量空间数据实时，可交互，动态渲染，
-
-🌏 简单灵活的数据接入
-
-支持 CSV，JSON，GeoJSON 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
-
-🌏 多地图底图支持，支持离线内网部署
-
-屏蔽不同底图之间的差异，用户只需要关注数据层表达，交互。高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
-
-## 🌈 支持丰富的图表类型
-
-#### 点图层
-
-- 气泡图
-- 散点图
-- 符号地图
-- 3D 柱状地图
-- 聚合地图
-- 复合图表地图
-- 自定义 Marker
-
-#### 线图层
-
-- 路径地图
-- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
-- 等值线
-
-#### 面图层
-
-- 填充图
-- 3D 填充图
-
-#### 热力图
-
-- 经典热力图
-- 蜂窝热力图
-- 网格热力图
-
-#### 栅格地图
-
-- 图片
-- Raster
-
-## 📦 如何使用
-
-### 安装
-
-```
-npm install @antv/l7@beta
-
-```
-
-### 初始化地图
-
-```javascript
-import { Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-
-const scene = new Scene({
-  id: 'map',
-  map: new Mapbox({
-    style: 'light',
-    pitch: 0,
-    center: [107.054293, 35.246265],
-    zoom: 4.056,
-  }),
-});
-```
-
-### 添加图层
-
-```javascript
-import { PointLayer } from '@antv/l7';
-
-const pointLayer = new PointLayer()
-  .source(data)
-  .shape('circle')
-  .size('mag', [1, 25])
-  .color('mag', ['#5B8FF9', '#5CCEA1'])
-  .style({
-    opacity: 0.3,
-    strokeWidth: 1,
-  });
-
-scene.addLayer(pointLayer);
-```
-
-## :memo: 文档
-
-- [开始使用](https://l7.antv.vision/en/docs/api/l7)
-- [教程](https://l7.antv.vision/en/docs/tutorial/quickstart)
-- [文档](https://l7.antv.vision/en/docs/api/l7)
-- [示例](https://l7.antv.vision/en/examples/gallery/basic)
-- [贡献](./.github/CONTRIBUTING.md)
-
-## 🔗 Links
-
-- [L7 React](https://github.com/antvis/L7-React)
-- [L7 Boundary](https://github.com/antvis/L7-boundary)
-- [L7 draw](https://github.com/antvis/L7-draw)
-
-## ✅ License
-
-[MIT license](./LICENSE).

docs/api/district/drilldown.zh.md

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

packages/l7/README.md

@@ -10,9 +10,8 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
 
 ### Installation
 
-```
+```bash
  npm install @antv/l7
-
 ```
 
 ### Features

packages/l7/src/index.ts

@@ -1,3 +1,4 @@
+import Source from '@antv/l7-source';
 export * from '@antv/l7-core';
 export * from '@antv/l7-scene';
 export * from '@antv/l7-maps';
@@ -5,3 +6,4 @@ export * from '@antv/l7-layers';
 export * from '@antv/l7-component';
 export * from '@antv/l7-utils';
 export * from './version';
+export { Source };

packages/layers/src/core/BaseLayer.ts

@@ -30,6 +30,7 @@ import {
   IScale,
   IScaleOptions,
   IShaderModuleService,
+  ISource,
   ISourceCFG,
   IStyleAttributeInitializationOptions,
   IStyleAttributeService,
@@ -451,6 +452,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   }
 
   public source(data: any, options?: ISourceCFG): ILayer {
+    if (data?.data) {
+      // 判断是否为source
+      this.setSource(data);
+      return this;
+    }
     this.sourceOption = {
       data,
       options,

packages/layers/src/core/interface.ts

@@ -8,7 +8,8 @@ export interface ILineLayerStyleOptions {
   opacity: styleSingle;
   lineType?: keyof typeof lineStyleType; // 可选参数、线类型(all - dash/solid)
   dashArray?: [number, number]; //  可选参数、虚线间隔
-  segmentNumber: number;
+  segmentNumber?: number;
+
   forward?: boolean; // 可选参数、是否反向(arcLine)
   lineTexture?: boolean; // 可选参数、是否开启纹理贴图功能(all)
   iconStep?: number; // 可选参数、纹理贴图步长(all)
@@ -16,4 +17,6 @@ export interface ILineLayerStyleOptions {
   sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)
   targetColor?: string; // 可选参数、设置渐变色的终点颜色(all)
   thetaOffset?: number; // 可选参数、设置弧线的偏移量
+
+  globalArcHeight?: number; // 可选参数、地球模式下 3D 弧线的高度
 }

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

@@ -13,6 +13,7 @@ import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
+import { EARTH_RADIUS } from '../../earth/utils';
 import line_arc_frag from '../shaders/line_arc_3d_frag.glsl';
 import line_arc_vert from '../shaders/line_arc_3d_vert.glsl';
 const lineStyleObj: { [key: string]: number } = {
@@ -32,6 +33,7 @@ export default class Arc3DModel extends BaseModel {
       lineTexture = false,
       iconStep = 100,
       segmentNumber = 30,
+      globalArcHeight = 10,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
 
     if (dashArray.length === 2) {
@@ -83,6 +85,10 @@ export default class Arc3DModel extends BaseModel {
     }
 
     return {
+      u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0,
+      u_globel_radius: EARTH_RADIUS, // 地球半径
+      u_global_height: globalArcHeight,
+
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
       // u_opacity: opacity === undefined ? 1 : opacity,
@@ -127,6 +133,9 @@ export default class Arc3DModel extends BaseModel {
   }
 
   public buildModels(): IModel[] {
+    const {
+      segmentNumber = 30,
+    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     return [
       this.layer.buildLayerModel({
         moduleName: 'arc3Dline',
@@ -134,6 +143,8 @@ export default class Arc3DModel extends BaseModel {
         fragmentShader: line_arc_frag,
         triangulation: LineArcTriangulation,
         blend: this.getBlend(),
+        segmentNumber,
+        // primitive: gl.POINTS,
       }),
     ];
   }

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

@@ -7,6 +7,9 @@ attribute vec4 a_Instance;
 attribute vec4 a_Color;
 attribute float a_Size;
 
+uniform float u_globel;
+uniform float u_globel_radius;
+uniform float u_global_height: 10;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 uniform float segmentNumber;
@@ -78,6 +81,25 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
   return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction);
 }
 
+float torad(float deg) {
+  return (deg / 180.0) * acos(-1.0);
+}
+
+vec3 lglt2xyz(vec2 lnglat) {
+  float pi = 3.1415926;
+  // TODO: + Math.PI/2 是为了对齐坐标
+  float lng = torad(lnglat.x) + pi / 2.0;
+  float lat = torad(lnglat.y);
+
+  // TODO: 手动增加一些偏移，减轻面的冲突
+  float radius = u_globel_radius;
+
+  float z = radius * cos(lat) * cos(lng);
+  float x = radius * cos(lat) * sin(lng);
+  float y = radius * sin(lat);
+  return vec3(x, y, z);
+}
+
 void main() {
   // cal style mapping - 数据纹理映射部分的计算
   styleMappingMat = mat4(
@@ -160,5 +182,28 @@ void main() {
   } else {
     gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0));
   }
+
+  // 地球模式
+  if(u_globel > 0.0) {
+    vec3 startLngLat = lglt2xyz(a_Instance.rg);
+    vec3 endLngLat = lglt2xyz(a_Instance.ba);
+    float globalRadius = length(startLngLat);
+
+    vec3 lineDir = normalize(endLngLat - startLngLat);
+    vec3 midPointDir = normalize((startLngLat + endLngLat)/2.0);
+
+    // 线的偏移
+    vec3 lnglatOffset = cross(lineDir, midPointDir) * a_Position.y;
+    // 计算起始点和终止点的距离
+    float lnglatLength = length(a_Instance.rg - a_Instance.ba)/50.0;
+    // 计算飞线各个节点相应的高度
+    float lineHeight = u_global_height * (-4.0*segmentRatio*segmentRatio + 4.0 * segmentRatio) * lnglatLength;
+    // 地球点位
+    vec3 globalPoint = normalize(mix(startLngLat, endLngLat, segmentRatio)) * (globalRadius + lineHeight) + lnglatOffset * a_Size;
+    
+    gl_Position = u_ViewProjectionMatrix * vec4(globalPoint, 1.0);
+  }
+ 
+
   setPickingColor(a_PickingColor);
 }

packages/source/src/source.ts

@@ -6,6 +6,7 @@ import {
   IParseDataItem,
   IParserCfg,
   IParserData,
+  ISource,
   ISourceCFG,
   ITransform,
   lazyInject,
@@ -35,7 +36,7 @@ function mergeCustomizer(objValue: any, srcValue: any) {
   }
 }
 
-export default class Source extends EventEmitter {
+export default class Source extends EventEmitter implements ISource {
   public data: IParserData;
 
   // 数据范围
@@ -66,7 +67,7 @@ export default class Source extends EventEmitter {
 
   private clusterIndex: Supercluster;
 
-  constructor(data: any, cfg?: ISourceCFG) {
+  constructor(data: any | ISource, cfg?: ISourceCFG) {
     super();
     // this.rawData = cloneDeep(data);
     this.originData = data;

stories/Layers/components/polygon_line.tsx

@@ -1,6 +1,7 @@
 // @ts-ignore
 import {
   Layers,
+  Source,
   LineLayer,
   PointLayer,
   PolygonLayer,
@@ -43,8 +44,10 @@ export default class World extends React.Component {
       autoFit: true,
     });
 
+    const dataSource = new Source(data);
+
     layer
-      .source(data)
+      .source(dataSource)
       .color('name', [
         '#2E8AE6',
         '#69D1AB',
@@ -65,7 +68,7 @@ export default class World extends React.Component {
     });
 
     linelayer
-      .source(data)
+      .source(dataSource)
       .color('#fff')
       .size(1)
       .shape('line')

stories/customMap/components/earth2.tsx

@@ -0,0 +1,145 @@
+// @ts-ignore
+import { Scene } from '@antv/l7';
+import { PointLayer, EarthLayer, LineLayer } from '@antv/l7-layers';
+import { Earth } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class ScaleComponent extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new Earth({
+        center: [120, 30],
+        pitch: 0,
+        zoom: 3,
+      }),
+    });
+
+    let data = [
+      {
+        lng1: 100,
+        lat1: 30.0,
+        lng2: 130,
+        lat2: 30,
+      },
+    ];
+
+    const lineLayer = new LineLayer({
+      blend: 'normal',
+    })
+      .source(data, {
+        parser: {
+          type: 'json',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2',
+        },
+      })
+      .size(2)
+      .shape('arc3d')
+      .color('#8C1EB2');
+    // .animate(true)
+    // .animate({
+    //   duration: 50,
+    //   interval: 0.2,
+    //   trailLength: 0.05,
+    // });
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json',
+    )
+      .then((d) => d.text())
+      .then((flyline) => {
+        // @ts-ignore
+        const flydata = eval(flyline).map((item) => {
+          // @ts-ignore
+          const latlng1 = item.from.split(',').map((e) => {
+            return e * 1;
+          });
+          // @ts-ignore
+          const latlng2 = item.to.split(',').map((e) => {
+            return e * 1;
+          });
+          return { coord: [latlng1, latlng2] };
+        });
+        const flyLine = new LineLayer({ blend: 'normal' })
+          .source(flydata, {
+            parser: {
+              type: 'json',
+              coordinates: 'coord',
+            },
+          })
+          .color('#b97feb')
+          .shape('arc3d')
+          .size(1)
+          .active(true)
+          .animate({
+            interval: 2,
+            trailLength: 2,
+            duration: 1,
+          })
+          .style({
+            opacity: 1,
+            segmentNumber: 60,
+            globalArcHeight: 20,
+          });
+        scene.addLayer(flyLine);
+      });
+
+    const earthlayer = new EarthLayer()
+      .source(
+        'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
+        {
+          parser: {
+            type: 'image',
+            extent: [121.168, 30.2828, 121.384, 30.4219],
+          },
+        },
+      )
+      .color('#2E8AE6')
+      .shape('fill')
+      .style({
+        opacity: 1.0,
+        radius: 40,
+        globelOtions: {
+          ambientRatio: 0.6, // 环境光
+          diffuseRatio: 0.4, // 漫反射
+          specularRatio: 0.1, // 高光反射
+          // earthTime: 4.0
+          earthTime: 0.1,
+        },
+      });
+    // .animate(true);
+    // earthlayer.setEarthTime(4.0)
+    scene.on('loaded', () => {
+      scene.addLayer(earthlayer);
+      // scene.addLayer(pointlayer);
+      // console.log(pointlayer)
+
+      // earthlayer.setEarthTime(4.0);
+
+      scene.addLayer(lineLayer);
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/customMap/map.stories.tsx

@@ -4,8 +4,10 @@ import * as React from 'react';
 import Map from './components/Map';
 import Map2 from './components/Map2';
 import Earth from './components/earth'
+import Earth2 from './components/earth2'
 // @ts-ignore
 storiesOf('自定义地图', module)
 .add('Earth', () => <Earth />)
+.add('Earth2', () => <Earth2 />)
 .add('地图', () => <Map />)
 .add('地图2', () => <Map2 />);