fix(layer): fix default model config

babel.config.js

@@ -54,7 +54,7 @@ module.exports = api => {
           development: isCommonJS
         }
       ],
-      '@babel/preset-typescript',
+      '@babel/preset-typescript'
     ],
     plugins: [
       '@babel/plugin-proposal-object-rest-spread',
@@ -66,6 +66,11 @@ module.exports = api => {
           legacy: true
         }
       ],
+      [ '@babel/plugin-transform-runtime',
+        {
+          regenerator: true
+        }
+      ],
       [
         '@babel/plugin-proposal-class-properties',
         {

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

@@ -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>

package.json

@@ -13,6 +13,7 @@
     "@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-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",

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

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/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.21"
-  resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-0.10.7.tgz#e2c2620aee959e635c5c95b5d9fa2e9f87812ca9"
+  resolved "https://registry.npm.alibaba-inc.com/@antv/gatsby-theme-antv/download/@antv/gatsby-theme-antv-0.10.21.tgz#2f89811634e632da1b1b0632ea6ca07b1b5e86a4"
-  integrity sha512-hYkdm6Knt+2KxUoNoXXlDC9KQcAIZdRITqXGx25cUNgpz0+GBDtg15D2JWMwjDpgu86cjjIjMM1860jvTcRm5Q==
+  integrity sha1-L4mBFjTmMtobGwYy6mygextehqQ=
   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.npm.alibaba-inc.com/@babel/plugin-transform-runtime/download/@babel/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61"
+  integrity sha1-TytUjIiSL7mOwcJCr9RzPuPhL2E=
+  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"
@@ -3657,10 +3669,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.npm.alibaba-inc.com/@types/codemirror/download/@types/codemirror-0.0.81.tgz#3cea2c1006406973d4aad212e617638cbfc2965b"
-  integrity sha512-oTi/s9PkWo3+/L9UrRpqngc4i6fRFMp3YQS0nv3Wy5vjl9n6GsqI9oNF6rjl/7J16Ipe67F9eatwRMTSB/Bo0w==
+  integrity sha1-POosEAZAaXPUqtIS5hdjjL/Clls=
   dependencies:
     "@types/tern" "*"