Merge pull request #132 from antvis/animate

Animate

babel.config.js

@@ -42,10 +42,16 @@ module.exports = api => {
       [
         '@babel/env',
         {
-          useBuiltIns: isCDNBundle ? 'usage' : false,
+          // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
+          useBuiltIns: 'usage',
+          corejs: '3.0.0',
           // set `modules: false` when building CDN bundle, let rollup do commonjs works
           // @see https://github.com/rollup/rollup-plugin-babel#modules
-          modules: (isCDNBundle || isESModule) ? false : 'auto'
+          modules: (isCDNBundle || isESModule) ? false : 'auto',
+          targets: {
+            chrome: 58,
+            ie: 11
+          }
         }
       ],
       [
@@ -54,12 +60,14 @@ module.exports = api => {
           development: isCommonJS
         }
       ],
-      '@babel/preset-typescript',
+      '@babel/preset-typescript'
     ],
+    ignore: [ /[\/\\]core-js/, /@babel[\/\\]runtime/ ],
     plugins: [
       '@babel/plugin-proposal-object-rest-spread',
       '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-proposal-nullish-coalescing-operator',
+      '@babel/plugin-syntax-async-generators',
       [
         '@babel/plugin-proposal-decorators',
         {

docs/api/layer/point_layer/marker.zh.md

@@ -5,5 +5,4 @@ order: 7
 可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
 
 ## 使用
-
 [Marker 文档](../../component)

docs/api/layer/point_layer/symbol.zh.md

@@ -25,9 +25,8 @@ addImage()
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
   );
 
-⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle
-
 ```
+⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle
 
 符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
 

docs/api/map.en.md

@@ -42,12 +42,12 @@ const scene = new Scene({
   id: 'map',
   map: new Mapbox({
     style: 'dark',
-    center: [ 103.83735604457024, 1.360253881403068 ],
+    center: [103.83735604457024, 1.360253881403068],
     pitch: 4.00000000000001,
     zoom: 10.210275860702593,
-    rotation: 19.313180925794313
+    rotation: 19.313180925794313,
-    token:'xxxx - token'
+    token: 'xxxx - token',
-  })
+  }),
 });
 ```
 

docs/api/map.zh.md

@@ -42,12 +42,12 @@ const scene = new Scene({
   id: 'map',
   map: new Mapbox({
     style: 'dark',
-    center: [ 103.83735604457024, 1.360253881403068 ],
+    center: [103.83735604457024, 1.360253881403068],
     pitch: 4.00000000000001,
     zoom: 10.210275860702593,
-    rotation: 19.313180925794313
+    rotation: 19.313180925794313,
-    token:'xxxx - token'
+    token: 'xxxx - token',
-  })
+  }),
 });
 ```
 

docs/tutorial/map/blankmap.en.md

@@ -27,4 +27,10 @@ const scene = new Scene({
 
 离线，无token使用 
 
-<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe
+     src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="worldmap"
+     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+   ></iframe>

docs/tutorial/map/blankmap.zh.md

@@ -8,7 +8,7 @@ order: 2
 
 L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
 
-😃不需要使用mapbox token 拿来就用，不要注册mapbox账户
+不需要使用mapbox token 也不需要注册mapbox账户
 
 ```javascript
 const scene = new Scene({
@@ -26,4 +26,10 @@ const scene = new Scene({
 
 离线，无token使用 
 
-<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe
+     src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="worldmap"
+     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+   ></iframe>

examples/gallery/basic/demo/bus_dark.js

@@ -1,3 +1,5 @@
+// Data Source https://busrouter.sg/visualization/
+
 import { Scene, LineLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 

examples/line/path/demo/bus_dark.js

@@ -1,3 +1,5 @@
+// Data Source https://busrouter.sg/visualization/
+
 import { Scene, LineLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 

examples/line/path/demo/bus_light.js

@@ -1,3 +1,5 @@
+// Data Source https://busrouter.sg/visualization/
+
 import { Scene, LineLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "l7",
   "private": true,
   "repository": {
     "type": "git",
@@ -13,6 +14,8 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-syntax-async-generators": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",

packages/component/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@antv/l7-core": "^2.0.0-beta.21",
     "@antv/l7-utils": "^2.0.0-beta.21",
+    "@babel/runtime": "^7.7.7",
     "@turf/distance": "^6.0.1",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",

packages/core/package.json

@@ -23,6 +23,7 @@
   "license": "ISC",
   "dependencies": {
     "@antv/l7-utils": "^2.0.0-beta.21",
+    "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",
     "element-resize-event": "^3.0.3",

packages/core/src/services/config/ConfigService.ts

@@ -60,7 +60,7 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
   enableSelect: false,
   highlightColor: 'red',
   selectColor: 'blue',
-  enableTAA: true,
+  enableTAA: false,
   jitterScale: 1,
   enableLighting: false,
 };

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

@@ -52,7 +52,7 @@ export interface ILayerModelInitializationOptions {
 export interface ILayerModel {
   render(): void;
   getUninforms(): IModelUniform;
-  getBlend(): IBlendOptions;
+  getDefaultStyle(): unknown;
   buildModels(): IModel[];
 }
 export interface IModelUniform {

packages/layers/package.json

@@ -25,9 +25,11 @@
     "@antv/l7-core": "^2.0.0-beta.21",
     "@antv/l7-source": "^2.0.0-beta.21",
     "@antv/l7-utils": "^2.0.0-beta.21",
+    "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.1.0",
     "@turf/meta": "^6.0.2",
     "@types/d3-color": "^1.2.2",
+    "core-js": "3",
     "d3-array": "^2.3.1",
     "d3-color": "^1.4.0",
     "d3-scale": "^3.1.0",

packages/layers/src/core/BaseLayer.ts

@@ -221,7 +221,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public init() {
     // 设置配置项
     const sceneId = this.container.get<string>(TYPES.SceneID);
-    this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
+    this.configService.setLayerConfig(sceneId, this.id, {});
 
     // 全局容器服务
     this.iconService = this.container.get<IIconService>(TYPES.IIconService);
@@ -298,7 +298,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     this.inited = true;
 
     this.hooks.afterInit.call();
-
+    // 更新 module 样式
+    this.updateLayerConfig({
+      ...this.rawConfig,
+      ...(this.getDefaultConfig() as object),
+    });
     this.buildModels();
     // 触发初始化完成事件;
     this.emit('inited');
@@ -714,6 +718,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     throw new Error('Method not implemented.');
   }
 
+  protected getModelType(): unknown {
+    throw new Error('Method not implemented.');
+  }
+  protected getDefaultConfig() {
+    return {};
+  }
   private splitValuesAndCallbackInAttribute(
     valuesOrCallback?: unknown[],
     defaultValues?: unknown[],

packages/layers/src/core/BaseModel.ts

@@ -8,6 +8,7 @@ import {
   IGlobalConfigService,
   IIconService,
   ILayer,
+  ILayerConfig,
   ILayerModel,
   IMapService,
   IModel,
@@ -20,7 +21,8 @@ import {
   TYPES,
 } from '@antv/l7-core';
 import { BlendTypes } from '../utils/blend';
-export default class BaseModel implements ILayerModel {
+export default class BaseModel<ChildLayerStyleOptions = {}>
+  implements ILayerModel {
   public triangulation: Triangulation;
 
   protected layer: ILayer;
@@ -60,6 +62,9 @@ export default class BaseModel implements ILayerModel {
     const { blend = 'normal' } = this.layer.getLayerConfig();
     return BlendTypes[BlendType[blend]] as IBlendOptions;
   }
+  public getDefaultStyle(): unknown {
+    return {};
+  }
   public getUninforms(): IModelUniform {
     throw new Error('Method not implemented.');
   }

packages/layers/src/heatmap/index.ts

@@ -1,10 +1,10 @@
 import { AttributeType, gl, IEncodeFeature, ILayer } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
 import HeatMapModels, { HeatMapModelType } from './models';
-interface IPointLayerStyleOptions {
+interface IHeatMapLayerStyleOptions {
   opacity: number;
 }
-export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
+export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
   public type: string = 'HeatMapLayer';
   protected getConfigSchema() {
     return {
@@ -37,7 +37,7 @@ export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
     this.layerModel = new HeatMapModels[shape](this);
     this.models = this.layerModel.buildModels();
   }
-  private getModelType(): HeatMapModelType {
+  protected getModelType(): HeatMapModelType {
     const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
       'shape',
     );

packages/layers/src/line/dash.ts

@@ -6,6 +6,7 @@ import line_dash_vert from './shaders/line_dash_vert.glsl';
 interface IDashLineLayerStyleOptions {
   opacity: number;
   dashArray: [number, number];
+  lineType: string;
 }
 export default class DashLineLayer extends BaseLayer<
   IDashLineLayerStyleOptions
@@ -25,7 +26,11 @@ export default class DashLineLayer extends BaseLayer<
   }
 
   protected renderModels() {
-    const { opacity, dashArray = [10, 5] } = this.getLayerConfig();
+    const {
+      opacity,
+      dashArray = [10, 5],
+      lineType = 'dash',
+    } = this.getLayerConfig();
     this.models.forEach((model) =>
       model.draw({
         uniforms: {
@@ -132,30 +137,30 @@ export default class DashLineLayer extends BaseLayer<
       },
     });
 
-    this.styleAttributeService.registerStyleAttribute({
+    // this.styleAttributeService.registerStyleAttribute({
-      name: 'startPos',
+    //   name: 'startPos',
-      type: AttributeType.Attribute,
+    //   type: AttributeType.Attribute,
-      descriptor: {
+    //   descriptor: {
-        name: 'a_StartPos',
+    //     name: 'a_StartPos',
-        buffer: {
+    //     buffer: {
-          // give the WebGL driver a hint that this buffer may change
+    //       // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
+    //       usage: gl.DYNAMIC_DRAW,
-          data: [],
+    //       data: [],
-          type: gl.FLOAT,
+    //       type: gl.FLOAT,
-        },
+    //     },
-        size: 3,
+    //     size: 3,
-        update: (
+    //     update: (
-          feature: IEncodeFeature,
+    //       feature: IEncodeFeature,
-          featureIdx: number,
+    //       featureIdx: number,
-          vertex: number[],
+    //       vertex: number[],
-          attributeIdx: number,
+    //       attributeIdx: number,
-        ) => {
+    //     ) => {
-          const coordinates = feature.coordinates as number[][];
+    //       const coordinates = feature.coordinates as number[][];
-          const coord = coordinates[0];
+    //       const coord = coordinates[0];
-          return coord.length === 3 ? coord : [...coord, 0.0];
+    //       return coord.length === 3 ? coord : [...coord, 0.0];
-        },
+    //     },
-      },
+    //   },
-    });
+    // });
 
     this.styleAttributeService.registerStyleAttribute({
       name: 'distance',

packages/layers/src/line/index.ts

@@ -1,9 +1,15 @@
 import BaseLayer from '../core/BaseLayer';
 import LineModels, { LineModelType } from './models';
-interface IPointLayerStyleOptions {
+export enum LineType {
-  opacity: number;
+  'solid' = 'solid',
+  'dash' = 'dash',
 }
-export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
+interface ILineLayerStyleOptions {
+  opacity: number;
+  lineType?: keyof typeof LineType;
+  dashArray?: [number, number];
+}
+export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
   public type: string = 'LineLayer';
 
   private animateStartTime: number = 0;
@@ -34,7 +40,7 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
     this.layerModel = new LineModels[shape](this);
     this.models = this.layerModel.buildModels();
   }
-  private getModelType(): LineModelType {
+  protected getModelType(): LineModelType {
     const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
       'shape',
     );

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

@@ -42,6 +42,7 @@ export default class LineModel extends BaseModel {
     ];
   }
   protected registerBuiltinAttributes() {
+    // const lineType = this
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'size',

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

@@ -8,6 +8,7 @@ attribute vec3 a_Position;
 attribute float a_Distance;
 uniform mat4 u_ModelMatrix;
 uniform vec2 u_dash_array: [10.0, 5.];
+uniform  float u_line_type: 0.0;
 uniform float u_dash_offset: 0;
 
 varying vec4 v_color;
@@ -21,6 +22,7 @@ varying float v_distance_ratio;
 #pragma include "projection"
 void main() {
 
+   
   v_distance_ratio = a_Distance / a_Total_Distance;
 
   v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;

packages/layers/src/point/index.ts

@@ -19,6 +19,19 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
       },
     };
   }
+  protected getDefaultConfig() {
+    const type = this.getModelType();
+    const defaultConfig = {
+      normal: {
+        blend: 'additive',
+      },
+      fill: {},
+      extrude: {},
+      image: {},
+      text: {},
+    };
+    return defaultConfig[type];
+  }
   protected renderModels() {
     if (this.layerModelNeedUpdate) {
       this.models = this.layerModel.buildModels();
@@ -38,7 +51,7 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
     this.models = this.layerModel.buildModels();
   }
 
-  private getModelType(): PointType {
+  protected getModelType(): PointType {
     // pointlayer
     //  2D、 3d、 shape、image、text、normal、
     const layerData = this.getEncodedData();

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

@@ -11,7 +11,7 @@ import BaseModel from '../../core/BaseModel';
 import { PointImageTriangulation } from '../../core/triangulation';
 import pointImageFrag from '../shaders/image_frag.glsl';
 import pointImageVert from '../shaders/image_vert.glsl';
-interface IPointLayerStyleOptions {
+interface IImageLayerStyleOptions {
   opacity: number;
 }
 
@@ -19,7 +19,7 @@ export default class ImageModel extends BaseModel {
   private texture: ITexture2D;
 
   public getUninforms(): IModelUniform {
-    const { opacity } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
+    const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
     return {
       u_opacity: opacity || 1.0,
       u_texture: this.texture,

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

@@ -3,6 +3,7 @@ import {
   BlendType,
   gl,
   IEncodeFeature,
+  ILayerConfig,
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
@@ -27,6 +28,11 @@ export function PointTriangulation(feature: IEncodeFeature) {
 }
 
 export default class NormalModel extends BaseModel {
+  public getDefaultStyle(): Partial<IPointLayerStyleOptions & ILayerConfig> {
+    return {
+      blend: 'additive',
+    };
+  }
   public getUninforms(): IModelUniform {
     const {
       opacity = 1,
@@ -79,4 +85,11 @@ export default class NormalModel extends BaseModel {
       },
     });
   }
+  private defaultStyleOptions(): Partial<
+    IPointLayerStyleOptions & ILayerConfig
+  > {
+    return {
+      blend: BlendType.additive,
+    };
+  }
 }

packages/layers/src/polygon/index.ts

@@ -36,7 +36,7 @@ export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
     this.models = this.layerModel.buildModels();
   }
 
-  private getModelType(): PolygonModelType {
+  protected getModelType(): PolygonModelType {
     const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
       'shape',
     );

packages/layers/src/raster/image.ts

@@ -9,11 +9,11 @@ import BaseLayer from '../core/BaseLayer';
 import { RasterImageTriangulation } from '../core/triangulation';
 import rasterImageFrag from './shaders/image_frag.glsl';
 import rasterImageVert from './shaders/image_vert.glsl';
-interface IPointLayerStyleOptions {
+interface IRaterLayerStyleOptions {
   opacity: number;
 }
 
-export default class ImageLayer extends BaseLayer<IPointLayerStyleOptions> {
+export default class ImageLayer extends BaseLayer<IRaterLayerStyleOptions> {
   public type: string = 'ImageLayer';
   protected texture: ITexture2D;
 

packages/maps/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@antv/l7-core": "^2.0.0-beta.21",
     "@antv/l7-utils": "^2.0.0-beta.21",
+    "@babel/runtime": "^7.7.7",
     "gl-matrix": "^3.1.0",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",

packages/maps/src/amap/index.ts

@@ -232,7 +232,6 @@ export default class AMapService
       ...rest
     } = this.config;
     // 高德地图创建独立的container；
-
     // tslint:disable-next-line:typedef
     await new Promise((resolve) => {
       const resolveMap = () => {

packages/renderer/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@antv/l7-core": "^2.0.0-beta.21",
+    "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "inversify-logging": "^0.2.1",
     "lodash": "^4.17.15",

packages/scene/package.json

@@ -27,6 +27,7 @@
     "@antv/l7-maps": "^2.0.0-beta.21",
     "@antv/l7-renderer": "^2.0.0-beta.21",
     "@antv/l7-utils": "^2.0.0-beta.21",
+    "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "inversify-inject-decorators": "^3.1.0",
     "mapbox-gl": "^1.2.1",

packages/source/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@antv/l7-core": "^2.0.0-beta.21",
     "@antv/l7-utils": "^2.0.0-beta.21",
+    "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",
     "@turf/invariant": "^6.1.2",

packages/utils/package.json

@@ -22,6 +22,7 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
+    "@babel/runtime": "^7.7.7",
     "@turf/helpers": "^6.1.4",
     "eventemitter3": "^4.0.0",
     "gl-matrix": "^3.1.0",

stories/Layers/Layers.stories.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import Arc2DLineDemo from './components/Arc2DLine';
 import ArcLineDemo from './components/Arcline';
 import Column from './components/column';
+import DashLineDemo from './components/dash';
 import DataUpdate from './components/data_update';
 import HeatMapDemo from './components/HeatMap';
 import LightDemo from './components/light';
@@ -24,6 +25,7 @@ storiesOf('图层', module)
   .add('图片标注', () => <PointImage />)
   .add('面3d图层', () => <Polygon3D />)
   .add('线图层', () => <LineLayer />)
+  .add('虚线', () => <DashLineDemo />)
   .add('3D弧线', () => <ArcLineDemo />)
   .add('2D弧线', () => <Arc2DLineDemo />)
   .add('热力图', () => <HeatMapDemo />)

stories/Layers/components/Point.tsx

@@ -19,11 +19,12 @@ export default class Point3D extends React.Component {
 
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         center: [120.19382669582967, 30.258134],
         pitch: 0,
         style: 'dark',
         zoom: 3,
+        token: 'test',
       }),
     });
     scene.on('loaded', () => {

stories/Layers/components/dash.tsx

@@ -0,0 +1,64 @@
+import { DashLineLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class DashLineDemo extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
+    );
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        center: [102.602992, 23.107329],
+        pitch: 0,
+        style: 'dark',
+        zoom: 14,
+      }),
+    });
+    const lineLayer = new DashLineLayer()
+      .source(await response.json())
+      .size(1)
+      .shape('line')
+      .color(
+        'ELEV',
+        [
+          '#E8FCFF',
+          '#CFF6FF',
+          '#A1E9ff',
+          '#65CEF7',
+          '#3CB1F0',
+          '#2894E0',
+          '#1772c2',
+          '#105CB3',
+          '#0D408C',
+          '#002466',
+        ].reverse(),
+      );
+
+    scene.addLayer(lineLayer);
+    this.scene = scene;
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Layers/components/light.tsx

@@ -18,7 +18,7 @@ export default class Light extends React.Component {
 
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         pitch: 0,
         style: 'dark',
         center: [116.405289, 39.904987],
@@ -27,9 +27,7 @@ export default class Light extends React.Component {
     });
     this.scene = scene;
     scene.on('loaded', async () => {
-      const pointLayer = new PointLayer({
+      const pointLayer = new PointLayer()
-        blend: 'min',
-      })
         .source(pointsData, {
           parser: {
             type: 'csv',
@@ -37,8 +35,8 @@ export default class Light extends React.Component {
             y: 'lat',
           },
         })
-        .size(2)
+        .size(1)
-        .color('#FFFECC')
+        .color('#ffa842')
         .style({
           opacity: 1,
         });

yarn.lock

@@ -88,10 +88,10 @@
     d3-timer "~1.0.6"
     wolfy87-eventemitter "~5.1.0"
 
-"@antv/gatsby-theme-antv@^0.10.4":
+"@antv/gatsby-theme-antv@^0.10.17":
-  version "0.10.7"
+  version "0.10.24"
-  resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-0.10.7.tgz#e2c2620aee959e635c5c95b5d9fa2e9f87812ca9"
+  resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-0.10.24.tgz#0a57af29a1fc75c390eb70a0c490181e778ecf82"
-  integrity sha512-hYkdm6Knt+2KxUoNoXXlDC9KQcAIZdRITqXGx25cUNgpz0+GBDtg15D2JWMwjDpgu86cjjIjMM1860jvTcRm5Q==
+  integrity sha512-MMqDmv4hC8f61rFftrjcoGqGGpr+j+uDkPX+AmwpFEaYWzh+QqDO56I0IZUzwYhLihFwjH5z78JtkLO2bDNk4g==
   dependencies:
     "@babel/plugin-transform-modules-umd" "^7.2.0"
     "@babel/preset-env" "^7.6.3"
@@ -101,7 +101,7 @@
     "@hot-loader/react-dom" "^16.9.0+4.12.11"
     "@stackblitz/sdk" "^1.3.0"
     "@types/classnames" "^2.2.9"
-    "@types/codemirror" "^0.0.80"
+    "@types/codemirror" "^0.0.81"
     "@types/git-url-parse" "^9.0.0"
     "@types/lodash-es" "^4.17.3"
     "@types/parse-github-url" "^1.0.0"
@@ -150,6 +150,7 @@
     gatsby-transformer-sharp "^2.2.14"
     git-url-parse "^11.1.2"
     i18next "^19.0.0"
+    indent-string "^4.0.0"
     insert-css "^2.0.0"
     less "^3.10.3"
     lodash "^4.17.15"
@@ -176,6 +177,7 @@
     react-use "^13.8.0"
     release-it "^12.4.3"
     shallowequal "^1.1.0"
+    slash "^3.0.0"
     slick-carousel "^1.8.1"
     ts-jest "^24.1.0"
     typescript "^3.6.3"
@@ -1032,6 +1034,16 @@
     resolve "^1.8.1"
     semver "^5.5.1"
 
+"@babel/plugin-transform-runtime@^7.7.6":
+  version "7.7.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61"
+  integrity sha512-tajQY+YmXR7JjTwRvwL4HePqoL3DYxpYXIHKVvrOIvJmeHe2y1w4tz5qz9ObUDC9m76rCzIMPyn4eERuwA4a4A==
+  dependencies:
+    "@babel/helper-module-imports" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
 "@babel/plugin-transform-shorthand-properties@^7.2.0", "@babel/plugin-transform-shorthand-properties@^7.7.4":
   version "7.7.4"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.7.4.tgz#74a0a9b2f6d67a684c6fbfd5f0458eb7ba99891e"
@@ -1283,6 +1295,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
+  integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/standalone@^7.6.4":
   version "7.7.4"
   resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.7.4.tgz#9adcda4b7c33627c65eacf87f5c1f950987294c2"
@@ -3657,10 +3676,10 @@
   resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b"
   integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==
 
-"@types/codemirror@^0.0.80":
+"@types/codemirror@^0.0.81":
-  version "0.0.80"
+  version "0.0.81"
-  resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.80.tgz#c047bb30462582615c3d51e5be6155315f764427"
+  resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.81.tgz#3cea2c1006406973d4aad212e617638cbfc2965b"
-  integrity sha512-oTi/s9PkWo3+/L9UrRpqngc4i6fRFMp3YQS0nv3Wy5vjl9n6GsqI9oNF6rjl/7J16Ipe67F9eatwRMTSB/Bo0w==
+  integrity sha512-QoeIb9tn/TZp0IzNyMKlcwHR6pHxNoIW9mKqF7asAsj+AWqpFOEUsxia756L6WKBQNk2psHpu+aFuIFqo3Ac0A==
   dependencies:
     "@types/tern" "*"