fix: layer style storkeColor->stroke

build/rollup.config.js

@@ -73,7 +73,8 @@ module.exports = [
             'isFunction',
             'cloneDeep',
             'isString',
-            'isNumber'
+            'isNumber',
+            'merge'
           ]
         }
       }),

packages/core/src/utils/vertex-compression.ts

@@ -14,7 +14,7 @@ export interface ICircleVertex {
   color: number[];
   radius: number;
   opacity: number;
-  strokeColor: number[];
+  stroke: number[];
   strokeWidth: number;
   strokeOpacity: number;
 }
@@ -68,7 +68,7 @@ export function packCircleVertex(
     tileY,
     shape,
     opacity, // packed buffer1
-    strokeColor,
+    stroke,
     strokeWidth,
     strokeOpacity, // packed buffer2
   } = props;
@@ -81,8 +81,8 @@ export function packCircleVertex(
     packUint8ToFloat(color[2], color[3]),
   ];
   const packedStrokeColor: [number, number] = [
-    packUint8ToFloat(strokeColor[0], strokeColor[1]),
-    packUint8ToFloat(strokeColor[2], strokeColor[3]),
+    packUint8ToFloat(stroke[0], stroke[1]),
+    packUint8ToFloat(stroke[2], stroke[3]),
   ];
 
   [

packages/layers/src/core/BaseLayer.ts

@@ -55,7 +55,7 @@ let layerIdCounter = 0;
 export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   implements ILayer {
   public id: string = `${layerIdCounter++}`;
-  public name: string;
+  public name: string = `${layerIdCounter++}`;
   public type: string;
   public visible: boolean = true;
   public zIndex: number = 0;

packages/layers/src/core/interface.ts

@@ -1,4 +1,4 @@
-export const enum lineStyleType {
+export enum lineStyleType {
   'solid' = 0.0,
   'dash' = 1.0,
 }
@@ -9,8 +9,3 @@ export interface ILineLayerStyleOptions {
   dashArray?: [number, number];
   segmentNumber: number;
 }
-
-export const lineStyleObj: { [key: string]: number } = {
-  solid: 0.0,
-  dash: 1.0,
-};

packages/layers/src/plugins/ConfigSchemaValidationPlugin.ts

@@ -21,12 +21,12 @@ export default class ConfigSchemaValidationPlugin implements ILayerPlugin {
   public apply(layer: ILayer) {
     layer.hooks.init.tap('ConfigSchemaValidationPlugin', () => {
       this.configService.registerLayerConfigSchemaValidator(
-        layer.name,
+        layer.name as string,
         layer.getConfigSchemaForValidation(),
       );
 
       const { valid, errorText } = this.configService.validateLayerConfig(
-        layer.name,
+        layer.name as string,
         layer.getLayerConfig(),
       );
 

packages/layers/src/point/index.ts

@@ -4,7 +4,7 @@ import PointModels, { PointType } from './models/index';
 interface IPointLayerStyleOptions {
   opacity: number;
   strokeWidth: number;
-  strokeColor: string;
+  stroke: string;
 }
 export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
   public type: string = 'PointLayer';

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

@@ -15,19 +15,19 @@ import pointFillVert from '../shaders/fill_vert.glsl';
 interface IPointLayerStyleOptions {
   opacity: number;
   strokeWidth: number;
-  strokeColor: string;
+  stroke: string;
 }
 export default class FillModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       opacity = 1,
-      strokeColor = 'rgb(0,0,0,0)',
+      stroke = 'rgb(0,0,0,0)',
       strokeWidth = 1,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     return {
       u_opacity: opacity,
       u_stroke_width: strokeWidth,
-      u_stroke_color: rgb2arr(strokeColor),
+      u_stroke_color: rgb2arr(stroke),
     };
   }
 

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

@@ -16,7 +16,7 @@ import normalVert from '../shaders/normal_vert.glsl';
 interface IPointLayerStyleOptions {
   opacity: number;
   strokeWidth: number;
-  strokeColor: string;
+  stroke: string;
 }
 export function PointTriangulation(feature: IEncodeFeature) {
   const coordinates = feature.coordinates as number[];
@@ -36,13 +36,13 @@ export default class NormalModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       opacity = 1,
-      strokeColor = 'rgb(0,0,0,0)',
+      stroke = 'rgb(0,0,0,0)',
       strokeWidth = 1,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     return {
       u_opacity: opacity,
       u_stroke_width: strokeWidth,
-      u_stroke_color: rgb2arr(strokeColor),
+      u_stroke_color: rgb2arr(stroke),
     };
   }
   public buildModels(): IModel[] {

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

@@ -34,7 +34,7 @@ void main() {
   float antialiasblur = 1.0 / (a_Size + u_stroke_width);
 
   // construct point coords
-  v_data = vec4(extrude, antialiasblur,  );
+  v_data = vec4(extrude, antialiasblur,shape_type);
 
   setPickingColor(a_PickingColor);
 }

stories/Layers/components/data_update.tsx

@@ -48,7 +48,7 @@ export default class DataUpdate extends React.Component {
       .active(false)
       .color('#2F54EB')
       .style({
-        strokeColor: '#fff',
+        stroke: '#fff',
         strokeWidth: 2,
         opacity: 1,
       });