Chore lint update (#1600)

* chore: update lint config

* fix: 移除空行

* fix: util export

* chore: 优化lint 配置

package.json

@@ -172,10 +172,10 @@
     "build": " yarn worker && lerna run build",
     "postbuild": "yarn build:declarations",
     "build:declarations": "lerna run tsc --stream --no-bail",
-    "tslint": "tslint  packages/**/src/**/*.ts  -c tslint.prod.json",
+    "lint:tslint": "tslint -p tsconfig.json -c tslint.prod.json",
-    "lint:tslint-fix": "tslint  packages/**/src/**/*.ts  -c tslint.prod.json --fix",
+    "lint-tslint-fix": "tslint -p tsconfig.json -c tslint.prod.json --fix",
-    "lint:fix": "prettier --write  packages/**/src/**/*.ts packages/site/docs/api/**/*.md packages/site/docs/api/*.md  dev-demos/**/**/*.tsx  *.md",
+    "lint-fix": "prettier --write  packages/**/src/**/*.ts packages/site/docs/api/**/*.md packages/site/docs/api/*.md  dev-demos/**/**/*.tsx  *.md",
-    "lint:src": "eslint packages/**/src/ dev-demos/ --ext .ts,.tsx",
+    "lint:src": "eslint dev-demos/ --ext .ts,.tsx",
     "lint:examples": "eslint packages/site/examples --fix --ext .js",
     "lint:css": "stylelint 'packages/**/src/**/*.js{,x}'",
     "lint": "run-p -c lint:*",

packages/component/__tests__/control.spec.ts

@@ -7,7 +7,9 @@ class TestControl extends Control {
   public onAdd(): HTMLElement {
     return DOM.create('div');
   }
-  public onRemove(): void {}
+  public onRemove(): void {
+    return;
+  }
 }
 
 describe('control', () => {

packages/component/__tests__/mapTheme.spec.ts

@@ -27,11 +27,11 @@ describe('mapTheme', () => {
       'mapbox://styles/mapbox/streets-v11',
     );
 
-    const optionList = ((control
+    const optionList = (
-      .getPopper()
+      control.getPopper().getContent() as HTMLDivElement
-      .getContent() as HTMLDivElement).querySelectorAll(
+    ).querySelectorAll(
       '.l7-select-control-item',
-    ) as unknown) as HTMLDivElement[];
+    ) as unknown as HTMLDivElement[];
     optionList[1].click();
 
     // expect(control.getSelectValue()).toEqual(

packages/component/__tests__/popup.spec.ts

@@ -8,7 +8,7 @@ describe('popup', () => {
   it('life cycle', () => {
     const popup = new Popup({
       html: '123456',
-      className: className,
+      className,
       lngLat: {
         lng: 120,
         lat: 30,

packages/component/__tests__/selectControl.spec.ts

@@ -27,6 +27,7 @@ class SingleControl extends SelectControl {
   }
 }
 
+// tslint:disable-next-line: max-classes-per-file
 class MultiControl extends SelectControl {
   public getDefault(option: any): any {
     return {

packages/component/package.json

@@ -36,7 +36,8 @@
     "supercluster": "^7.0.0"
   },
   "devDependencies": {
-    "@antv/l7-test-utils": "2.13.6",
+    "@antv/l7-layers": "^2.13.6",
+    "@antv/l7-test-utils": "^2.13.6",
     "gcoord": "^0.3.2",
     "less": "^4.1.3"
   },

packages/component/src/control/baseControl/buttonControl.ts

@@ -11,7 +11,7 @@ export interface IButtonControlOption extends IControlOption {
 }
 
 export default class ButtonControl<
-  O extends IButtonControlOption = IButtonControlOption
+  O extends IButtonControlOption = IButtonControlOption,
 > extends Control<O> {
   /**
    * 当前按钮是否禁用

packages/component/src/control/baseControl/control.ts

@@ -16,7 +16,6 @@ import { Container } from 'inversify';
 import { ControlEvent } from '../../interface';
 
 export { PositionType } from '@antv/l7-core';
-
 export { Control };
 
 export interface IControlOption {

packages/component/src/control/baseControl/index.ts

@@ -1,4 +1,4 @@
-export * from './control';
 export * from './buttonControl';
+export * from './control';
 export * from './popperControl';
 export * from './selectControl';

packages/component/src/control/baseControl/popperControl.ts

@@ -26,7 +26,7 @@ const PopperPlacementMap: Record<PositionName, PopperPlacement> = {
 };
 
 export default class PopperControl<
-  O extends IPopperControlOption = IPopperControlOption
+  O extends IPopperControlOption = IPopperControlOption,
 > extends ButtonControl<O> {
   /**
    * 气泡实例
@@ -70,11 +70,8 @@ export default class PopperControl<
   }
 
   public initPopper() {
-    const {
+    const { popperClassName, popperPlacement, popperTrigger } =
-      popperClassName,
+      this.controlOption;
-      popperPlacement,
-      popperTrigger,
-    } = this.controlOption;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const popperContainer = this.mapsService.getMapContainer()!;
 

packages/component/src/control/baseControl/selectControl.ts

@@ -31,7 +31,7 @@ enum SelectControlConstant {
 }
 
 export default class SelectControl<
-  O extends ISelectControlOption = ISelectControlOption
+  O extends ISelectControlOption = ISelectControlOption,
 > extends PopperControl<O> {
   /**
    * 当前选中的值

packages/component/src/index.ts

@@ -6,18 +6,16 @@ import './assets/iconfont/iconfont.js';
 import './css/index.css';
 
 export * from './control/baseControl';
-export * from './control/logo';
-export * from './control/fullscreen';
 export * from './control/exportImage';
+export * from './control/fullscreen';
 export * from './control/geoLocate';
-export * from './control/mapTheme';
 export * from './control/layerSwitch';
+export * from './control/logo';
+export * from './control/mapTheme';
 export * from './control/mouseLocation';
-export * from './control/zoom';
 export * from './control/scale';
-export * from './popup/popup';
+export * from './control/zoom';
-export * from './popup/layerPopup';
-
-export { Marker, MarkerLayer };
-
 export * from './interface';
+export * from './popup/layerPopup';
+export * from './popup/popup';
+export { Marker, MarkerLayer };

packages/component/src/marker-layer.ts

@@ -83,7 +83,9 @@ export default class MarkerLayer extends EventEmitter {
 
   // 设置容器大小
   private setContainerSize() {
-    if (!this.mapsService) return;
+    if (!this.mapsService) {
+      return;
+    }
     const container = this.mapsService.getContainer();
     this.containerSize = {
       containerWidth: container?.scrollWidth || 0,
@@ -117,7 +119,6 @@ export default class MarkerLayer extends EventEmitter {
     // if(this.inited) {
     //   marker.addTo(this.scene);
     // }
-     
   }
 
   public removeMarker(marker: IMarker) {
@@ -274,9 +275,8 @@ export default class MarkerLayer extends EventEmitter {
   private clusterMarker(feature: any) {
     const clusterOption = this.markerLayerOption.clusterOption;
 
-    const {
+    const { element = this.generateElement.bind(this) } =
-      element = this.generateElement.bind(this),
+      clusterOption as IMarkerStyleOption;
-    } = clusterOption as IMarkerStyleOption;
     const marker = new Marker({
       element: element(feature),
     }).setLnglat({
@@ -292,9 +292,13 @@ export default class MarkerLayer extends EventEmitter {
   }
 
   private update() {
-    if (!this.mapsService) return;
+    if (!this.mapsService) {
+      return;
+    }
     // 当图层中无marker时，无需更新
-    if (this.markers.length === 0) return;
+    if (this.markers.length === 0) {
+      return;
+    }
 
     const zoom = this.mapsService.getZoom();
     const bbox = this.mapsService.getBounds();

packages/component/src/marker.ts

@@ -27,6 +27,7 @@ export default class Marker extends EventEmitter {
   private lngLat: ILngLat;
   private scene: Container;
   private added: boolean = false;
+  // tslint:disable-next-line: no-empty
   public getMarkerLayerContainerSize(): IMarkerContainerAndBounds | void {}
 
   constructor(option?: Partial<IMarkerOption>) {
@@ -244,7 +245,9 @@ export default class Marker extends EventEmitter {
       const { containerHeight, containerWidth, bounds } =
         this.getMarkerLayerContainerSize() || this.getCurrentContainerSize();
 
-      if (!bounds) return;
+      if (!bounds) {
+        return;
+      }
       // 当前可视区域包含跨日界线
       if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
         if (pos.x > containerWidth) {
@@ -349,7 +352,7 @@ export default class Marker extends EventEmitter {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private addDragHandler(e: MouseEvent) {
-   return null
+    return null;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/core/src/index.ts

@@ -8,10 +8,38 @@ import BasePostProcessingPass from './services/renderer/passes/BasePostProcessin
 import { TYPES } from './types';
 import { packCircleVertex } from './utils/vertex-compression';
 
+export * from './services/asset/IFontService';
+export * from './services/asset/IIconService';
+export * from './services/asset/ITextureService';
+export * from './services/camera/ICameraService';
+export * from './services/component/IControlService';
+export * from './services/component/IMarkerService';
+export * from './services/component/IPopupService';
+export * from './services/config/IConfigService';
+export * from './services/coordinate/ICoordinateSystemService';
+export * from './services/debug/IDebugService';
+export * from './services/interaction/IInteractionService';
+export * from './services/interaction/IPickingService';
+/** 暴露服务接口供其他 packages 实现 */
+export * from './services/layer/ILayerService';
+export * from './services/layer/IStyleAttributeService';
+export * from './services/map/IMapService';
+export * from './services/renderer/gl';
+/** 全部渲染服务接口 */
+export * from './services/renderer/IAttribute';
+export * from './services/renderer/IBuffer';
+export * from './services/renderer/IElements';
+export * from './services/renderer/IFramebuffer';
+export * from './services/renderer/IModel';
+export * from './services/renderer/IMultiPassRenderer';
+export * from './services/renderer/IRenderbuffer';
+export * from './services/renderer/IRendererService';
+export * from './services/renderer/ITexture2D';
+export * from './services/renderer/IUniform';
+export * from './services/scene/ISceneService';
+export * from './services/shader/IShaderModuleService';
+export * from './services/source/ISourceService';
 export {
-  /**
-   * IoC 容器
-   */
   container,
   createSceneContainer,
   createLayerContainer,
@@ -27,36 +55,3 @@ export {
   packCircleVertex,
   BasePostProcessingPass,
 };
-
-/** 暴露服务接口供其他 packages 实现 */
-export * from './services/layer/ILayerService';
-export * from './services/debug/IDebugService';
-export * from './services/layer/IStyleAttributeService';
-export * from './services/source/ISourceService';
-export * from './services/map/IMapService';
-export * from './services/coordinate/ICoordinateSystemService';
-export * from './services/renderer/IRendererService';
-export * from './services/camera/ICameraService';
-export * from './services/config/IConfigService';
-export * from './services/scene/ISceneService';
-export * from './services/shader/IShaderModuleService';
-export * from './services/asset/IIconService';
-export * from './services/asset/IFontService';
-export * from './services/asset/ITextureService';
-export * from './services/component/IControlService';
-export * from './services/component/IMarkerService';
-export * from './services/component/IPopupService';
-export * from './services/interaction/IInteractionService';
-export * from './services/interaction/IPickingService';
-
-/** 全部渲染服务接口 */
-export * from './services/renderer/IAttribute';
-export * from './services/renderer/IBuffer';
-export * from './services/renderer/IElements';
-export * from './services/renderer/IFramebuffer';
-export * from './services/renderer/IModel';
-export * from './services/renderer/IMultiPassRenderer';
-export * from './services/renderer/IRenderbuffer';
-export * from './services/renderer/ITexture2D';
-export * from './services/renderer/IUniform';
-export * from './services/renderer/gl';

packages/core/src/inversify.config.ts

@@ -16,10 +16,10 @@ import { ICameraService } from './services/camera/ICameraService';
 import { IControlService } from './services/component/IControlService';
 import { IGlobalConfigService } from './services/config/IConfigService';
 import { ICoordinateSystemService } from './services/coordinate/ICoordinateSystemService';
+import { IDebugService } from './services/debug/IDebugService';
 import { IInteractionService } from './services/interaction/IInteractionService';
 import { IPickingService } from './services/interaction/IPickingService';
 import { ILayerService } from './services/layer/ILayerService';
-import { IDebugService } from './services/debug/IDebugService';
 import { IStyleAttributeService } from './services/layer/IStyleAttributeService';
 import { ISceneService } from './services/scene/ISceneService';
 import { IShaderModuleService } from './services/shader/IShaderModuleService';
@@ -33,10 +33,10 @@ import MarkerService from './services/component/MarkerService';
 import PopupService from './services/component/PopupService';
 import GlobalConfigService from './services/config/ConfigService';
 import CoordinateSystemService from './services/coordinate/CoordinateSystemService';
+import DebugService from './services/debug/DebugService';
 import InteractionService from './services/interaction/InteractionService';
 import PickingService from './services/interaction/PickingService';
 import LayerService from './services/layer/LayerService';
-import DebugService from './services/debug/DebugService';
 import StyleAttributeService from './services/layer/StyleAttributeService';
 import SceneService from './services/scene/SceneService';
 import ShaderModuleService from './services/shader/ShaderModuleService';
@@ -95,7 +95,7 @@ export const lazyInject = (
   const original = DECORATORS.lazyInject(serviceIdentifier);
   // the 'descriptor' parameter is actually always defined for class fields for Babel, but is considered undefined for TSC
   // so we just hack it with ?/! combination to avoid "TS1240: Unable to resolve signature of property decorator when called as an expression"
-  return function(
+  return function (
     this: any,
     proto: any,
     key: string,
@@ -117,7 +117,7 @@ export const lazyMultiInject = (
   const original = DECORATORS.lazyMultiInject(serviceIdentifier);
   // the 'descriptor' parameter is actually always defined for class fields for Babel, but is considered undefined for TSC
   // so we just hack it with ?/! combination to avoid "TS1240: Unable to resolve signature of property decorator when called as an expression"
-  return function(
+  return function (
     this: any,
     proto: any,
     key: string,
@@ -220,8 +220,9 @@ export function createSceneContainer() {
     .whenTargetNamed('taa');
   sceneContainer
     .bind<interfaces.Factory<IPass<unknown>>>(TYPES.IFactoryNormalPass)
-    .toFactory<IPass<unknown>>((context) => (named: string) =>
+    .toFactory<IPass<unknown>>(
-      context.container.getNamed<IPass<unknown>>(TYPES.INormalPass, named),
+      (context) => (named: string) =>
+        context.container.getNamed<IPass<unknown>>(TYPES.INormalPass, named),
     );
 
   // 绑定 post processing passes
@@ -282,7 +283,7 @@ export function createSceneContainer() {
 export function createLayerContainer(sceneContainer: Container) {
   const layerContainer = new Container();
   layerContainer.parent = sceneContainer;
-  
+
   layerContainer
     .bind<IStyleAttributeService>(TYPES.IStyleAttributeService)
     .to(StyleAttributeService)

packages/core/src/services/asset/FontService.ts

@@ -1,6 +1,6 @@
 import { $window, LRUCache } from '@antv/l7-utils';
-import { injectable } from 'inversify';
 import { EventEmitter } from 'eventemitter3';
+import { injectable } from 'inversify';
 import TinySDF from 'l7-tiny-sdf';
 import 'reflect-metadata';
 import { buildMapping } from '../../utils/font_util';
@@ -73,7 +73,7 @@ export default class FontService extends EventEmitter implements IFontService {
 
   public get mapping(): IFontMapping {
     const data = this.cache.get(this.key);
-    return data && data.mapping || {};
+    return (data && data.mapping) || {};
   }
   public fontAtlas: IFontAtlas;
 
@@ -162,7 +162,7 @@ export default class FontService extends EventEmitter implements IFontService {
    * @param fontFamily
    * @param fontPath
    */
-   public addFontFace(fontFamily: string, fontPath: string): void {
+  public addFontFace(fontFamily: string, fontPath: string): void {
     const style = document.createElement('style');
     style.type = 'text/css';
     style.innerText = `
@@ -172,28 +172,24 @@ export default class FontService extends EventEmitter implements IFontService {
             url('${fontPath}') format('woff'),
             url('${fontPath}') format('truetype');
         }`;
-        style.onload=()=>{
+    style.onload = () => {
-          if ( document.fonts) {
+      if (document.fonts) {
-            try {
+        try {
-              // @ts-ignore
+          // @ts-ignore
-            document.fonts.load(`24px ${fontFamily}`, 'L7text');
+          document.fonts.load(`24px ${fontFamily}`, 'L7text');
-            document.fonts.ready.then(()=>{
+          document.fonts.ready.then(() => {
-              this.emit('fontloaded',{
+            this.emit('fontloaded', {
-                fontFamily
+              fontFamily,
-              })
+            });
-            })
+          });
-          
+        } catch (e) {
-            } catch (e) {
+          console.warn('当前环境不支持 document.fonts !');
-              console.warn('当前环境不支持 document.fonts !');
+          console.warn('当前环境不支持 iconfont !');
-              console.warn('当前环境不支持 iconfont !');
+          console.warn(e);
-              console.warn(e);
-            }
-          }
-    
         }
+      }
+    };
     document.getElementsByTagName('head')[0].appendChild(style);
-
-    
   }
   public destroy(): void {
     this.cache.clear();
@@ -220,7 +216,9 @@ export default class FontService extends EventEmitter implements IFontService {
       canvas = $window.document.createElement('canvas');
       canvas.width = MAX_CANVAS_WIDTH;
     }
-    const ctx = canvas.getContext('2d', { willReadFrequently: true }) as CanvasRenderingContext2D;
+    const ctx = canvas.getContext('2d', {
+      willReadFrequently: true,
+    }) as CanvasRenderingContext2D;
     setTextStyle(ctx, fontFamily, fontSize, fontWeight);
 
     // 1. build mapping

packages/core/src/services/asset/IIconService.ts

@@ -20,7 +20,7 @@ export interface IIcon {
 export interface IICONMap {
   [key: string]: IIconValue;
 }
-export interface IIconService extends EventEmitter { 
+export interface IIconService extends EventEmitter {
   canvasHeight: number;
   // on(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
   // off(event: string, fn: EventEmitter.ListenerFn, context?: any): this;

packages/core/src/services/asset/ITextureService.ts

@@ -1,8 +1,11 @@
 import { IColorRamp } from '@antv/l7-utils';
 import { ITexture2D } from '../renderer/ITexture2D';
 export interface ITextureService {
-    setColorTexture(texture: ITexture2D,colorRamp: IColorRamp,domain?:[number,number]):void;
+  setColorTexture(
-    getColorTexture(colorRamp: IColorRamp, domain?:[number,number]): ITexture2D
+    texture: ITexture2D,
-    destroy():void;
+    colorRamp: IColorRamp,
-
+    domain?: [number, number],
-}
+  ): void;
+  getColorTexture(colorRamp: IColorRamp, domain?: [number, number]): ITexture2D;
+  destroy(): void;
+}

packages/core/src/services/camera/CameraService.ts

@@ -125,17 +125,17 @@ export default class CameraService implements ICameraService {
   public jitterProjectionMatrix(x: number, y: number) {
     const translation = mat4.fromTranslation(mat4.create(), [x, y, 0]);
 
-    this.jitteredProjectionMatrix = (mat4.multiply(
+    this.jitteredProjectionMatrix = mat4.multiply(
       mat4.create(),
       translation,
-      (this.viewport.getProjectionMatrix() as unknown) as mat4,
+      this.viewport.getProjectionMatrix() as unknown as mat4,
-    ) as unknown) as number[];
+    ) as unknown as number[];
 
-    this.jitteredViewProjectionMatrix = (mat4.multiply(
+    this.jitteredViewProjectionMatrix = mat4.multiply(
       mat4.create(),
-      (this.jitteredProjectionMatrix as unknown) as mat4,
+      this.jitteredProjectionMatrix as unknown as mat4,
-      (this.viewport.getViewMatrix() as unknown) as mat4,
+      this.viewport.getViewMatrix() as unknown as mat4,
-    ) as unknown) as number[];
+    ) as unknown as number[];
   }
 
   public clearJitterProjectionMatrix() {

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

@@ -2,9 +2,9 @@
 import { injectable } from 'inversify';
 import { merge } from 'lodash';
 import 'reflect-metadata';
-import { ILayerConfig,ILayerAttributesOption} from '../layer/ILayerService';
+import { ILayerAttributesOption, ILayerConfig } from '../layer/ILayerService';
 import { IRenderConfig } from '../renderer/IRendererService';
-import { IGlobalConfigService, ISceneConfig, } from './IConfigService';
+import { IGlobalConfigService, ISceneConfig } from './IConfigService';
 import WarnInfo from './warnInfo';
 
 /**
@@ -119,13 +119,12 @@ export default class GlobalConfigService implements IGlobalConfigService {
     [layerId: string]: Partial<ILayerConfig & ISceneConfig>;
   } = {};
 
-
   /**
    * 数据映射缓存
    */
 
   private layerAttributeConfigCache: {
-    [layerId: string]: Partial<ILayerAttributesOption>
+    [layerId: string]: Partial<ILayerAttributesOption>;
   } = {};
 
   /**
@@ -175,19 +174,21 @@ export default class GlobalConfigService implements IGlobalConfigService {
       ...merge({}, this.sceneConfigCache[sceneId], defaultLayerConfig, config),
     };
   }
-  
-   public getAttributeConfig(layerId: string,): Partial<ILayerAttributesOption> {
-    return this.layerAttributeConfigCache[layerId]
 
-   }
+  public getAttributeConfig(layerId: string): Partial<ILayerAttributesOption> {
+    return this.layerAttributeConfigCache[layerId];
+  }
 
-   public setAttributeConfig(layerId: string, attr: Partial<ILayerAttributesOption>) {
+  public setAttributeConfig(
+    layerId: string,
+    attr: Partial<ILayerAttributesOption>,
+  ) {
     // TODO
-      this.layerAttributeConfigCache[layerId] = {
+    this.layerAttributeConfigCache[layerId] = {
-        ...this.layerAttributeConfigCache[layerId],
+      ...this.layerAttributeConfigCache[layerId],
-        ...attr
+      ...attr,
-      }
+    };
-   }
+  }
 
   public clean() {
     this.sceneConfigCache = {};

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

@@ -1,6 +1,6 @@
 // import Ajv from 'ajv';
 import { PositionName } from '../component/IControlService';
-import { ILayerConfig,ILayerAttributesOption } from '../layer/ILayerService';
+import { ILayerAttributesOption, ILayerConfig } from '../layer/ILayerService';
 import { IMapWrapper } from '../map/IMapService';
 import { IRenderConfig } from '../renderer/IRendererService';
 export interface ISceneConfig extends IRenderConfig {
@@ -64,18 +64,21 @@ export interface IGlobalConfigService {
     layerId: string,
     config: Partial<ILayerConfig>,
   ): void;
-    /**
+  /**
    * 获取数据映射
    */
-    getAttributeConfig(layerId: string,): Partial<ILayerAttributesOption>
+  getAttributeConfig(layerId: string): Partial<ILayerAttributesOption>;
-   
+
-   /**
+  /**
-    * 设置数据映射
+   * 设置数据映射
-    * @param layerId sh
+   * @param layerId sh
-    * @param attr 
+   * @param attr
-    */
+   */
-    setAttributeConfig(layerId: string, attr: Partial<ILayerAttributesOption>):void
+  setAttributeConfig(
-   
+    layerId: string,
+    attr: Partial<ILayerAttributesOption>,
+  ): void;
+
   /**
    * 清除场景和图层配置项 Cache，但是需要保留校验器
    */

packages/core/src/services/coordinate/CoordinateSystemService.ts

@@ -14,7 +14,8 @@ const VECTOR_TO_POINT_MATRIX = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0];
 
 @injectable()
 export default class CoordinateSystemService
-  implements ICoordinateSystemService {
+  implements ICoordinateSystemService
+{
   public needRefresh: boolean = true;
   @inject(TYPES.ICameraService)
   private readonly cameraService: ICameraService;
@@ -152,9 +153,9 @@ export default class CoordinateSystemService
     let viewMatrix = this.cameraService.getViewMatrix();
     const projectionMatrix = this.cameraService.getProjectionMatrix();
     let viewProjectionMatrix = mat4.multiply(
-      ([] as unknown) as mat4,
+      [] as unknown as mat4,
-      (projectionMatrix as unknown) as mat4,
+      projectionMatrix as unknown as mat4,
-      (viewMatrix as unknown) as mat4,
+      viewMatrix as unknown as mat4,
     );
 
     // 经纬度投影到 Web 墨卡托坐标系
@@ -164,30 +165,30 @@ export default class CoordinateSystemService
     );
 
     // Web 墨卡托坐标系通过 VP 矩阵变换到世界坐标系
-    this.viewportCenterProjection = (vec4.transformMat4(
+    this.viewportCenterProjection = vec4.transformMat4(
-      ([] as unknown) as vec4,
+      [] as unknown as vec4,
       [positionPixels[0], positionPixels[1], 0.0, 1.0],
-      (viewProjectionMatrix as unknown) as mat4,
+      viewProjectionMatrix as unknown as mat4,
-    ) as unknown) as [number, number, number, number];
+    ) as unknown as [number, number, number, number];
 
     // Always apply uncentered projection matrix if available (shader adds center)
     viewMatrix = this.cameraService.getViewMatrixUncentered() || viewMatrix;
 
     // Zero out 4th coordinate ("after" model matrix) - avoids further translations
     viewProjectionMatrix = mat4.multiply(
-      ([] as unknown) as mat4,
+      [] as unknown as mat4,
-      (projectionMatrix as unknown) as mat4,
+      projectionMatrix as unknown as mat4,
-      (viewMatrix as unknown) as mat4,
+      viewMatrix as unknown as mat4,
     );
     viewProjectionMatrix = mat4.multiply(
-      ([] as unknown) as mat4,
+      [] as unknown as mat4,
       viewProjectionMatrix,
-      (VECTOR_TO_POINT_MATRIX as unknown) as mat4,
+      VECTOR_TO_POINT_MATRIX as unknown as mat4,
     );
 
     // 重新计算相机 VP 矩阵
     this.cameraService.setViewProjectionMatrix(
-      (viewProjectionMatrix as unknown) as number[],
+      viewProjectionMatrix as unknown as number[],
     );
 
     this.pixelsPerMeter = ppm;

packages/core/src/services/debug/DebugService.ts

@@ -79,23 +79,23 @@ export default class DebugService
     this.renderEnable = enable;
   }
 
-  public renderStart(guid: string) {
+  public renderStart(id: string) {
     if (!this.renderEnable || !this.enable) {
       return;
     }
-    const cacheRenderInfo = this.renderMap.get(guid) || {};
+    const cacheRenderInfo = this.renderMap.get(id) || {};
-    this.renderMap.set(guid, {
+    this.renderMap.set(id, {
       ...cacheRenderInfo,
-      renderUid: guid,
+      renderUid: id,
       renderStart: Date.now(),
     });
   }
 
-  public renderEnd(guid: string) {
+  public renderEnd(id: string) {
     if (!this.renderEnable || !this.enable) {
       return;
     }
-    const cacheRenderInfo = this.renderMap.get(guid);
+    const cacheRenderInfo = this.renderMap.get(id);
     if (cacheRenderInfo) {
       const renderStart = cacheRenderInfo.renderStart as number;
       const renderEnd = Date.now();
@@ -104,7 +104,7 @@ export default class DebugService
         renderEnd,
         renderDuration: renderEnd - renderStart,
       });
-      this.renderMap.delete(guid);
+      this.renderMap.delete(id);
     }
   }
 

packages/core/src/services/interaction/IPickingService.ts

@@ -7,7 +7,8 @@ export interface IPickingService {
   init(id: string): void;
   pickFromPickingFBO(layer: ILayer, target: IInteractionTarget): boolean;
   pickBox(layer: ILayer, box: [number, number, number, number]): any[];
-  triggerHoverOnLayer(layer: ILayer,
+  triggerHoverOnLayer(
+    layer: ILayer,
     target: {
       x: number;
       y: number;
@@ -15,7 +16,8 @@ export interface IPickingService {
       lngLat: ILngLat;
       feature?: unknown;
       featureId?: number | null;
-    }): void;
+    },
+  ): void;
 
   boxPickLayer(
     layer: ILayer,
@@ -26,7 +28,11 @@ export interface IPickingService {
 }
 
 export interface ILayerPickService {
-  pickRasterLayer(layer: ILayer, target: IInteractionTarget, parent?: ILayer): boolean;
+  pickRasterLayer(
+    layer: ILayer,
+    target: IInteractionTarget,
+    parent?: ILayer,
+  ): boolean;
   pick(layer: ILayer, target: IInteractionTarget): boolean;
   /**
    * 绘制拾取图层
@@ -35,21 +41,19 @@ export interface ILayerPickService {
   pickRender(target: IInteractionTarget): void;
   /**
    * 为图层设置选中对象
-   * @param pickedColors 
+   * @param pickedColors
    */
-  selectFeature(pickedColors: Uint8Array | undefined):void
+  selectFeature(pickedColors: Uint8Array | undefined): void;
   /**
    * 为图层设置active对象
-   * @param pickedColors 
+   * @param pickedColors
    */
 
-  highlightPickedFeature(pickedColors: Uint8Array | undefined):void
+  highlightPickedFeature(pickedColors: Uint8Array | undefined): void;
-  
+
   /**
    * 获取选中的要素
    * @param id q
    */
-  getFeatureById(id: number, lngLat?: ILngLat):any
+  getFeatureById(id: number, lngLat?: ILngLat): any;
-
+}
-
-}

packages/core/src/services/interaction/InteractionService.ts

@@ -18,8 +18,10 @@ const DragEventMap: { [key: string]: string } = {
  * 除此之外，后续如果支持非地图场景，事件监听就需要注册在 L7 canvas 上。
  */
 @injectable()
-export default class InteractionService extends EventEmitter
+export default class InteractionService
-  implements IInteractionService {
+  extends EventEmitter
+  implements IInteractionService
+{
   public indragging: boolean = false;
   @inject(TYPES.IMapService)
   private readonly mapService: IMapService;

packages/core/src/services/interaction/PickingService.ts

@@ -303,8 +303,9 @@ export default class PickingService implements IPickingService {
   }
   private async pickingAllLayer(target: IInteractionTarget) {
     // 判断是否进行拾取操作
-    if (!this.layerService.needPick(target.type) || !this.isPickingAllLayer())
+    if (!this.layerService.needPick(target.type) || !this.isPickingAllLayer()) {
       return;
+    }
     this.alreadyInPicking = true;
     await this.pickingLayers(target);
     this.layerService.renderLayers();
@@ -313,13 +314,21 @@ export default class PickingService implements IPickingService {
 
   private isPickingAllLayer() {
     // this.alreadyInPicking 避免多次重复拾取
-    if (this.alreadyInPicking) { return false; }
+    if (this.alreadyInPicking) {
+      return false;
+    }
     // this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
-    if (this.layerService.alreadyInRendering) { return false; }
+    if (this.layerService.alreadyInRendering) {
+      return false;
+    }
     // this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去）
-    if (this.interactionService.indragging) { return false; }
+    if (this.interactionService.indragging) {
+      return false;
+    }
     // 判断当前进行 shader pick 拾取判断
-    if (!this.layerService.getShaderPickStat()) { return false; }
+    if (!this.layerService.getShaderPickStat()) {
+      return false;
+    }
 
     // 进行拾取
     return true;

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

@@ -1,12 +1,20 @@
 // @ts-ignore
-import { SyncBailHook, SyncHook, AsyncSeriesBailHook, AsyncWaterfallHook} from '@antv/async-hook';
+import {
+  AsyncSeriesBailHook,
+  AsyncWaterfallHook,
+  SyncBailHook,
+  SyncHook,
+} from '@antv/async-hook';
 import { IColorRamp, SourceTile, TilesetManager } from '@antv/l7-utils';
 import { Container } from 'inversify';
 import Clock from '../../utils/clock';
 import { ITextureService } from '../asset/ITextureService';
 import { ISceneConfig } from '../config/IConfigService';
 import { IInteractionTarget } from '../interaction/IInteractionService';
-import { ILayerPickService, IPickingService } from '../interaction/IPickingService';
+import {
+  ILayerPickService,
+  IPickingService,
+} from '../interaction/IPickingService';
 import { IMapService } from '../map/IMapService';
 import { IAttribute } from '../renderer/IAttribute';
 import {
@@ -22,7 +30,12 @@ import {
 import { IRendererService } from '../renderer/IRendererService';
 import { ITexture2D } from '../renderer/ITexture2D';
 import { IUniform } from '../renderer/IUniform';
-import { ISource, ISourceCFG, ITransform, IParseDataItem } from '../source/ISourceService';
+import {
+  IParseDataItem,
+  ISource,
+  ISourceCFG,
+  ITransform,
+} from '../source/ISourceService';
 import {
   IAnimateOption,
   IEncodeFeature,
@@ -80,7 +93,7 @@ export interface ILayerModel {
   getAnimateUniforms(): IModelUniform;
   buildModels(): Promise<IModel[]>;
   initModels(): Promise<IModel[]>;
-  needUpdate():Promise<boolean>
+  needUpdate(): Promise<boolean>;
   clearModels(refresh?: boolean): void;
 
   // canvasLayer
@@ -92,13 +105,13 @@ export interface ILayerModel {
 }
 
 export interface ILayerAttributesOption {
-  shape: IAttrbuteOptions,
+  shape: IAttrbuteOptions;
-  color: IAttrbuteOptions,
+  color: IAttrbuteOptions;
-  texture:IAttrbuteOptions,
+  texture: IAttrbuteOptions;
-  rotate:IAttrbuteOptions,
+  rotate: IAttrbuteOptions;
-  size:IAttrbuteOptions,
+  size: IAttrbuteOptions;
-  filter:IAttrbuteOptions,
+  filter: IAttrbuteOptions;
-  label:IAttrbuteOptions,
+  label: IAttrbuteOptions;
 }
 
 export interface IModelUniform {
@@ -119,15 +132,15 @@ export interface IActiveOption {
 
 type ILngLat = [number, number];
 
-export interface ILegend  {
+export interface ILegend {
-  type: ScaleTypeName | undefined
+  type: ScaleTypeName | undefined;
   field: StyleAttributeField | undefined;
-  items:LegendItems
+  items: LegendItems;
 }
 
 // 分段图例
 export interface ILegendSegmentItem {
-  field:string;// 图例字段
+  field: string; // 图例字段
   value: [number, number];
   [key: string]: any;
 }
@@ -149,18 +162,18 @@ export interface ISubLayerStyles {
 }
 
 export interface IAttrbuteOptions {
-  field: StyleAttrField,
+  field: StyleAttrField;
-  values:StyleAttributeOption
+  values: StyleAttributeOption;
 }
 
 /**
  * For tile subLayer
  */
 export interface ISubLayerInitOptions {
-  usage?: string|undefined;
+  usage?: string | undefined;
   layerType: string;
   transforms?: ITransform[];
-  visible: boolean,
+  visible: boolean;
   shape?: string | string[] | IScaleValue;
   // options
   zIndex: number;
@@ -203,7 +216,7 @@ export interface IBaseTileLayerManager {
   parent: ILayer;
   children: ILayer[];
 
-  addTile(tile: SourceTile):Promise<{ layers: ILayer[]; }>;
+  addTile(tile: SourceTile): Promise<{ layers: ILayer[] }>;
 
   addChild(layer: ILayer): void;
   addChildren(layers: ILayer[]): void;
@@ -232,10 +245,7 @@ export interface ITile {
   getFeatureById(id: number): any;
   styleUpdate(...args: any): void;
   initTileLayer(): Promise<void>;
-  lnglatInBounds(lnglat: {
+  lnglatInBounds(lnglat: { lng: number; lat: number }): boolean;
-    lng: number;
-    lat: number;
-  }): boolean;
   updateVisible(value: boolean): void;
   updateOptions(key: string, value: any): void;
   destroy(): void;
@@ -253,14 +263,14 @@ export interface IBaseTileLayer {
   tileLayerService: ITileLayerService;
   getLayers(): ILayer[];
   getTiles(): ITile[];
-  pickRender(target: IInteractionTarget):void;
+  pickRender(target: IInteractionTarget): void;
-  selectFeature(pickedColors: Uint8Array | undefined):void;
+  selectFeature(pickedColors: Uint8Array | undefined): void;
-  highlightPickedFeature(pickedColors: Uint8Array | undefined):void;
+  highlightPickedFeature(pickedColors: Uint8Array | undefined): void;
   render(isPicking?: boolean): void;
   destroy(): void;
 }
-export interface ITileLayer extends IBaseTileLayer{
+export interface ITileLayer extends IBaseTileLayer {
-  pickRender(target: IInteractionTarget):void;
+  pickRender(target: IInteractionTarget): void;
   pickLayers(target: IInteractionTarget): boolean;
   clearPick(type: string): void;
   clearPickState(): void;
@@ -304,7 +314,7 @@ export type LayerEventType =
   | any;
 
 export interface ILayer {
-  styleAttributeService: IStyleAttributeService,
+  styleAttributeService: IStyleAttributeService;
   layerPickService: ILayerPickService;
   textureService: ITextureService;
   sourceLayer?: string;
@@ -314,7 +324,7 @@ export interface ILayer {
   coordCenter: number[];
   name: string; //
   inited: boolean; // 是否初始化完成
-  startInit: boolean // 是否开始初始化;
+  startInit: boolean; // 是否开始初始化;
   zIndex: number;
   clusterZoom: number;
   plugins: ILayerPlugin[];
@@ -327,15 +337,15 @@ export interface ILayer {
   sceneContainer: Container | undefined;
   dataState: IDataState; // 数据流状态
   defaultSourceConfig: {
-    data: any[],
+    data: any[];
-    options: ISourceCFG | undefined,
+    options: ISourceCFG | undefined;
-  },
+  };
   encodeDataLength: number;
   pickedFeatureID: number | null;
   hooks: {
-    init:AsyncSeriesBailHook;
+    init: AsyncSeriesBailHook;
     afterInit: SyncBailHook;
-    beforeRenderData: AsyncWaterfallHook ;
+    beforeRenderData: AsyncWaterfallHook;
     beforeRender: SyncBailHook;
     afterRender: SyncHook;
     beforePickingEncode: SyncHook;
@@ -367,9 +377,7 @@ export interface ILayer {
    */
 
   threeRenderService?: any;
-  postProcessingPassFactory: (
+  postProcessingPassFactory: (name: string) => IPostProcessingPass<unknown>;
-    name: string,
-  ) => IPostProcessingPass<unknown>;
   normalPassFactory: (name: string) => IPass<unknown>;
   getShaderPickStat: () => boolean;
   updateModelData(data: IAttributeAndElements): void;
@@ -379,7 +387,7 @@ export interface ILayer {
   needPick(type: string): boolean;
   getAttribute(name: string): IStyleAttribute | undefined;
   getLayerConfig<T>(): Partial<ILayerConfig & ISceneConfig & T>;
-  getLayerAttributeConfig():Partial<ILayerAttributesOption>
+  getLayerAttributeConfig(): Partial<ILayerAttributesOption>;
   getContainer(): Container;
   setContainer(container: Container, sceneContainer: Container): void;
   setCurrentPickId(id: number | null): void;
@@ -390,7 +398,7 @@ export interface ILayer {
   renderModels(isPicking?: boolean): void;
   buildModels(): void;
   rebuildModels(): void;
-  getModelType():string;
+  getModelType(): string;
   buildLayerModel(
     options: ILayerModelInitializationOptions &
       Partial<IModelInitializationOptions>,
@@ -407,7 +415,7 @@ export interface ILayer {
     values?: StyleAttributeOption,
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ): boolean;
-  setLayerPickService(layerPickService:ILayerPickService):void;
+  setLayerPickService(layerPickService: ILayerPickService): void;
   init(): Promise<void>;
   scale(field: string | number | IScaleOptions, cfg?: IScale): ILayer;
   getScale(name: string): any;
@@ -434,8 +442,8 @@ export interface ILayer {
   style(options: unknown): ILayer;
   hide(): ILayer;
   show(): ILayer;
-  getLegendItems(name: string,index?: number): LegendItems;
+  getLegendItems(name: string, index?: number): LegendItems;
-  getLegend(name: string):ILegend;
+  getLegend(name: string): ILegend;
   setIndex(index: number): ILayer;
   isVisible(): boolean;
   setMaxZoom(min: number): ILayer;
@@ -564,7 +572,7 @@ export interface ILayerConfig {
   maskfence: any;
   maskColor: string;
   maskOpacity: number;
-  sourceLayer:string;
+  sourceLayer: string;
 
   colors: string[];
   size: number;
@@ -636,7 +644,7 @@ export interface ILayerConfig {
   /**
    * 地球模式参数
    */
-   globalOptions: any;
+  globalOptions: any;
   /**
    * layer point text 是否是 iconfont 模式
    */
@@ -678,14 +686,14 @@ export interface ILayerService {
   getRenderList(): ILayer[];
   getLayer(id: string): ILayer | undefined;
   getLayerByName(name: string): ILayer | undefined;
-  remove(layer: ILayer, parentLayer?: ILayer):Promise<void>;
+  remove(layer: ILayer, parentLayer?: ILayer): Promise<void>;
-  removeAllLayers():Promise<void>;
+  removeAllLayers(): Promise<void>;
   updateLayerRenderList(): void;
   reRender(): void;
   beforeRenderData(layer: ILayer): Promise<void>;
-  renderMask(masks:ILayer[]): void;
+  renderMask(masks: ILayer[]): void;
-  renderLayer(layer: ILayer): Promise<void>
+  renderLayer(layer: ILayer): Promise<void>;
-  needPick(type:string):boolean;
+  needPick(type: string): boolean;
   throttleRenderLayers(): void;
   renderLayers(): void;
   setEnableRender(flag: boolean): void;

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

@@ -194,7 +194,7 @@ export interface IStyleAttributeService {
   registerStyleAttribute(
     options: Partial<IStyleAttributeInitializationOptions>,
   ): IStyleAttribute;
-  updateScaleAttribute(scale: IScaleOptions):void;
+  updateScaleAttribute(scale: IScaleOptions): void;
   updateStyleAttribute(
     attributeName: string,
     attributeOptions: Partial<IStyleAttributeInitializationOptions>,
@@ -227,7 +227,7 @@ export interface IStyleAttributeService {
     features: IEncodeFeature[],
     startFeatureIdx?: number,
     endFeatureIdx?: number,
-    layer?: ILayer
+    layer?: ILayer,
   ): void;
   /**
    * 清除当前管理的所有属性

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

@@ -9,8 +9,8 @@ import { IRendererService } from '../renderer/IRendererService';
 import { ILayer, IWorkerOption } from './ILayerService';
 import {
   IAttributeScale,
-  IScaleOptions,
   IEncodeFeature,
+  IScaleOptions,
   IStyleAttribute,
   IStyleAttributeInitializationOptions,
   IStyleAttributeService,
@@ -67,21 +67,21 @@ export default class StyleAttributeService implements IStyleAttributeService {
       attributeToUpdate = new StyleAttribute(options);
       this.attributes.push(attributeToUpdate);
     }
-    
+
     return attributeToUpdate;
   }
 
   public updateScaleAttribute(scaleOption: IScaleOptions) {
-    this.attributes.forEach((attr:IStyleAttribute)=>{
+    this.attributes.forEach((attr: IStyleAttribute) => {
       const name = attr.name;
-      const field =  attr.scale?.field as string;
+      const field = attr.scale?.field as string;
-      if(scaleOption[name] || (field && scaleOption[field])) { // 字段类型和映射类型
+      if (scaleOption[name] || (field && scaleOption[field])) {
+        // 字段类型和映射类型
         attr.needRescale = true;
         attr.needRemapping = true;
         attr.needRegenerateVertices = true;
       }
-    })
+    });
-
   }
 
   public updateStyleAttribute(
@@ -136,7 +136,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
     features: IEncodeFeature[],
     startFeatureIdx: number = 0,
     endFeatureIdx?: number,
-    layer?:ILayer
+    layer?: ILayer,
   ) {
     const attributeToUpdate = this.attributes.find(
       (attribute) => attribute.name === attributeName,
@@ -167,8 +167,8 @@ export default class StyleAttributeService implements IStyleAttributeService {
               vertexIdx++
             ) {
               const normal = normals
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                ? normals!.slice(vertexIdx * 3, vertexIdx * 3 + 3)
+                  normals!.slice(vertexIdx * 3, vertexIdx * 3 + 3)
                 : [];
               featureData.push(
                 ...update(
@@ -196,10 +196,10 @@ export default class StyleAttributeService implements IStyleAttributeService {
           offset: bufferOffsetInBytes,
         });
         // size color 触发更新事件
-        layer?.emit(`legend:${attributeName}`,{
+        layer?.emit(`legend:${attributeName}`, {
-          type:attributeName,
+          type: attributeName,
-          attr:attributeToUpdate
+          attr: attributeToUpdate,
-        })
+        });
       }
     }
   }
@@ -223,11 +223,8 @@ export default class StyleAttributeService implements IStyleAttributeService {
       .filter((d) => d);
     const { modelType, ...restOptions } = workerOptions;
 
-    const {
+    const { createAttribute, createBuffer, createElements } =
-      createAttribute,
+      this.rendererService;
-      createBuffer,
-      createElements,
-    } = this.rendererService;
     const attributes: {
       [attributeName: string]: IAttribute;
     } = {};
@@ -361,7 +358,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
         if (indexes && indexes[vertexIdx] !== undefined) {
           vertexIndex = indexes[vertexIdx];
         }
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         descriptors.forEach((descriptor, attributeIdx) => {
           if (descriptor && descriptor.update) {
             (descriptor.buffer.data as number[]).push(
@@ -379,11 +376,8 @@ export default class StyleAttributeService implements IStyleAttributeService {
         }); // end for each
       } // end for
     }); // end features for Each
-    const {
+    const { createAttribute, createBuffer, createElements } =
-      createAttribute,
+      this.rendererService;
-      createBuffer,
-      createElements,
-    } = this.rendererService;
 
     const attributes: {
       [attributeName: string]: IAttribute;
@@ -487,7 +481,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
         if (indexes && indexes[vertexIdx] !== undefined) {
           vertexIndex = indexes[vertexIdx];
         }
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         descriptors.forEach((descriptor, attributeIdx) => {
           if (descriptor && descriptor.update) {
             (descriptor.buffer.data as number[]).push(

packages/core/src/services/renderer/IRendererService.ts

@@ -48,7 +48,7 @@ export interface IExtensions {
 
 export interface IRendererService {
   extensionObject: IExtensions;
-  init(canvas: HTMLCanvasElement, cfg: IRenderConfig,gl: any): Promise<void>;
+  init(canvas: HTMLCanvasElement, cfg: IRenderConfig, gl: any): Promise<void>;
   testExtension(name: string): boolean;
   clear(options: IClearOptions): void;
   createModel(options: IModelInitializationOptions): IModel;

packages/core/src/services/renderer/ITexture2D.ts

@@ -94,7 +94,7 @@ export interface ITexture2DInitializationOptions {
 
 export interface ITexture2D {
   get(): unknown;
-  getSize():[number,number];
+  getSize(): [number, number];
   update(options: any): void;
   bind(): void;
   resize(options: { width: number; height: number }): void;

packages/core/src/services/renderer/passes/BaseNormalPass.ts

@@ -14,7 +14,8 @@ import { IRendererService } from '../IRendererService';
  */
 @injectable()
 export default class BaseNormalPass<InitializationOptions = {}>
-  implements IPass<InitializationOptions> {
+  implements IPass<InitializationOptions>
+{
   // @inject(TYPES.IShaderModuleService)
   protected shaderModuleService: IShaderModuleService;
 

packages/core/src/services/renderer/passes/BasePostProcessingPass.ts

@@ -20,7 +20,8 @@ import { IUniform } from '../IUniform';
  */
 @injectable()
 export default class BasePostProcessingPass<InitializationOptions = {}>
-  implements IPostProcessingPass<InitializationOptions> {
+  implements IPostProcessingPass<InitializationOptions>
+{
   @inject(TYPES.IShaderModuleService)
   protected shaderModuleService: IShaderModuleService;
 
@@ -166,9 +167,7 @@ export default class BasePostProcessingPass<InitializationOptions = {}>
     throw new Error('Method not implemented.');
   }
 
-  protected convertOptionsToUniforms(
+  protected convertOptionsToUniforms(options: Partial<InitializationOptions>): {
-    options: Partial<InitializationOptions>,
-  ): {
     [uniformName: string]: IUniform;
   } | void {
     const uniforms: {

packages/core/src/services/renderer/passes/ClearPass.ts

@@ -8,7 +8,7 @@ import BaseNormalPass from './BaseNormalPass';
  */
 @injectable()
 export default class ClearPass<
-  InitializationOptions = {}
+  InitializationOptions = {},
 > extends BaseNormalPass<InitializationOptions> {
   public getName() {
     return 'clear';

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -18,7 +18,7 @@ import BaseNormalPass from './BaseNormalPass';
  */
 @injectable()
 export default class PixelPickingPass<
-  InitializationOptions = {}
+  InitializationOptions = {},
 > extends BaseNormalPass<InitializationOptions> {
   /**
    * picking framebuffer，供 attributes 颜色编码后输出
@@ -50,11 +50,8 @@ export default class PixelPickingPass<
   public init(layer: ILayer, config?: Partial<InitializationOptions>) {
     super.init(layer, config);
     this.layer = layer;
-    const {
+    const { createTexture2D, createFramebuffer, getViewportSize } =
-      createTexture2D,
+      this.rendererService;
-      createFramebuffer,
-      getViewportSize,
-    } = this.rendererService;
     const { width, height } = getViewportSize();
     // 创建 picking framebuffer，后续实时 resize
     this.pickingFBO = createFramebuffer({
@@ -129,11 +126,8 @@ export default class PixelPickingPass<
     if (!this.layer.isVisible() || !this.layer.needPick(type)) {
       return;
     }
-    const {
+    const { getViewportSize, readPixels, useFramebuffer } =
-      getViewportSize,
+      this.rendererService;
-      readPixels,
-      useFramebuffer,
-    } = this.rendererService;
     const { width, height } = getViewportSize();
     const { enableHighlight, enableSelect } = this.layer.getLayerConfig();
 

packages/core/src/services/renderer/passes/RenderPass.ts

@@ -9,7 +9,7 @@ import BaseNormalPass from './BaseNormalPass';
  */
 @injectable()
 export default class RenderPass<
-  InitializationOptions = {}
+  InitializationOptions = {},
 > extends BaseNormalPass<InitializationOptions> {
   public getType() {
     return PassType.Normal;

packages/core/src/services/renderer/passes/TAAPass.ts

@@ -37,9 +37,9 @@ let accumulatingId = 1;
  * @see https://yuque.antfin-inc.com/yuqi.pyq/fgetpa/ri52hv
  */
 @injectable()
-export default class TAAPass<InitializationOptions = {}> extends BaseNormalPass<
+export default class TAAPass<
-  InitializationOptions
+  InitializationOptions = {},
-> {
+> extends BaseNormalPass<InitializationOptions> {
   @inject(TYPES.IShaderModuleService)
   protected readonly shaderModuleService: IShaderModuleService;
 
@@ -305,9 +305,8 @@ export default class TAAPass<InitializationOptions = {}> extends BaseNormalPass<
       fs: fragmentShader,
     });
 
-    const { vs, fs, uniforms } = this.shaderModuleService.getModule(
+    const { vs, fs, uniforms } =
-      shaderModuleName,
+      this.shaderModuleService.getModule(shaderModuleName);
-    );
     const { createAttribute, createBuffer, createModel } = this.rendererService;
     return createModel({
       vs,

packages/core/src/services/renderer/passes/post-processing/BloomPass.ts

@@ -13,18 +13,15 @@ export interface IBloomPassConfig {
 }
 
 @injectable()
-export default class BloomPass extends BasePostProcessingPass<
+export default class BloomPass extends BasePostProcessingPass<IBloomPassConfig> {
-  IBloomPassConfig
-> {
   protected setupShaders() {
     this.shaderModuleService.registerModule('blur-pass', {
       vs: quad,
       fs: blur,
     });
 
-    const { vs, fs, uniforms } = this.shaderModuleService.getModule(
+    const { vs, fs, uniforms } =
-      'blur-pass',
+      this.shaderModuleService.getModule('blur-pass');
-    );
     const { width, height } = this.rendererService.getViewportSize();
 
     return {
@@ -37,9 +34,7 @@ export default class BloomPass extends BasePostProcessingPass<
     };
   }
 
-  protected convertOptionsToUniforms(
+  protected convertOptionsToUniforms(options: Partial<IBloomPassConfig>): {
-    options: Partial<IBloomPassConfig>,
-  ): {
     [uniformName: string]: IUniform;
   } | void {
     const uniforms: {

packages/core/src/services/renderer/passes/post-processing/BlurHPass.ts

@@ -11,18 +11,15 @@ export interface IBlurHPassConfig {
 }
 
 @injectable()
-export default class BlurHPass extends BasePostProcessingPass<
+export default class BlurHPass extends BasePostProcessingPass<IBlurHPassConfig> {
-  IBlurHPassConfig
-> {
   protected setupShaders() {
     this.shaderModuleService.registerModule('blur-pass', {
       vs: quad,
       fs: blur,
     });
 
-    const { vs, fs, uniforms } = this.shaderModuleService.getModule(
+    const { vs, fs, uniforms } =
-      'blur-pass',
+      this.shaderModuleService.getModule('blur-pass');
-    );
     const { width, height } = this.rendererService.getViewportSize();
 
     return {
@@ -35,9 +32,7 @@ export default class BlurHPass extends BasePostProcessingPass<
     };
   }
 
-  protected convertOptionsToUniforms(
+  protected convertOptionsToUniforms(options: Partial<IBlurHPassConfig>): {
-    options: Partial<IBlurHPassConfig>,
-  ): {
     [uniformName: string]: IUniform;
   } | void {
     const uniforms: {

packages/core/src/services/renderer/passes/post-processing/BlurVPass.ts

@@ -10,18 +10,15 @@ export interface IBlurVPassConfig {
 }
 
 @injectable()
-export default class BlurVPass extends BasePostProcessingPass<
+export default class BlurVPass extends BasePostProcessingPass<IBlurVPassConfig> {
-  IBlurVPassConfig
-> {
   public setupShaders() {
     this.shaderModuleService.registerModule('blur-pass', {
       vs: quad,
       fs: blur,
     });
 
-    const { vs, fs, uniforms } = this.shaderModuleService.getModule(
+    const { vs, fs, uniforms } =
-      'blur-pass',
+      this.shaderModuleService.getModule('blur-pass');
-    );
     const { width, height } = this.rendererService.getViewportSize();
 
     return {
@@ -34,9 +31,7 @@ export default class BlurVPass extends BasePostProcessingPass<
     };
   }
 
-  protected convertOptionsToUniforms(
+  protected convertOptionsToUniforms(options: Partial<IBlurVPassConfig>): {
-    options: Partial<IBlurVPassConfig>,
-  ): {
     [uniformName: string]: IUniform;
   } | void {
     const uniforms: {

packages/core/src/services/renderer/passes/post-processing/ColorHalfTonePass.ts

@@ -11,18 +11,15 @@ export interface IColorHalftonePassConfig {
 }
 
 @injectable()
-export default class ColorHalftonePass extends BasePostProcessingPass<
+export default class ColorHalftonePass extends BasePostProcessingPass<IColorHalftonePassConfig> {
-  IColorHalftonePassConfig
-> {
   protected setupShaders() {
     this.shaderModuleService.registerModule('colorhalftone-pass', {
       vs: quad,
       fs: colorHalftone,
     });
 
-    const { vs, fs, uniforms } = this.shaderModuleService.getModule(
+    const { vs, fs, uniforms } =
-      'colorhalftone-pass',
+      this.shaderModuleService.getModule('colorhalftone-pass');
-    );
     const { width, height } = this.rendererService.getViewportSize();
 
     return {

packages/core/src/services/renderer/passes/post-processing/HexagonalPixelatePass.ts

@@ -10,9 +10,7 @@ export interface IHexagonalPixelatePassConfig {
 }
 
 @injectable()
-export default class HexagonalPixelatePass extends BasePostProcessingPass<
+export default class HexagonalPixelatePass extends BasePostProcessingPass<IHexagonalPixelatePassConfig> {
-  IHexagonalPixelatePassConfig
-> {
   protected setupShaders() {
     this.shaderModuleService.registerModule('hexagonalpixelate-pass', {
       vs: quad,

packages/core/src/services/renderer/passes/post-processing/NoisePass.ts

@@ -9,9 +9,7 @@ export interface INoisePassConfig {
 }
 
 @injectable()
-export default class NoisePass extends BasePostProcessingPass<
+export default class NoisePass extends BasePostProcessingPass<INoisePassConfig> {
-  INoisePassConfig
-> {
   public setupShaders() {
     this.shaderModuleService.registerModule('noise-pass', {
       vs: quad,

packages/core/src/services/renderer/passes/post-processing/SepiaPass.ts

@@ -9,9 +9,7 @@ export interface ISepiaPassConfig {
 }
 
 @injectable()
-export default class SepiaPass extends BasePostProcessingPass<
+export default class SepiaPass extends BasePostProcessingPass<ISepiaPassConfig> {
-  ISepiaPassConfig
-> {
   public setupShaders() {
     this.shaderModuleService.registerModule('sepia-pass', {
       vs: quad,

packages/core/src/services/scene/ISceneService.ts

@@ -1,6 +1,6 @@
+import EventEmitter from 'eventemitter3';
 import { ISceneConfig } from '../config/IConfigService';
 import { ILayer } from '../layer/ILayerService';
-import EventEmitter from 'eventemitter3';
 
 export interface ISceneService extends EventEmitter {
   destroyed: boolean;
@@ -18,7 +18,7 @@ export interface ISceneService extends EventEmitter {
   render(): void;
   getSceneContainer(): HTMLDivElement;
   getMarkerContainer(): HTMLElement;
-  exportPng(type?: 'png' | 'jpg'):  Promise<string> ;
+  exportPng(type?: 'png' | 'jpg'): Promise<string>;
   addFontFace(fontname: string, fontpath: string): void;
   destroy(): void;
 }

packages/core/src/services/scene/SceneService.ts

@@ -15,6 +15,7 @@ import { IMarkerService } from '../component/IMarkerService';
 import { IPopupService } from '../component/IPopupService';
 import { IGlobalConfigService, ISceneConfig } from '../config/IConfigService';
 import { ICoordinateSystemService } from '../coordinate/ICoordinateSystemService';
+import { IDebugService } from '../debug/IDebugService';
 import {
   IInteractionService,
   IInteractionTarget,
@@ -26,7 +27,6 @@ import { IMapService } from '../map/IMapService';
 import { IRenderConfig, IRendererService } from '../renderer/IRendererService';
 import { IShaderModuleService } from '../shader/IShaderModuleService';
 import { ISceneService } from './ISceneService';
-import { IDebugService } from '../debug/IDebugService';
 
 /**
  * will emit `loaded` `resize` `destroy` event panstart panmove panend
@@ -139,15 +139,14 @@ export default class Scene extends EventEmitter implements ISceneService {
      */
     this.hooks.init.tapPromise('initMap', async () => {
       this.debugService.log('map.mapInitStart', {
-        type: this.map.version
+        type: this.map.version,
-      })
+      });
       // 等待首次相机同步
       await new Promise<void>((resolve) => {
         this.map.onCameraChanged((viewport: IViewport) => {
           this.cameraService.init();
           this.cameraService.update(viewport);
           resolve();
-         
         });
         this.map.init();
       });
@@ -212,14 +211,16 @@ export default class Scene extends EventEmitter implements ISceneService {
       }
       this.pickingService.init(this.id);
     });
-   
+
     this.render();
   }
 
   private registerContextLost() {
     const canvas = this.rendererService.getCanvas();
-    if(canvas) {
+    if (canvas) {
-      canvas.addEventListener('webglcontextlost', () => this.emit('webglcontextlost'));
+      canvas.addEventListener('webglcontextlost', () =>
+        this.emit('webglcontextlost'),
+      );
     }
   }
 
@@ -401,7 +402,6 @@ export default class Scene extends EventEmitter implements ISceneService {
         ?.removeListener(this.handleWindowResized);
     }
 
-
     this.pickingService.destroy();
     this.layerService.destroy();
 
@@ -413,8 +413,6 @@ export default class Scene extends EventEmitter implements ISceneService {
     this.fontService.destroy();
     this.iconService.destroy();
 
-
-
     this.removeAllListeners();
     this.inited = false;
 
@@ -427,7 +425,7 @@ export default class Scene extends EventEmitter implements ISceneService {
       // Tip: 把这一部分销毁放到写下一个事件循环中执行，兼容 L7React 中 scene 和 layer 同时销毁的情况
       this.rendererService.destroy();
     });
-        // 销毁 container 容器
+    // 销毁 container 容器
     this.$container?.parentNode?.removeChild(this.$container);
     this.emit('destroy');
   }

packages/core/src/services/source/ISourceService.ts

@@ -30,7 +30,10 @@ export interface ITileParserCFG {
   minZoom?: number;
   maxZoom?: number;
   zoomOffset?: number;
-  getCustomData: (tile: { x: number, y: number, z: number },cb:(err:any,data:any)=>void)=>void,
+  getCustomData: (
+    tile: { x: number; y: number; z: number },
+    cb: (err: any, data: any) => void,
+  ) => void;
   extent?: [number, number, number, number];
   requestParameters: Partial<RequestParameters>;
   updateStrategy?: 'overlap' | 'replace';
@@ -50,9 +53,12 @@ export interface ITileParserCFG {
   operation?: any;
 
   // 用户自定义请求url
-  getURLFromTemplate?: (template: string, properties: { x: number; y: number; z: number }) => string;
+  getURLFromTemplate?: (
+    template: string,
+    properties: { x: number; y: number; z: number },
+  ) => string;
   // 用户自定义处理返回数据回调
-  transformResponse?: (response: Object) => any;
+  transformResponse?: (response: object) => any;
 }
 
 export interface IWMTSServiceOption {

packages/l7/src/index.ts

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

packages/layers/package.json

@@ -59,7 +59,8 @@
     "@types/d3-scale": "^2.1.1",
     "@types/earcut": "^2.1.0",
     "@types/gl-matrix": "^2.4.5",
-    "@types/lodash": "^4.14.138"
+    "@types/lodash": "^4.14.138",
+    "@antv/l7-test-utils":"^2.13.4"
   },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
   "publishConfig": {

packages/layers/src/Geometry/models/billboard.ts

@@ -17,9 +17,8 @@ export default class BillBoardModel extends BaseModel {
   private radian: number = 0; // 旋转的弧度
 
   public planeGeometryTriangulation = () => {
-    const {
+    const { center = [120, 30] } =
-      center = [120, 30],
+      this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
     return {
       size: 4,
       indices: [0, 1, 2, 2, 3, 0],
@@ -98,31 +97,28 @@ export default class BillBoardModel extends BaseModel {
       this.updateTexture(drawCanvas);
     }
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'geometryBillboard',
-        moduleName: 'geometryBillboard',
+      vertexShader: planeVert,
-        vertexShader: planeVert,
+      fragmentShader: planeFrag,
-        fragmentShader: planeFrag,
+      triangulation: this.planeGeometryTriangulation,
-        triangulation: this.planeGeometryTriangulation,
+      primitive: gl.TRIANGLES,
-        primitive: gl.TRIANGLES,
+      depth: { enable: true },
-        depth: { enable: true },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    return await this.initModels();
+    return this.initModels();
   }
 
   public updateTexture(drawCanvas: (canvas: HTMLCanvasElement) => void): void {
     const { createTexture2D } = this.rendererService;
 
-    const {
+    const { canvasWidth = 1, canvasHeight = 1 } =
-      canvasWidth = 1,
+      this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
-      canvasHeight = 1,
-    } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
     const canvas = document.createElement('canvas');
     canvas.width = canvasWidth;
     canvas.height = canvasHeight;

packages/layers/src/Geometry/models/plane.ts

@@ -151,26 +151,25 @@ export default class PlaneModel extends BaseModel {
 
     this.updateTexture(mapTexture);
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'geometryPlane',
-        moduleName: 'geometryPlane',
+      vertexShader: planeVert,
-        vertexShader: planeVert,
+      fragmentShader: planeFrag,
-        fragmentShader: planeFrag,
+      triangulation: this.planeGeometryTriangulation,
-        triangulation: this.planeGeometryTriangulation,
+      primitive: gl.TRIANGLES,
-        primitive: gl.TRIANGLES,
+      depth: { enable: true },
-        depth: { enable: true },
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      cull: {
-        cull: {
+        enable: true,
-          enable: true,
+        face: gl.BACK, // gl.FRONT | gl.BACK;
-          face: gl.BACK, // gl.FRONT | gl.BACK;
+      },
-        },
+    });
-      })
+    return [model];
-     return [model]
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    return await this.initModels();
+    return this.initModels();
   }
 
   public createModelData(options?: any) {
@@ -181,12 +180,8 @@ export default class PlaneModel extends BaseModel {
         width: oldwidth,
         height: oldheight,
       } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
-      const {
+      const { widthSegments, heightSegments, width, height } =
-        widthSegments,
+        options as IGeometryLayerStyleOptions;
-        heightSegments,
-        width,
-        height,
-      } = options as IGeometryLayerStyleOptions;
       this.layer.style({
         widthSegments:
           widthSegments !== undefined ? widthSegments : oldwidthSegments,

packages/layers/src/Geometry/models/sprite.ts

@@ -1,9 +1,4 @@
-import {
+import { gl, IModel, IModelUniform, ITexture2D } from '@antv/l7-core';
-  gl,
-  IModel,
-  IModelUniform,
-  ITexture2D,
-} from '@antv/l7-core';
 import { Version } from '@antv/l7-maps';
 
 import BaseModel from '../../core/BaseModel';
@@ -63,9 +58,8 @@ export default class SpriteModel extends BaseModel {
   }
 
   public planeGeometryUpdateTriangulation = () => {
-    const {
+    const { spriteBottom = -100000 } =
-      spriteBottom = -100000,
+      this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IGeometryLayerStyleOptions;
     const updateZ = this.spriteUpdate;
     const bottomZ = spriteBottom;
     const topZ = this.spriteTop;
@@ -175,21 +169,20 @@ export default class SpriteModel extends BaseModel {
       this.updateModel();
     }, 100);
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'geometrySprite',
-        moduleName: 'geometrySprite',
+      vertexShader: spriteVert,
-        vertexShader: spriteVert,
+      fragmentShader: spriteFrag,
-        fragmentShader: spriteFrag,
+      triangulation: this.planeGeometryTriangulation,
-        triangulation: this.planeGeometryTriangulation,
+      primitive: gl.POINTS,
-        primitive: gl.POINTS,
+      depth: { enable: false },
-        depth: { enable: false },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+    });
-      })
+    return [model];
-     return [model]
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    return await this.initModels();
+    return this.initModels();
   }
 
   public updateTexture(mapTexture: string | undefined): void {

packages/layers/src/canvas/models/canvas.ts

@@ -61,9 +61,8 @@ export default class CanvaModel extends BaseModel {
   }
 
   public async initModels() {
-    const {
+    const { update = CanvasUpdateType.ALWAYS } =
-      update = CanvasUpdateType.ALWAYS,
+      this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
-    } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
     this.updateMode = update as CanvasUpdateType;
     this.initCanvas();
 
@@ -79,10 +78,8 @@ export default class CanvaModel extends BaseModel {
     const { zIndex } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
     const size = this.mapService.getSize();
     const [width, height] = size;
-    const {
+    const { width: viewWidth, height: viewHeight } =
-      width: viewWidth,
+      this.rendererService.getViewportSize();
-      height: viewHeight,
-    } = this.rendererService.getViewportSize();
     this.prevSize = [viewWidth, viewHeight];
 
     const canvas = document.createElement('canvas');
@@ -110,10 +107,8 @@ export default class CanvaModel extends BaseModel {
   };
 
   public renderCanvas = () => {
-    const {
+    const { width: viewWidth, height: viewHeight } =
-      width: viewWidth,
+      this.rendererService.getViewportSize();
-      height: viewHeight,
-    } = this.rendererService.getViewportSize();
     if (this.prevSize[0] !== viewWidth || this.prevSize[1] !== viewHeight) {
       this.prevSize = [viewWidth, viewHeight];
       const size = this.mapService.getSize();
@@ -124,9 +119,8 @@ export default class CanvaModel extends BaseModel {
       this.canvas.style.height = height + 'px';
     }
 
-    const {
+    const { drawingOnCanvas } =
-      drawingOnCanvas,
+      this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
-    } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
 
     if (this.ctx) {
       drawingOnCanvas({

packages/layers/src/citybuliding/models/build.ts

@@ -1,10 +1,10 @@
 import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
 import { rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
+import { ICityBuildLayerStyleOptions } from '../../core/interface';
 import { PolygonExtrudeTriangulation } from '../../core/triangulation';
 import buildFrag from '../shaders/build_frag.glsl';
 import buildVert from '../shaders/build_vert.glsl';
-import { ICityBuildLayerStyleOptions } from '../../core/interface';
 export default class CityBuildModel extends BaseModel {
   private cityCenter: [number, number];
   private cityMinSize: number;
@@ -67,23 +67,22 @@ export default class CityBuildModel extends BaseModel {
 
     this.startModelAnimate();
 
-      return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'cityBuilding',
-        moduleName: 'cityBuilding',
+      vertexShader: buildVert,
-        vertexShader: buildVert,
+      fragmentShader: buildFrag,
-        fragmentShader: buildFrag,
+      triangulation: PolygonExtrudeTriangulation,
-        triangulation: PolygonExtrudeTriangulation,
+      depth: { enable: true },
-        depth: { enable: true },
+      cull: {
-        cull: {
+        enable: true,
-          enable: true,
+        face: gl.BACK,
-          face: gl.BACK,
+      },
-        },
+    });
-      })
+    return [model];
-     return [model]
   }
 
   protected registerBuiltinAttributes() {
@@ -124,9 +123,7 @@ export default class CityBuildModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 10 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },

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

@@ -17,35 +17,33 @@ interface IAtmoSphereLayerStyleOptions {
 
 export default class EarthAtomSphereModel extends BaseModel {
   public getUninforms(): IModelUniform {
-    const {
+    const { opacity = 1 } =
-      opacity = 1,
+      this.layer.getLayerConfig() as IAtmoSphereLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IAtmoSphereLayerStyleOptions;
     return {
       u_opacity: isNumber(opacity) ? opacity : 1.0,
     };
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
     return '';
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     // TODO: 调整图层的绘制顺序 地球大气层
     this.layer.zIndex = -997;
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'earthAtmoSphere',
-        moduleName: 'earthAtmoSphere',
+      vertexShader: atmoSphereVert,
-        vertexShader: atmoSphereVert,
+      fragmentShader: atmoSphereFrag,
-        fragmentShader: atmoSphereFrag,
+      triangulation: earthTriangulation,
-        triangulation: earthTriangulation,
+      depth: { enable: false },
-        depth: { enable: false },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+    });
-      })
+    return [model];
-     return [model]
   }
 
   protected registerBuiltinAttributes() {
@@ -61,9 +59,7 @@ export default class EarthAtomSphereModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },

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

@@ -80,27 +80,26 @@ export default class BaseEarthModel extends BaseModel {
       this.layerService.reRender();
     });
 
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
     return '';
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     // Tip: 调整图层的绘制顺序 地球大气层
     this.layer.zIndex = -998;
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'earthBase',
-        moduleName: 'earthBase',
+      vertexShader: baseVert,
-        vertexShader: baseVert,
+      fragmentShader: baseFrag,
-        fragmentShader: baseFrag,
+      triangulation: earthTriangulation,
-        triangulation: earthTriangulation,
+      depth: { enable: true },
-        depth: { enable: true },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+    });
-      })
+    return [model];
-     return [model]
   }
 
   protected registerBuiltinAttributes() {
@@ -115,9 +114,7 @@ export default class BaseEarthModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },

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

@@ -17,35 +17,33 @@ interface IBloomLayerStyleOptions {
 
 export default class EarthBloomSphereModel extends BaseModel {
   public getUninforms(): IModelUniform {
-    const {
+    const { opacity = 1 } =
-      opacity = 1,
+      this.layer.getLayerConfig() as IBloomLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IBloomLayerStyleOptions;
     return {
       u_opacity: isNumber(opacity) ? opacity : 1.0,
     };
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
     return '';
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     // Tip: 调整图层的绘制顺序，让它保持在地球后面（减少锯齿现象）
     this.layer.zIndex = -999;
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'earthBloom',
-        moduleName: 'earthBloom',
+      vertexShader: bloomSphereVert,
-        vertexShader: bloomSphereVert,
+      fragmentShader: bloomSphereFrag,
-        fragmentShader: bloomSphereFrag,
+      triangulation: earthOuterTriangulation,
-        triangulation: earthOuterTriangulation,
+      depth: { enable: false },
-        depth: { enable: false },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+    });
-      })
+    return [model];
-     return [model]
   }
 
   protected registerBuiltinAttributes() {
@@ -60,9 +58,7 @@ export default class EarthBloomSphereModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },

packages/layers/src/heatmap/models/grid.ts

@@ -13,11 +13,8 @@ import heatmapGridVert from '../shaders/grid_vert.glsl';
 import heatmapGridFrag from '../shaders/hexagon_frag.glsl';
 export default class GridModel extends BaseModel {
   public getUninforms(): IModelUniform {
-    const {
+    const { opacity, coverage, angle } =
-      opacity,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-      coverage,
-      angle,
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     return {
       u_opacity: opacity || 1.0,
       u_coverage: coverage || 0.9,
@@ -30,25 +27,22 @@ export default class GridModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-      maskInside = true,
+    const model = await this.layer.buildLayerModel({
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
+      moduleName: 'heatmapGrid',
-   const model = await this.layer
+      vertexShader: heatmapGridVert,
-      .buildLayerModel({
+      fragmentShader: heatmapGridFrag,
-        moduleName: 'heatmapGrid',
+      triangulation: HeatmapGridTriangulation,
-        vertexShader: heatmapGridVert,
+      primitive: gl.TRIANGLES,
-        fragmentShader: heatmapGridFrag,
+      depth: { enable: false },
-        triangulation: HeatmapGridTriangulation,
+      stencil: getMask(mask, maskInside),
-        primitive: gl.TRIANGLES,
+    });
-        depth: { enable: false },
+    return [model];
-        stencil: getMask(mask, maskInside),
-      })
-     return [model]
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
@@ -63,9 +57,11 @@ export default class GridModel extends BaseModel {
         },
         size: 3,
         update: (feature: IEncodeFeature) => {
-          const coordinates = (feature.version === 'GAODE2.x'
+          const coordinates = (
-            ? feature.originCoordinates
+            feature.version === 'GAODE2.x'
-            : feature.coordinates) as number[];
+              ? feature.originCoordinates
+              : feature.coordinates
+          ) as number[];
           return [coordinates[0], coordinates[1], 0];
         },
       },

packages/layers/src/heatmap/models/grid3d.ts

@@ -13,11 +13,8 @@ import heatmapGrid3dVert from '../shaders/hexagon_3d_vert.glsl';
 import heatmapGridFrag from '../shaders/hexagon_frag.glsl';
 export default class Grid3DModel extends BaseModel {
   public getUninforms(): IModelUniform {
-    const {
+    const { opacity, coverage, angle } =
-      opacity,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-      coverage,
-      angle,
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     return {
       u_opacity: opacity || 1.0,
       u_coverage: coverage || 1.0,
@@ -30,27 +27,23 @@ export default class Grid3DModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-      maskInside = true,
+    const model = await this.layer.buildLayerModel({
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
+      moduleName: 'heatmapGrid3d',
-   const model = await this.layer
+      vertexShader: heatmapGrid3dVert,
-      .buildLayerModel({
+      fragmentShader: heatmapGridFrag,
-        moduleName: 'heatmapGrid3d',
+      triangulation: PointExtrudeTriangulation,
-        vertexShader: heatmapGrid3dVert,
+      primitive: gl.TRIANGLES,
-        fragmentShader: heatmapGridFrag,
+      depth: { enable: true },
-        triangulation: PointExtrudeTriangulation,
+      blend: this.getBlend(),
-        primitive: gl.TRIANGLES,
+      stencil: getMask(mask, maskInside),
-        depth: { enable: true },
+    });
-        blend: this.getBlend(),
+    return [model];
-        stencil: getMask(mask, maskInside),
-      })
-     return [model]
-
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
@@ -64,9 +57,7 @@ export default class Grid3DModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },
@@ -107,9 +98,11 @@ export default class Grid3DModel extends BaseModel {
         },
         size: 3,
         update: (feature: IEncodeFeature) => {
-          const coordinates = (feature.version === 'GAODE2.x'
+          const coordinates = (
-            ? feature.originCoordinates
+            feature.version === 'GAODE2.x'
-            : feature.coordinates) as number[];
+              ? feature.originCoordinates
+              : feature.coordinates
+          ) as number[];
           return [coordinates[0], coordinates[1], 0];
         },
       },

packages/layers/src/heatmap/models/heatmap.ts

@@ -60,15 +60,11 @@ export default class HeatMapModel extends BaseModel {
     throw new Error('Method not implemented.');
   }
 
-   public async initModels(): Promise<IModel[]> {
+  public async initModels(): Promise<IModel[]> {
-    const {
+    const { createFramebuffer, getViewportSize, createTexture2D } =
-      createFramebuffer,
+      this.rendererService;
-      getViewportSize,
+    const shapeAttr =
-      createTexture2D,
+      this.styleAttributeService.getLayerStyleAttribute('shape');
-    } = this.rendererService;
-    const shapeAttr = this.styleAttributeService.getLayerStyleAttribute(
-      'shape',
-    );
     const shapeType = shapeAttr?.scale?.field || 'heatmap';
     this.shapeType = shapeType as string;
     // 生成热力图密度图
@@ -95,12 +91,11 @@ export default class HeatMapModel extends BaseModel {
     });
 
     this.updateColorTexture();
-    return [this.intensityModel, this.colorModel]
+    return [this.intensityModel, this.colorModel];
-
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    return await this.initModels();
+    return this.initModels();
   }
 
   protected registerBuiltinAttributes() {
@@ -137,9 +132,7 @@ export default class HeatMapModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return [size as number];
         },
@@ -174,24 +167,17 @@ export default class HeatMapModel extends BaseModel {
   }
 
   private buildHeatmapColor(): IModel {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     this.shaderModuleService.registerModule('heatmapColor', {
       vs: heatmapColorVert,
       fs: heatmapColorFrag,
     });
 
-    const { vs, fs, uniforms } = this.shaderModuleService.getModule(
+    const { vs, fs, uniforms } =
-      'heatmapColor',
+      this.shaderModuleService.getModule('heatmapColor');
-    );
+    const { createAttribute, createElements, createBuffer, createModel } =
-    const {
+      this.rendererService;
-      createAttribute,
-      createElements,
-      createBuffer,
-      createModel,
-    } = this.rendererService;
     return createModel({
       vs,
       fs,
@@ -236,7 +222,7 @@ export default class HeatMapModel extends BaseModel {
 
     this.layerService.beforeRenderData(this.layer);
     this.layer.hooks.beforeRender.call();
-    
+
     this.intensityModel?.draw({
       uniforms: {
         u_opacity: opacity || 1.0,
@@ -249,9 +235,8 @@ export default class HeatMapModel extends BaseModel {
   }
 
   private drawColorMode() {
-    const {
+    const { opacity } =
-      opacity,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     this.colorModel?.draw({
       uniforms: {
         u_opacity: opacity || 1.0,
@@ -262,9 +247,8 @@ export default class HeatMapModel extends BaseModel {
   }
 
   private draw3DHeatMap() {
-    const {
+    const { opacity } =
-      opacity,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
 
     // const invert = mat4.invert(
     //   mat4.create(),
@@ -284,16 +268,15 @@ export default class HeatMapModel extends BaseModel {
         u_opacity: opacity || 1.0,
         u_colorTexture: this.colorTexture,
         u_texture: this.heatmapFramerBuffer,
-        u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
+        u_ViewProjectionMatrixUncentered:
+          this.cameraService.getViewProjectionMatrixUncentered(),
         u_InverseViewProjectionMatrix: [...invert],
       },
     });
   }
   private build3dHeatMap() {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     const { getViewportSize } = this.rendererService;
     const { width, height } = getViewportSize();
     const triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0);
@@ -302,15 +285,10 @@ export default class HeatMapModel extends BaseModel {
       fs: heatmap3DFrag,
     });
 
-    const { vs, fs, uniforms } = this.shaderModuleService.getModule(
+    const { vs, fs, uniforms } =
-      'heatmap3dColor',
+      this.shaderModuleService.getModule('heatmap3dColor');
-    );
+    const { createAttribute, createElements, createBuffer, createModel } =
-    const {
+      this.rendererService;
-      createAttribute,
-      createElements,
-      createBuffer,
-      createModel,
-    } = this.rendererService;
     return createModel({
       vs,
       fs,
@@ -364,9 +342,8 @@ export default class HeatMapModel extends BaseModel {
       this.texture.destroy();
     }
 
-    const {
+    const { rampColors } =
-      rampColors,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     const imageData = generateColorRamp(rampColors as IColorRamp);
     this.colorTexture = createTexture2D({
       data: new Uint8Array(imageData.data),

packages/layers/src/heatmap/models/hexagon.ts

@@ -14,11 +14,8 @@ import heatmapGridVert from '../shaders/hexagon_vert.glsl';
 
 export default class HexagonModel extends BaseModel {
   public getUninforms(): IModelUniform {
-    const {
+    const { opacity, coverage, angle } =
-      opacity,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-      coverage,
-      angle,
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     return {
       u_opacity: opacity || 1.0,
       u_coverage: coverage || 0.9,
@@ -31,26 +28,23 @@ export default class HexagonModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
-      maskInside = true,
+    const model = await this.layer.buildLayerModel({
-    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
+      moduleName: 'heatmapHexagon',
-   const model = await this.layer
+      vertexShader: heatmapGridVert,
-      .buildLayerModel({
+      fragmentShader: heatmapGridFrag,
-        moduleName: 'heatmapHexagon',
+      triangulation: HeatmapGridTriangulation,
-        vertexShader: heatmapGridVert,
+      depth: { enable: false },
-        fragmentShader: heatmapGridFrag,
+      primitive: gl.TRIANGLES,
-        triangulation: HeatmapGridTriangulation,
+      blend: this.getBlend(),
-        depth: { enable: false },
+      stencil: getMask(mask, maskInside),
-        primitive: gl.TRIANGLES,
+    });
-        blend: this.getBlend(),
+    return [model];
-        stencil: getMask(mask, maskInside),
-      })
-     return [model]
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
@@ -65,9 +59,11 @@ export default class HexagonModel extends BaseModel {
         },
         size: 3,
         update: (feature: IEncodeFeature) => {
-          const coordinates = (feature.version === 'GAODE2.x'
+          const coordinates = (
-            ? feature.originCoordinates
+            feature.version === 'GAODE2.x'
-            : feature.coordinates) as number[];
+              ? feature.originCoordinates
+              : feature.coordinates
+          ) as number[];
           return [coordinates[0], coordinates[1], 0];
         },
       },

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

@@ -24,10 +24,8 @@ export default class ImageModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IImageLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
 
     const source = this.layer.getSource();
     const { createTexture2D } = this.rendererService;
@@ -61,24 +59,22 @@ export default class ImageModel extends BaseModel {
         mag: gl.LINEAR,
         min: gl.LINEAR,
       });
-
     }
 
-    const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'rasterImage',
-        moduleName: 'rasterImage',
+      vertexShader: ImageVert,
-        vertexShader: ImageVert,
+      fragmentShader: ImageFrag,
-        fragmentShader: ImageFrag,
+      triangulation: RasterImageTriangulation,
-        triangulation: RasterImageTriangulation,
+      primitive: gl.TRIANGLES,
-        primitive: gl.TRIANGLES,
+      blend: {
-        blend: {
+        // Tip: 优化显示效果
-          // Tip: 优化显示效果
+        enable: true,
-          enable: true,
+      },
-        },
+      depth: { enable: false },
-        depth: { enable: false },
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-    return [model]
   }
 
   public clearModels(): void {
@@ -86,7 +82,7 @@ export default class ImageModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    return await this.initModels();
+    return this.initModels();
   }
 
   protected registerBuiltinAttributes() {

packages/layers/src/index.ts

@@ -137,6 +137,7 @@ container
   .to(LayerModelPlugin)
   .inRequestScope();
 
+export * from './core/interface';
 export {
   BaseLayer,
   BaseModel,
@@ -154,5 +155,3 @@ export {
   MaskLayer,
   TileDebugLayer,
 };
-
-export * from './core/interface';

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

@@ -133,7 +133,7 @@ export default class ArcModel extends BaseModel {
     this.updateTexture();
     this.iconService.on('imageUpdate', this.updateTexture);
 
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
@@ -143,11 +143,8 @@ export default class ArcModel extends BaseModel {
   }
 
   public getShaders(): { frag: string; vert: string; type: string } {
-    const {
+    const { sourceColor, targetColor, lineType } =
-      sourceColor,
+      this.layer.getLayerConfig() as ILineLayerStyleOptions;
-      targetColor,
-      lineType,
-    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     if (lineType === 'dash') {
       return {
         frag: arc_dash_frag,
@@ -172,7 +169,7 @@ export default class ArcModel extends BaseModel {
     }
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     const {
       segmentNumber = 30,
       mask = false,
@@ -180,18 +177,17 @@ export default class ArcModel extends BaseModel {
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     const { frag, vert, type } = this.getShaders();
     //
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'lineArc2d' + type,
-        moduleName: 'lineArc2d' + type,
+      vertexShader: vert,
-        vertexShader: vert,
+      fragmentShader: frag,
-        fragmentShader: frag,
+      triangulation: LineArcTriangulation,
-        triangulation: LineArcTriangulation,
+      depth: { enable: false },
-        depth: { enable: false },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      segmentNumber,
-        segmentNumber,
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
 
   protected registerBuiltinAttributes() {
@@ -207,9 +203,7 @@ export default class ArcModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },
@@ -249,9 +243,7 @@ export default class ArcModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const iconMap = this.iconService.getIconMap();
           const { texture } = feature;
           const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };

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

@@ -124,11 +124,10 @@ export default class Arc3DModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-  
     this.updateTexture();
     this.iconService.on('imageUpdate', this.updateTexture);
 
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
@@ -138,10 +137,8 @@ export default class Arc3DModel extends BaseModel {
   }
 
   public getShaders(): { frag: string; vert: string; type: string } {
-    const {
+    const { sourceColor, targetColor } =
-      sourceColor,
+      this.layer.getLayerConfig() as ILineLayerStyleOptions;
-      targetColor,
-    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
 
     if (sourceColor && targetColor) {
       // 分离 linear 功能
@@ -159,7 +156,7 @@ export default class Arc3DModel extends BaseModel {
     }
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     const {
       segmentNumber = 30,
       mask = false,
@@ -167,17 +164,16 @@ export default class Arc3DModel extends BaseModel {
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     const { frag, vert, type } = this.getShaders();
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'lineArc3d' + type,
-        moduleName: 'lineArc3d' + type,
+      vertexShader: vert,
-        vertexShader: vert,
+      fragmentShader: frag,
-        fragmentShader: frag,
+      triangulation: LineArcTriangulation,
-        triangulation: LineArcTriangulation,
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      segmentNumber,
-        segmentNumber,
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
@@ -192,9 +188,7 @@ export default class Arc3DModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },
@@ -233,9 +227,7 @@ export default class Arc3DModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const iconMap = this.iconService.getIconMap();
           const { texture } = feature;
           const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };

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

@@ -127,7 +127,7 @@ export default class Arc3DModel extends BaseModel {
     this.updateTexture();
     this.iconService.on('imageUpdate', this.updateTexture);
 
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
@@ -137,10 +137,8 @@ export default class Arc3DModel extends BaseModel {
   }
 
   public getShaders(): { frag: string; vert: string; type: string } {
-    const {
+    const { sourceColor, targetColor } =
-      sourceColor,
+      this.layer.getLayerConfig() as ILineLayerStyleOptions;
-      targetColor,
-    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
 
     if (sourceColor && targetColor) {
       // 分离 linear 功能
@@ -158,25 +156,24 @@ export default class Arc3DModel extends BaseModel {
     }
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     const {
       segmentNumber = 30,
       mask = false,
       maskInside = true,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     const { frag, vert, type } = this.getShaders();
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'lineEarthArc3d' + type,
-        moduleName: 'lineEarthArc3d' + type,
+      vertexShader: vert,
-        vertexShader: vert,
+      fragmentShader: frag,
-        fragmentShader: frag,
+      triangulation: LineArcTriangulation,
-        triangulation: LineArcTriangulation,
+      depth: { enable: true },
-        depth: { enable: true },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      segmentNumber,
-        segmentNumber,
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
@@ -191,9 +188,7 @@ export default class Arc3DModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },
@@ -232,9 +227,7 @@ export default class Arc3DModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const iconMap = this.iconService.getIconMap();
           const { texture } = feature;
           const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };

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

@@ -116,7 +116,7 @@ export default class GreatCircleModel extends BaseModel {
     this.updateTexture();
     this.iconService.on('imageUpdate', this.updateTexture);
 
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
@@ -125,22 +125,19 @@ export default class GreatCircleModel extends BaseModel {
     this.iconService.off('imageUpdate', this.updateTexture);
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as ILineLayerStyleOptions;
-      maskInside = true,
+    const model = await this.layer.buildLayerModel({
-    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+      moduleName: 'lineGreatCircle',
-   const model = await this.layer
+      vertexShader: line_arc2d_vert,
-      .buildLayerModel({
+      fragmentShader: line_arc_frag,
-        moduleName: 'lineGreatCircle',
+      triangulation: LineArcTriangulation,
-        vertexShader: line_arc2d_vert,
+      depth: { enable: false },
-        fragmentShader: line_arc_frag,
+      blend: this.getBlend(),
-        triangulation: LineArcTriangulation,
+      stencil: getMask(mask, maskInside),
-        depth: { enable: false },
+    });
-        blend: this.getBlend(),
+    return [model];
-        stencil: getMask(mask, maskInside),
-      })
-     return [model]
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
@@ -155,9 +152,7 @@ export default class GreatCircleModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },
@@ -197,9 +192,7 @@ export default class GreatCircleModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const iconMap = this.iconService.getIconMap();
           const { texture } = feature;
           // console.log('icon feature', feature)

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

@@ -85,14 +85,14 @@ export default class LineModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
     this.dataTexture?.destroy();
   }
 
-  public async buildModels(): Promise<IModel[]>  {
+  public async buildModels(): Promise<IModel[]> {
     const {
       mask = false,
       maskInside = true,
@@ -101,17 +101,16 @@ export default class LineModel extends BaseModel {
     const { frag, vert } = this.getShaders();
     this.layer.triangulation = LineTriangulation;
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'lineHalf',
-        moduleName: 'lineHalf',
+      vertexShader: vert,
-        vertexShader: vert,
+      fragmentShader: frag,
-        fragmentShader: frag,
+      triangulation: LineTriangulation,
-        triangulation: LineTriangulation,
+      depth: { enable: depth },
-        depth: { enable: depth },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
 
   /**
@@ -165,9 +164,7 @@ export default class LineModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 4,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const startPoint = (feature.coordinates[0] || [0, 0]) as number[];
           const endPoint = (feature.coordinates[3] || [0, 0]) as number[];
 
@@ -188,9 +185,7 @@ export default class LineModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
         },

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

@@ -68,8 +68,8 @@ export default class LineModel extends BaseModel {
       dashArray.push(0, 0);
     }
 
-    if (this.rendererService.getDirty()) {
+    if (this.rendererService.getDirty() && this.texture) {
-      this.texture && this.texture.bind();
+      this.texture.bind();
     }
 
     // 转化渐变色

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

@@ -78,7 +78,7 @@ export default class LinearLineModel extends BaseModel {
 
   public async initModels(): Promise<IModel[]> {
     this.updateTexture();
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
@@ -86,7 +86,7 @@ export default class LinearLineModel extends BaseModel {
     this.dataTexture?.destroy();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     const {
       mask = false,
       maskInside = true,
@@ -95,17 +95,16 @@ export default class LinearLineModel extends BaseModel {
 
     this.layer.triangulation = LineTriangulation;
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'lineRampColors',
-        moduleName: 'lineRampColors',
+      vertexShader: linear_line_vert,
-        vertexShader: linear_line_vert,
+      fragmentShader: linear_line_frag,
-        fragmentShader: linear_line_frag,
+      triangulation: LineTriangulation,
-        triangulation: LineTriangulation,
+      depth: { enable: depth },
-        depth: { enable: depth },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
 
   protected registerBuiltinAttributes() {
@@ -169,9 +168,7 @@ export default class LinearLineModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
         },
@@ -231,9 +228,8 @@ export default class LinearLineModel extends BaseModel {
     if (this.colorTexture) {
       this.colorTexture.destroy();
     }
-    const {
+    const { rampColors } =
-      rampColors,
+      this.layer.getLayerConfig() as ILineLayerStyleOptions;
-    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     const imageData = generateColorRamp(rampColors as IColorRamp);
     this.colorTexture = createTexture2D({
       data: new Uint8Array(imageData.data),

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

@@ -79,7 +79,7 @@ export default class SimpleLineModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
@@ -87,10 +87,8 @@ export default class SimpleLineModel extends BaseModel {
   }
 
   public getShaders(): { frag: string; vert: string; type: string } {
-    const {
+    const { sourceColor, targetColor } =
-      sourceColor,
+      this.layer.getLayerConfig() as ILineLayerStyleOptions;
-      targetColor,
-    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     if (sourceColor && targetColor) {
       // 分离 linear 功能
       return {
@@ -107,27 +105,24 @@ export default class SimpleLineModel extends BaseModel {
     }
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as ILineLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
 
     const { frag, vert, type } = this.getShaders();
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: type,
-        moduleName: type,
+      vertexShader: vert,
-        vertexShader: vert,
+      fragmentShader: frag,
-        fragmentShader: frag,
+      triangulation: SimpleLineTriangulation,
-        triangulation: SimpleLineTriangulation,
+      primitive: gl.LINES,
-        primitive: gl.LINES,
+      depth: { enable: false },
-        depth: { enable: false },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+      pick: false,
-        pick: false,
+    });
-      })
+    return [model];
-     return [model]
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
@@ -185,9 +180,7 @@ export default class SimpleLineModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
         },

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

@@ -45,7 +45,7 @@ export default class LineWallModel extends BaseModel {
 
     return {
       u_heightfixed: Number(heightfixed),
-  
+
       u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
 
@@ -74,7 +74,7 @@ export default class LineWallModel extends BaseModel {
     this.updateTexture();
     this.iconService.on('imageUpdate', this.updateTexture);
 
-      return await this.buildModels();
+    return this.buildModels();
   }
 
   public clearModels() {
@@ -82,17 +82,16 @@ export default class LineWallModel extends BaseModel {
     this.iconService.off('imageUpdate', this.updateTexture);
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'lineWall',
-        moduleName: 'lineWall',
+      vertexShader: line_vert,
-        vertexShader: line_vert,
+      fragmentShader: line_frag,
-        fragmentShader: line_frag,
+      triangulation: LineTriangulation,
-        triangulation: LineTriangulation,
+      depth: { enable: false },
-        depth: { enable: false },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+    });
-      })
+    return [model];
-     return [model]
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
@@ -150,9 +149,7 @@ export default class LineWallModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
         },
@@ -219,9 +216,7 @@ export default class LineWallModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 2,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const iconMap = this.iconService.getIconMap();
           const { texture } = feature;
           const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };

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

@@ -9,10 +9,8 @@ import mask_vert from '../shaders/mask_vert.glsl';
 
 export default class MaskModel extends BaseModel {
   public getUninforms() {
-    const {
+    const { opacity = 0, color = '#000' } =
-      opacity = 0,
+      this.layer.getLayerConfig() as IMaskLayerStyleOptions;
-      color = '#000'
-    } = this.layer.getLayerConfig() as IMaskLayerStyleOptions;
     return {
       u_opacity: isNumber(opacity) ? opacity : 0.0,
       u_color: rgb2arr(color),
@@ -20,39 +18,40 @@ export default class MaskModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
-  public async buildModels(): Promise<IModel[]>  {
+  public async buildModels(): Promise<IModel[]> {
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'mask',
-        moduleName: 'mask',
+      vertexShader: mask_vert,
-        vertexShader: mask_vert,
+      fragmentShader: mask_frag,
-        fragmentShader: mask_frag,
+      triangulation: polygonTriangulation,
-        triangulation: polygonTriangulation,
+      depth: { enable: false },
-        depth: { enable: false },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      stencil: {
-        stencil: {
+        enable: true,
-          enable: true,
+        mask: 0xff,
+        func: {
+          cmp: gl.ALWAYS,
+          ref: 1,
           mask: 0xff,
-          func: {
-            cmp: gl.ALWAYS,
-            ref: 1,
-            mask: 0xff,
-          },
-          opFront: {
-            fail: gl.REPLACE,
-            zfail: gl.REPLACE,
-            zpass: gl.REPLACE,
-          },
         },
-        pick: false
+        opFront: {
-      })
+          fail: gl.REPLACE,
-     return [model]
+          zfail: gl.REPLACE,
+          zpass: gl.REPLACE,
+        },
+      },
+      pick: false,
+    });
+    return [model];
   }
 
   public clearModels(refresh = true) {
-    refresh && this.layerService.clear();
+    if (refresh) {
+      this.layerService.clear();
+    }
   }
 
   protected registerBuiltinAttributes() {

packages/layers/src/point/__tests__/layer_init.spec.ts

@@ -8,92 +8,88 @@ describe('template', () => {
   const body = document.querySelector('body') as HTMLBodyElement;
   body.appendChild(el);
   const scene = TestScene({});
-  const testData =  [
+  const testData = [
     {
       x: 112,
       y: 30,
-      name:'text1',
+      name: 'text1',
-      v:10,
+      v: 10,
     },
     {
       x: 112,
       y: 32,
-      name:'text2',
+      name: 'text2',
-      v:20
+      v: 20,
     },
   ];
 
   it('scene layer fill', async () => {
-    const layer = new PointLayer().source(
+    const layer = new PointLayer()
-        testData,
+      .source(testData, {
-      {
         parser: {
           type: 'json',
           x: 'x',
           y: 'y',
         },
-      },
+      })
-    ).shape('circle')
+      .shape('circle')
-    .color('red')
+      .color('red')
-    .size(10)
+      .size(10);
-    scene.on('loaded',  () =>{
+    scene.on('loaded', () => {
-      scene.addLayer(layer)
+      scene.addLayer(layer);
-   })
+    });
   });
 
   it('scene layer text', async () => {
-    const layer = new PointLayer({name:'text'}).source(
+    const layer = new PointLayer({ name: 'text' })
-        testData,
+      .source(testData, {
-      {
         parser: {
           type: 'json',
           x: 'x',
           y: 'y',
         },
-      },
+      })
-    ).shape('name','text')
+      .shape('name', 'text')
-    .color('name',['red','blue'])
+      .color('name', ['red', 'blue'])
-    .size('v',[10,20])
+      .size('v', [10, 20]);
 
-    scene.on('loaded',  () =>{
+    scene.on('loaded', () => {
-      scene.addLayer(layer)
+      scene.addLayer(layer);
-      expect(layer.name).toEqual('text')
+      expect(layer.name).toEqual('text');
-   })
+    });
   });
 
   it('scene layer extrude', async () => {
-    const layer = new PointLayer().source(
+    const layer = new PointLayer()
-        testData,
+      .source(testData, {
-      {
         parser: {
           type: 'json',
           x: 'x',
           y: 'y',
         },
-      },
+      })
-    ).shape('cloumn')
+      .shape('cloumn')
-    .color('red')
+      .color('red')
-    .size([5,5,10])
+      .size([5, 5, 10]);
-    scene.on('loaded',  () =>{
+    scene.on('loaded', () => {
-      scene.addLayer(layer)
+      scene.addLayer(layer);
-    })
+    });
   });
 
   it('scene layer simplePoint', async () => {
-    const layer = new PointLayer().source(
+    const layer = new PointLayer()
-        testData,
+      .source(testData, {
-      {
         parser: {
           type: 'json',
           x: 'x',
           y: 'y',
         },
-      },
+      })
-    ).shape('simple')
+      .shape('simple')
-    .color('red')
+      .color('red')
-    .size(1)
+      .size(1);
-    scene.on('loaded',  () =>{
+    scene.on('loaded', () => {
-      scene.addLayer(layer)
+      scene.addLayer(layer);
-   })
+    });
   });
 });

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

@@ -129,31 +129,30 @@ export default class ExtrudeModel extends BaseModel {
       u_lightEnable: Number(lightEnable),
     };
   }
-  public async initModels():Promise<IModel[]> {
+  public async initModels(): Promise<IModel[]> {
-    return await this.buildModels();
+    return this.buildModels();
   }
 
-  public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     // GAODE1.x GAODE2.x MAPBOX
     const {
       animateOption: { repeat = 1 },
     } = this.layer.getLayerConfig() as ILayerConfig;
     this.raiseRepeat = repeat;
 
- const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'pointEarthExtrude',
-        moduleName: 'pointEarthExtrude',
+      vertexShader: pointExtrudeVert,
-        vertexShader: pointExtrudeVert,
+      fragmentShader: pointExtrudeFrag,
-        fragmentShader: pointExtrudeFrag,
+      triangulation: PointExtrudeTriangulation,
-        triangulation: PointExtrudeTriangulation,
+      depth: { enable: true },
-        depth: { enable: true },
+      cull: {
-        cull: {
+        enable: true,
-          enable: true,
+        face: getCullFace(this.mapService.version),
-          face: getCullFace(this.mapService.version),
+      },
-        },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+    });
-      });
+    return [model];
-      return [model]
   }
   public clearModels() {
     this.dataTexture?.destroy();
@@ -170,9 +169,7 @@ export default class ExtrudeModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 3,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size } = feature;
           if (size) {
             let buffersize: number[] = [];

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

@@ -90,9 +90,8 @@ export default class FillModel extends BaseModel {
     };
   }
   public getAnimateUniforms(): IModelUniform {
-    const {
+    const { animateOption = { enable: false } } =
-      animateOption = { enable: false },
+      this.layer.getLayerConfig() as ILayerConfig;
-    } = this.layer.getLayerConfig() as ILayerConfig;
     return {
       u_animate: this.animateOption2Array(animateOption),
       u_time: this.layer.getLayerAnimateTime(),
@@ -100,7 +99,7 @@ export default class FillModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-    return await this.buildModels();
+    return this.buildModels();
   }
 
   public async buildModels(): Promise<IModel[]> {

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

@@ -127,11 +127,11 @@ export default class ExtrudeModel extends BaseModel {
       u_lightEnable: Number(lightEnable),
     };
   }
-  public async initModels():Promise<IModel[]>  {
+  public async initModels(): Promise<IModel[]> {
-    return await this.buildModels();
+    return this.buildModels();
   }
 
-  public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     // GAODE1.x GAODE2.x MAPBOX
     const {
       depth = true,
@@ -139,23 +139,21 @@ export default class ExtrudeModel extends BaseModel {
     } = this.layer.getLayerConfig() as ILayerConfig;
     this.raiseRepeat = repeat;
 
-      const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'pointExtrude',
-        moduleName: 'pointExtrude',
+      vertexShader: pointExtrudeVert,
-        vertexShader: pointExtrudeVert,
+      fragmentShader: pointExtrudeFrag,
-        fragmentShader: pointExtrudeFrag,
+      triangulation: PointExtrudeTriangulation,
-        triangulation: PointExtrudeTriangulation,
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      cull: {
-        cull: {
+        enable: true,
-          enable: true,
+        face: getCullFace(this.mapService.version),
-          face: getCullFace(this.mapService.version),
+      },
-        },
+      depth: {
-        depth: {
+        enable: depth,
-          enable: depth,
+      },
-        },
+    });
-      })
+    return [model];
-      return [model]
-       
   }
   public clearModels() {
     this.dataTexture?.destroy();
@@ -173,9 +171,7 @@ export default class ExtrudeModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 3,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size } = feature;
           if (size) {
             let buffersize: number[] = [];

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

@@ -28,42 +28,39 @@ export default class NormalModel extends BaseModel {
     };
   }
   public getUninforms(): IModelUniform {
-    const {
+    const { opacity = 1 } =
-      opacity = 1,
+      this.layer.getLayerConfig() as IPointLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
     return {
       u_opacity: isNumber(opacity) ? opacity : 1.0,
     };
   }
 
-  public async initModels():Promise<IModel[]>  {
+  public async initModels(): Promise<IModel[]> {
-    return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]>  {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IPointLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     this.layer.triangulation = PointTriangulation;
 
-       const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'pointNormal',
-        moduleName: 'pointNormal',
+      vertexShader: normalVert,
-        vertexShader: normalVert,
+      fragmentShader: normalFrag,
-        fragmentShader: normalFrag,
+      triangulation: PointTriangulation,
-        triangulation: PointTriangulation,
+      depth: { enable: false },
-        depth: { enable: false },
+      primitive: gl.POINTS,
-        primitive: gl.POINTS,
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+      pick: false,
-        pick: false,
+    });
-      })
+    return [model];
-      return [model]
   }
 
   public clearModels() {
+    return;
   }
 
   protected registerBuiltinAttributes() {
@@ -78,9 +75,7 @@ export default class NormalModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },

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

@@ -12,12 +12,11 @@ import {
 import { getMask } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
-import { IPointLayerStyleOptions } from '../../core/interface';
+import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface';
 import { PointFillTriangulation } from '../../core/triangulation';
 
 import pointFillFrag from '../shaders/radar/radar_frag.glsl';
 import pointFillVert from '../shaders/radar/radar_vert.glsl';
-import { SizeUnitType } from '../../core/interface'
 
 export default class RadarModel extends BaseModel {
   public getUninforms(): IModelUniform {
@@ -25,7 +24,7 @@ export default class RadarModel extends BaseModel {
       opacity = 1,
       blend,
       speed = 1,
-      unit = 'pixel'
+      unit = 'pixel',
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
     return {
@@ -36,9 +35,8 @@ export default class RadarModel extends BaseModel {
     };
   }
   public getAnimateUniforms(): IModelUniform {
-    const {
+    const { animateOption = { enable: false } } =
-      animateOption = { enable: false },
+      this.layer.getLayerConfig() as ILayerConfig;
-    } = this.layer.getLayerConfig() as ILayerConfig;
     return {
       u_animate: this.animateOption2Array(animateOption),
       u_time: this.layer.getLayerAnimateTime(),
@@ -57,30 +55,24 @@ export default class RadarModel extends BaseModel {
     );
   }
 
-  public async initModels():Promise<IModel[]>  {
+  public async initModels(): Promise<IModel[]> {
-    return await this.buildModels();
+    return this.buildModels();
   }
 
+  public async buildModels(): Promise<IModel[]> {
+    const { mask = false, maskInside = true } =
+      this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
-
+    const model = await this.layer.buildLayerModel({
- public async buildModels():Promise<IModel[]>  {
+      moduleName: 'pointRadar',
-    const {
+      vertexShader: pointFillVert,
-      mask = false,
+      fragmentShader: pointFillFrag,
-      maskInside = true,
+      triangulation: PointFillTriangulation,
-    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
+      depth: { enable: false },
-
+      blend: this.getBlend(),
-       const model = await this.layer
+      stencil: getMask(mask, maskInside),
-      .buildLayerModel({
+    });
-        moduleName: 'pointRadar',
+    return [model];
-        vertexShader: pointFillVert,
-        fragmentShader: pointFillFrag,
-        triangulation: PointFillTriangulation,
-        depth: { enable: false },
-        blend: this.getBlend(),
-        stencil: getMask(mask, maskInside),
-      })
-      return [model]
-       
   }
 
   public clearModels() {
@@ -134,13 +126,9 @@ export default class RadarModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 5 } = feature;
-          return Array.isArray(size)
+          return Array.isArray(size) ? [size[0]] : [size as number];
-            ? [size[0]]
-            : [(size as number)];
         },
       },
     });

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

@@ -92,29 +92,26 @@ export default class SimplePointModel extends BaseModel {
     };
   }
 
-  public async initModels():Promise<IModel[]>  {
+  public async initModels(): Promise<IModel[]> {
-    return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]>  {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IPointLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     this.layer.triangulation = PointTriangulation;
 
-       const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'pointSimple',
-        moduleName: 'pointSimple',
+      vertexShader: simplePointVert,
-        vertexShader: simplePointVert,
+      fragmentShader: simplePointFrag,
-        fragmentShader: simplePointFrag,
+      triangulation: PointTriangulation,
-        triangulation: PointTriangulation,
+      depth: { enable: false },
-        depth: { enable: false },
+      primitive: gl.POINTS,
-        primitive: gl.POINTS,
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-      return [model]
   }
 
   public clearModels() {
@@ -133,9 +130,7 @@ export default class SimplePointModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },

packages/layers/src/polygon/models/extrude.ts

@@ -11,8 +11,8 @@ import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
 import { PolygonExtrudeTriangulation } from '../../core/triangulation';
 import polygonExtrudeFrag from '../shaders/extrude/polygon_extrude_frag.glsl';
-// extrude
 import polygonExtrudeVert from '../shaders/extrude/polygon_extrude_vert.glsl';
+// extrude
 import polygonExtrudeTexFrag from '../shaders/extrude/polygon_extrudetex_frag.glsl';
 // texture
 import polygonExtrudeTexVert from '../shaders/extrude/polygon_extrudetex_vert.glsl';
@@ -95,32 +95,27 @@ export default class ExtrudeModel extends BaseModel {
 
   public async initModels(): Promise<IModel[]> {
     this.loadTexture();
-      return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
 
     const { frag, vert, type } = this.getShaders();
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: type,
-        moduleName: type,
+      vertexShader: vert,
-        vertexShader: vert,
+      fragmentShader: frag,
-        fragmentShader: frag,
+      triangulation: PolygonExtrudeTriangulation,
-        triangulation: PolygonExtrudeTriangulation,
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
 
   public getShaders() {
-    const {
+    const { pickLight, mapTexture } =
-      pickLight,
+      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-      mapTexture,
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
     if (mapTexture) {
       return {
         frag: polygonExtrudeTexFrag,
@@ -212,9 +207,7 @@ export default class ExtrudeModel extends BaseModel {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
+        update: (feature: IEncodeFeature) => {
-          feature: IEncodeFeature,
-        ) => {
           const { size = 10 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
         },
@@ -223,9 +216,8 @@ export default class ExtrudeModel extends BaseModel {
   }
 
   private loadTexture() {
-    const {
+    const { mapTexture } =
-      mapTexture,
+      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
 
     const { createTexture2D } = this.rendererService;
     this.texture = createTexture2D({

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

@@ -53,7 +53,6 @@ export default class FillModel extends BaseModel {
               width: 1,
               height: 1,
             });
-
     }
 
     return {
@@ -70,10 +69,10 @@ export default class FillModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-      return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
     const { frag, vert, triangulation, type } = this.getModelParams();
     const {
       mask = false,
@@ -84,23 +83,22 @@ export default class FillModel extends BaseModel {
       ILayerConfig & IPolygonLayerStyleOptions
     >;
     this.layer.triangulation = triangulation;
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: type,
-        moduleName: type,
+      vertexShader: vert,
-        vertexShader: vert,
+      fragmentShader: frag,
-        fragmentShader: frag,
+      triangulation,
-        triangulation,
+      primitive: gl.TRIANGLES,
-        primitive: gl.TRIANGLES,
+      depth: { enable: false },
-        depth: { enable: false },
+      blend: this.getBlend(),
-        blend: this.getBlend(),
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+      workerEnabled,
-        workerEnabled,
+      workerOptions: {
-        workerOptions: {
+        modelType: type,
-          modelType: type,
+        enablePicking,
-          enablePicking,
+      },
-        },
+    });
-      })
+    return [model];
-     return [model]
   }
 
   public clearModels() {

packages/layers/src/polygon/models/index.ts

@@ -19,7 +19,7 @@ export type PolygonModelType =
   | 'point_extrude'
   | 'text'
   | 'water'
-  | 'ocean'
+  | 'ocean';
 const PolygonModels: { [key in PolygonModelType]: any } = {
   fill: FillModel,
   line: LineModel,

packages/layers/src/polygon/models/ocean.ts

@@ -24,7 +24,7 @@ export default class OceanModel extends BaseModel {
       watercolor = '#6D99A8',
       watercolor2 = '#0F121C',
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-   
+
     return {
       u_texture1: this.texture1,
       u_texture2: this.texture2,
@@ -43,25 +43,22 @@ export default class OceanModel extends BaseModel {
 
   public async initModels(): Promise<IModel[]> {
     this.loadTexture();
-      return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-      maskInside = true,
+    const model = await this.layer.buildLayerModel({
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
+      moduleName: 'polygonOcean',
-   const model = await this.layer
+      vertexShader: ocean_vert,
-      .buildLayerModel({
+      fragmentShader: ocean_frag,
-        moduleName: 'polygonOcean',
+      triangulation: polygonTriangulation,
-        vertexShader: ocean_vert,
+      primitive: gl.TRIANGLES,
-        fragmentShader: ocean_frag,
+      depth: { enable: false },
-        triangulation: polygonTriangulation,
+      stencil: getMask(mask, maskInside),
-        primitive: gl.TRIANGLES,
+    });
-        depth: { enable: false },
+    return [model];
-        stencil: getMask(mask, maskInside),
-      })
-     return [model]
   }
 
   public clearModels() {
@@ -94,7 +91,10 @@ export default class OceanModel extends BaseModel {
           vertex: number[],
           attributeIdx: number,
         ) => {
-          const v = (feature.version === Version['GAODE2.x'] ? feature.originCoordinates[0][attributeIdx] : vertex)
+          const v =
+            feature.version === Version['GAODE2.x']
+              ? feature.originCoordinates[0][attributeIdx]
+              : vertex;
           const [lng, lat] = v;
           return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
         },

packages/layers/src/polygon/models/water.ts

@@ -17,10 +17,8 @@ import water_vert from '../shaders/water/polygon_water_vert.glsl';
 export default class WaterModel extends BaseModel {
   private texture: ITexture2D;
   public getUninforms() {
-    const {
+    const { opacity = 1, speed = 0.5 } =
-      opacity = 1,
+      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-      speed = 0.5,
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
     return {
       u_texture: this.texture,
       u_speed: speed,
@@ -36,25 +34,22 @@ export default class WaterModel extends BaseModel {
 
   public async initModels(): Promise<IModel[]> {
     this.loadTexture();
-      return await this.buildModels();
+    return this.buildModels();
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-      maskInside = true,
+    const model = await this.layer.buildLayerModel({
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
+      moduleName: 'polygonWater',
-   const model = await this.layer
+      vertexShader: water_vert,
-      .buildLayerModel({
+      fragmentShader: water_frag,
-        moduleName: 'polygonWater',
+      triangulation: polygonTriangulation,
-        vertexShader: water_vert,
+      primitive: gl.TRIANGLES,
-        fragmentShader: water_frag,
+      depth: { enable: false },
-        triangulation: polygonTriangulation,
+      stencil: getMask(mask, maskInside),
-        primitive: gl.TRIANGLES,
+    });
-        depth: { enable: false },
+    return [model];
-        stencil: getMask(mask, maskInside),
-      })
-     return [model]
   }
 
   public clearModels() {
@@ -83,9 +78,12 @@ export default class WaterModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number
+          attributeIdx: number,
         ) => {
-          const v = (feature.version === Version['GAODE2.x'] ? feature.originCoordinates[0][attributeIdx] : vertex)
+          const v =
+            feature.version === Version['GAODE2.x']
+              ? feature.originCoordinates[0][attributeIdx]
+              : vertex;
           const [lng, lat] = v;
           return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
         },
@@ -94,9 +92,8 @@ export default class WaterModel extends BaseModel {
   }
 
   private loadTexture() {
-    const {
+    const { waterTexture } =
-      waterTexture,
+      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
 
     const { createTexture2D } = this.rendererService;
     this.texture = createTexture2D({

packages/layers/src/raster/buffers/triangulation.ts

@@ -2,7 +2,7 @@ import { IParseDataItem } from '@antv/l7-core';
 // @ts-ignore
 import Martini from '@mapbox/martini';
 export function RasterTriangulation(parserData: IParseDataItem) {
-  const { data,width, height } = parserData;
+  const { data, width, height } = parserData;
   const maxlength = Math.max(width, height);
   const gridSize = Math.pow(2, Math.ceil(Math.log2(maxlength))) + 1;
   const terrain = new Float32Array(gridSize * gridSize);

packages/layers/src/raster/models/index.ts

@@ -1,13 +1,17 @@
 import RasterModel from './raster';
 import RasterRgbModel from './rasterRgb';
 import RasterTerrainRGB from './rasterTerrainRgb';
-export type RasterModelType = 'raster' | 'raster3d' | 'rasterRgb' | 'rasterTerrainRgb';
+export type RasterModelType =
+  | 'raster'
+  | 'raster3d'
+  | 'rasterRgb'
+  | 'rasterTerrainRgb';
 
 const RasterModels: { [key in RasterModelType]: any } = {
   raster: RasterModel,
   rasterRgb: RasterRgbModel,
   raster3d: RasterModel,
-  rasterTerrainRgb: RasterTerrainRGB
+  rasterTerrainRgb: RasterTerrainRGB,
 };
 
 export default RasterModels;

packages/layers/src/raster/models/raster.ts

@@ -5,7 +5,7 @@ import {
   IModel,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask,getDefaultDomain } from '@antv/l7-utils';
+import { getDefaultDomain, getMask } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IRasterLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
@@ -23,8 +23,11 @@ export default class RasterModel extends BaseModel {
       domain,
       rampColors,
     } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-     const newdomain = domain ||getDefaultDomain(rampColors)
+    const newdomain = domain || getDefaultDomain(rampColors);
-    this.colorTexture =  this.layer.textureService.getColorTexture(rampColors,newdomain);
+    this.colorTexture = this.layer.textureService.getColorTexture(
+      rampColors,
+      newdomain,
+    );
     return {
       u_opacity: opacity || 1,
       u_texture: this.texture,
@@ -37,35 +40,33 @@ export default class RasterModel extends BaseModel {
   }
 
   private async getRasterData(parserDataItem: any) {
-    if(Array.isArray(parserDataItem.data)) {
+    if (Array.isArray(parserDataItem.data)) {
       // 直接传入波段数据
       return {
         data: parserDataItem.data,
         width: parserDataItem.width,
         height: parserDataItem.height,
-      }
+      };
     } else {
       // 多波段形式、需要进行处理
       const { rasterData, width, height } = await parserDataItem.data;
       return {
         data: Array.from(rasterData),
         width,
-        height
+        height,
-      }
+      };
     }
   }
 
   public async initModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
     const source = this.layer.getSource();
     const { createTexture2D } = this.rendererService;
     const parserDataItem = source.data.dataArray[0];
 
-    const {data, width, height} = await this.getRasterData(parserDataItem);
+    const { data, width, height } = await this.getRasterData(parserDataItem);
-    
+
     this.texture = createTexture2D({
       data,
       width,
@@ -74,22 +75,21 @@ export default class RasterModel extends BaseModel {
       type: gl.FLOAT,
       // aniso: 4,
     });
-  
+
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'rasterImageData',
-        moduleName: 'rasterImageData',
+      vertexShader: rasterVert,
-        vertexShader: rasterVert,
+      fragmentShader: rasterFrag,
-        fragmentShader: rasterFrag,
+      triangulation: RasterImageTriangulation,
-        triangulation: RasterImageTriangulation,
+      primitive: gl.TRIANGLES,
-        primitive: gl.TRIANGLES,
+      depth: { enable: false },
-        depth: { enable: false },
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    return await this.initModels();
+    return this.initModels();
   }
 
   public clearModels(): void {
@@ -121,5 +121,4 @@ export default class RasterModel extends BaseModel {
       },
     });
   }
-  
 }

packages/layers/src/raster/models/rasterRgb.ts

@@ -9,18 +9,16 @@ import { getMask } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IRasterLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
-import rasterFrag from '../shaders/raster_rgb_frag.glsl';
 import rasterVert from '../shaders/raster_2d_vert.glsl';
+import rasterFrag from '../shaders/raster_rgb_frag.glsl';
 export default class RasterModel extends BaseModel {
   protected texture: ITexture2D;
   protected dataOption: any = {};
 
   public getUninforms() {
-    const {
+    const { opacity = 1, noDataValue = 0 } =
-      opacity = 1,
+      this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-      noDataValue = 0,
+    const { rMinMax, gMinMax, bMinMax } = this.dataOption;
-    } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-    const {rMinMax,gMinMax,bMinMax} = this.dataOption;
     return {
       u_opacity: opacity || 1,
       u_texture: this.texture,
@@ -28,48 +26,44 @@ export default class RasterModel extends BaseModel {
       u_rminmax: rMinMax,
       u_gminmax: gMinMax,
       u_bminmax: bMinMax,
-  
     };
   }
 
   private async getRasterData(parserDataItem: any) {
-     
+    if (Array.isArray(parserDataItem.data)) {
-    if(Array.isArray(parserDataItem.data)) {
+      const { data, ...rescfg } = parserDataItem;
-      const {data,...rescfg} = parserDataItem;
       this.dataOption = rescfg;
       return {
         data,
-        ...rescfg
+        ...rescfg,
-      }
+      };
     }
-     
+
-    const { rasterData,...rest  } = await parserDataItem.data;
+    const { rasterData, ...rest } = await parserDataItem.data;
     this.dataOption = rest;
-    if(Array.isArray(rasterData)) {
+    if (Array.isArray(rasterData)) {
       // 直接传入波段数据
       return {
         data: rasterData,
-        ...rest
+        ...rest,
-      }
+      };
     } else {
       // 多波段形式、需要进行处理
       // 支持彩色栅格（多通道）
       return {
         data: Array.from(rasterData),
-        ...rest
+        ...rest,
-      }
+      };
     }
   }
 
-   public async initModels(): Promise<IModel[]> {
+  public async initModels(): Promise<IModel[]> {
-    const {
+    const { mask = false, maskInside = true } =
-      mask = false,
+      this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
     const source = this.layer.getSource();
     const { createTexture2D } = this.rendererService;
     const parserDataItem = source.data.dataArray[0];
-    const {data, width, height} = await this.getRasterData(parserDataItem);
+    const { data, width, height } = await this.getRasterData(parserDataItem);
     this.texture = createTexture2D({
       // @ts-ignore
       data,
@@ -79,21 +73,20 @@ export default class RasterModel extends BaseModel {
       type: gl.FLOAT,
     });
 
-   const model = await this.layer
+    const model = await this.layer.buildLayerModel({
-      .buildLayerModel({
+      moduleName: 'rasterImageDataRGBA',
-        moduleName: 'rasterImageDataRGBA',
+      vertexShader: rasterVert,
-        vertexShader: rasterVert,
+      fragmentShader: rasterFrag,
-        fragmentShader: rasterFrag,
+      triangulation: RasterImageTriangulation,
-        triangulation: RasterImageTriangulation,
+      primitive: gl.TRIANGLES,
-        primitive: gl.TRIANGLES,
+      depth: { enable: false },
-        depth: { enable: false },
+      stencil: getMask(mask, maskInside),
-        stencil: getMask(mask, maskInside),
+    });
-      })
+    return [model];
-     return [model]
   }
 
- public async buildModels():Promise<IModel[]> {
+  public async buildModels(): Promise<IModel[]> {
-    return await this.initModels();
+    return this.initModels();
   }
 
   public clearModels(): void {

packages/layers/src/raster/models/rasterTerrainRgb.ts

@@ -1,105 +1,108 @@
 import {
-    AttributeType,
+  AttributeType,
-    gl,
+  gl,
-    IEncodeFeature,
+  IEncodeFeature,
-    IModel,
+  IModel,
-    IModelUniform,
+  IModelUniform,
-    ITexture2D,
+  ITexture2D,
-  } from '@antv/l7-core';
+} from '@antv/l7-core';
-  import { getMask,getDefaultDomain } from '@antv/l7-utils';
+import { getDefaultDomain, getMask } from '@antv/l7-utils';
-  import BaseModel from '../../core/BaseModel';
+import BaseModel from '../../core/BaseModel';
-  import { IRasterLayerStyleOptions } from '../../core/interface';
+import { IRasterLayerStyleOptions } from '../../core/interface';
-  import { RasterImageTriangulation } from '../../core/triangulation';
+import { RasterImageTriangulation } from '../../core/triangulation';
-  import Raster_terrainFrag from '../shaders/raster_terrain_rgb_frag.glsl';
+import Raster_terrainFrag from '../shaders/raster_terrain_rgb_frag.glsl';
-  import Raster_terrainVert from '../shaders/rater_terrain_rgb_vert.glsl';
+import Raster_terrainVert from '../shaders/rater_terrain_rgb_vert.glsl';
-  
+
-  export default class RasterTerrainRGB extends BaseModel {
+export default class RasterTerrainRGB extends BaseModel {
-    protected texture: ITexture2D;
+  protected texture: ITexture2D;
-    public getUninforms(): IModelUniform {
+  public getUninforms(): IModelUniform {
-      const {
+    const {
-        opacity,
+      opacity,
-        clampLow = true,
+      clampLow = true,
-        clampHigh = true,
+      clampHigh = true,
-        noDataValue = -9999999,
+      noDataValue = -9999999,
-        domain,
+      domain,
+      rampColors,
+      colorTexture,
+    } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
+    const newdomain = domain || getDefaultDomain(rampColors);
+    let texture: ITexture2D | undefined = colorTexture;
+    if (!colorTexture) {
+      texture = this.layer.textureService.getColorTexture(
         rampColors,
-        colorTexture
+        newdomain,
-      } = this.layer.getLayerConfig() as  IRasterLayerStyleOptions;
+      ) as ITexture2D;
-      const newdomain = domain ||getDefaultDomain(rampColors)
+    } else {
-      let texture:ITexture2D | undefined = colorTexture;
+      this.layer.textureService.setColorTexture(
-      if(!colorTexture) {
+        colorTexture,
-        texture = this.layer.textureService.getColorTexture(rampColors,newdomain) as ITexture2D;
+        rampColors,
-      } else {
+        newdomain,
-        this.layer.textureService.setColorTexture(colorTexture,rampColors,newdomain)
+      );
-      }
-      return {
-        u_opacity: opacity || 1,
-        u_texture: this.texture,
-        u_domain: newdomain,
-        u_clampLow: clampLow,
-        u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
-        u_noDataValue: noDataValue,
-        u_colorTexture: texture!,
-      };
-    }
-    public async initModels(): Promise<IModel[]> {
-      const {
-        mask = false,
-        maskInside = true,
-      } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-  
-      const source = this.layer.getSource();
-      const { createTexture2D } = this.rendererService;
-      const imageData = await source.data.images;
-      this.texture = createTexture2D({
-        data: imageData[0],
-        width: imageData[0].width,
-        height: imageData[0].height,
-      });
-  
-      const model = await this.layer
-        .buildLayerModel({
-          moduleName: 'RasterTileDataImage',
-          vertexShader: Raster_terrainVert,
-          fragmentShader: Raster_terrainFrag,
-          triangulation: RasterImageTriangulation,
-          primitive: gl.TRIANGLES,
-          depth: { enable: false },
-          blend: this.getBlend(),
-          stencil: getMask(mask, maskInside),
-        })
-      return [model]
-    }
-  
-    public clearModels(): void {
-      this.texture?.destroy();
-    }
-  
-    public async buildModels(): Promise<IModel[]> {
-      return await this.initModels();
-    }
-  
-    protected registerBuiltinAttributes() {
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'uv',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Uv',
-          buffer: {
-            usage: gl.DYNAMIC_DRAW,
-            data: [],
-            type: gl.FLOAT,
-          },
-          size: 2,
-          update: (
-            feature: IEncodeFeature,
-            featureIdx: number,
-            vertex: number[],
-          ) => {
-            return [vertex[3], vertex[4]];
-          },
-        },
-      });
     }
+    return {
+      u_opacity: opacity || 1,
+      u_texture: this.texture,
+      u_domain: newdomain,
+      u_clampLow: clampLow,
+      u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
+      u_noDataValue: noDataValue,
+      u_colorTexture: texture!,
+    };
   }
-  
+  public async initModels(): Promise<IModel[]> {
+    const { mask = false, maskInside = true } =
+      this.layer.getLayerConfig() as IRasterLayerStyleOptions;
+
+    const source = this.layer.getSource();
+    const { createTexture2D } = this.rendererService;
+    const imageData = await source.data.images;
+    this.texture = createTexture2D({
+      data: imageData[0],
+      width: imageData[0].width,
+      height: imageData[0].height,
+    });
+
+    const model = await this.layer.buildLayerModel({
+      moduleName: 'RasterTileDataImage',
+      vertexShader: Raster_terrainVert,
+      fragmentShader: Raster_terrainFrag,
+      triangulation: RasterImageTriangulation,
+      primitive: gl.TRIANGLES,
+      depth: { enable: false },
+      blend: this.getBlend(),
+      stencil: getMask(mask, maskInside),
+    });
+    return [model];
+  }
+
+  public clearModels(): void {
+    this.texture?.destroy();
+  }
+
+  public async buildModels(): Promise<IModel[]> {
+    return this.initModels();
+  }
+
+  protected registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 2,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+        ) => {
+          return [vertex[3], vertex[4]];
+        },
+      },
+    });
+  }
+}

packages/layers/src/tile/interaction/getRasterData.ts

@@ -1,81 +1,78 @@
-import {
+import { IMapService, IRendererService } from '@antv/l7-core';
-    IMapService,
-    IRendererService
-  } from '@antv/l7-core';
 import { DOM, SourceTile } from '@antv/l7-utils';
 
 export function readRasterValue(
-    tile: SourceTile,
+  tile: SourceTile,
-    mapService: IMapService,
+  mapService: IMapService,
-    x: number,
+  x: number,
-    y: number,
+  y: number,
+) {
+  const bbox = tile?.bboxPolygon?.bbox || [0, 0, 10, -10];
+
+  const [minLng = 0, minLat = 0, maxLng = 10, maxLat = -10] = bbox;
+
+  const tileXY = mapService.lngLatToContainer([minLng, minLat]);
+  const tileMaxXY = mapService.lngLatToContainer([maxLng, maxLat]);
+
+  const tilePixelWidth = tileMaxXY.x - tileXY.x;
+  const tilePixelHeight = tileXY.y - tileMaxXY.y;
+  const pos = [
+    (x - tileXY.x) / tilePixelWidth, // x
+    (y - tileMaxXY.y) / tilePixelHeight, // y
+  ];
+
+  const tileWidth = tile?.data?.width || 1;
+  const tileHeight = tile?.data?.height || 1;
+
+  const indexX = Math.floor(pos[0] * tileWidth);
+  const indexY = Math.floor(pos[1] * tileHeight);
+  const index = Math.max(0, indexY - 1) * tileWidth + indexX;
+
+  const data = tile?.data?.data[index];
+
+  return data;
+}
+
+export function readPixel(
+  x: number,
+  y: number,
+  rendererService: IRendererService,
+) {
+  const { readPixels, getContainer } = rendererService;
+  const xInDevicePixel = x * DOM.DPR;
+  const yInDevicePixel = y * DOM.DPR;
+  let { width, height } = getContainerSize(
+    getContainer() as HTMLCanvasElement | HTMLElement,
+  );
+  width *= DOM.DPR;
+  height *= DOM.DPR;
+  if (
+    xInDevicePixel > width - 1 * DOM.DPR ||
+    xInDevicePixel < 0 ||
+    yInDevicePixel > height - 1 * DOM.DPR ||
+    yInDevicePixel < 0
   ) {
-    const bbox = tile?.bboxPolygon?.bbox || [0, 0, 10, -10];
+    return false;
-  
-    const [minLng = 0, minLat = 0, maxLng = 10, maxLat = -10] = bbox;
-  
-    const tileXY = mapService.lngLatToContainer([minLng, minLat]);
-    const tileMaxXY = mapService.lngLatToContainer([maxLng, maxLat]);
-  
-    const tilePixelWidth = tileMaxXY.x - tileXY.x;
-    const tilePixelHeight = tileXY.y - tileMaxXY.y;
-    const pos = [
-      (x - tileXY.x) / tilePixelWidth, // x
-      (y - tileMaxXY.y) / tilePixelHeight, // y
-    ];
-  
-    const tileWidth = tile?.data?.width || 1;
-    const tileHeight = tile?.data?.height || 1;
-  
-    const indexX = Math.floor(pos[0] * tileWidth);
-    const indexY = Math.floor(pos[1] * tileHeight);
-    const index = Math.max(0, indexY - 1) * tileWidth + indexX;
-  
-    const data = tile?.data?.data[index];
-  
-    return data;
   }
-  
+
-  export function readPixel(
+  const pickedColors = readPixels({
-    x: number,
+    x: Math.floor(xInDevicePixel),
-    y: number,
+    // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
-    rendererService: IRendererService,
+    y: Math.floor(height - (y + 1) * DOM.DPR),
-  ) {
+    width: 1,
-    const { readPixels, getContainer } = rendererService;
+    height: 1,
-    const xInDevicePixel = x * DOM.DPR;
+    data: new Uint8Array(1 * 1 * 4),
-    const yInDevicePixel = y * DOM.DPR;
+  });
-    let { width, height } = getContainerSize(
+  return pickedColors;
-      getContainer() as HTMLCanvasElement | HTMLElement,
+}
-    );
+
-    width *= DOM.DPR;
+function getContainerSize(container: HTMLCanvasElement | HTMLElement) {
-    height *= DOM.DPR;
+  if ((container as HTMLCanvasElement).getContext) {
-    if (
+    return {
-      xInDevicePixel > width - 1 * DOM.DPR ||
+      width: (container as HTMLCanvasElement).width / DOM.DPR,
-      xInDevicePixel < 0 ||
+      height: (container as HTMLCanvasElement).height / DOM.DPR,
-      yInDevicePixel > height - 1 * DOM.DPR ||
+    };
-      yInDevicePixel < 0
+  } else {
-    ) {
+    return container.getBoundingClientRect();
-      return false;
-    }
-  
-    const pickedColors = readPixels({
-      x: Math.floor(xInDevicePixel),
-      // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
-      y: Math.floor(height - (y + 1) * DOM.DPR),
-      width: 1,
-      height: 1,
-      data: new Uint8Array(1 * 1 * 4),
-    });
-    return pickedColors;
   }
-  
+}
-  function getContainerSize(container: HTMLCanvasElement | HTMLElement) {
-    if ((container as HTMLCanvasElement).getContext) {
-      return {
-        width: (container as HTMLCanvasElement).width / DOM.DPR,
-        height: (container as HTMLCanvasElement).height / DOM.DPR,
-      };
-    } else {
-      return container.getBoundingClientRect();
-    }
-  }

packages/layers/src/tile/interaction/utils.ts

@@ -1,64 +1,67 @@
-import {
+import { ILayer } from '@antv/l7-core';
-    ILayer,
-  } from '@antv/l7-core';
 import { decodePickingColor } from '@antv/l7-utils';
 
 export function clearPickState(layers: ILayer[]) {
-    layers
+  layers
-      .filter((layer) => layer.inited && layer.isVisible())
+    .filter((layer) => layer.inited && layer.isVisible())
-      .filter((layer) => layer.getCurrentSelectedId() !== null)
+    .filter((layer) => layer.getCurrentSelectedId() !== null)
-      .map((layer) => {
+    .map((layer) => {
-        selectFeature(layer, new Uint8Array([0, 0, 0, 0]));
+      selectFeature(layer, new Uint8Array([0, 0, 0, 0]));
-        layer.setCurrentSelectedId(null);
+      layer.setCurrentSelectedId(null);
-      });
+    });
 }
 
-export function setSelect(layers: ILayer[], pickedColors: any, renderList: ILayer[]) {
+export function setSelect(
-    const selectedId = decodePickingColor(pickedColors);
+  layers: ILayer[],
-    let pickColor
+  pickedColors: any,
-    layers.map((layer) => {
+  renderList: ILayer[],
-      if (
+) {
-        layer.getCurrentSelectedId() === null ||
+  const selectedId = decodePickingColor(pickedColors);
-        selectedId !== layer.getCurrentSelectedId()
+  let pickColor;
-      ) {
+  layers.map((layer) => {
-        selectFeature(layer, pickedColors);
+    if (
-        layer.setCurrentSelectedId(selectedId);
+      layer.getCurrentSelectedId() === null ||
-        pickColor = pickedColors;
+      selectedId !== layer.getCurrentSelectedId()
-      } else {
+    ) {
-        selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
+      selectFeature(layer, pickedColors);
-        layer.setCurrentSelectedId(null);
+      layer.setCurrentSelectedId(selectedId);
-        pickColor = null;
+      pickColor = pickedColors;
-      }
+    } else {
+      selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
+      layer.setCurrentSelectedId(null);
+      pickColor = null;
+    }
+  });
+  // unselect normal layer
+  renderList
+    .filter(
+      (layer) => layer.inited && layer.isVisible() && layer.needPick('click'),
+    )
+    .filter((layer) => layer.getCurrentSelectedId() !== null)
+    .map((layer) => {
+      selectFeature(layer, new Uint8Array([0, 0, 0, 0]));
+      layer.setCurrentSelectedId(null);
     });
-    // unselect normal layer
+  return pickColor;
-    renderList
-      .filter(
-        (layer) =>
-          layer.inited &&
-          layer.isVisible() &&
-          layer.needPick('click'),
-      )
-      .filter((layer) => layer.getCurrentSelectedId() !== null)
-      .map((layer) => {
-        selectFeature(layer, new Uint8Array([0, 0, 0, 0]));
-        layer.setCurrentSelectedId(null);
-      });
-    return pickColor;
 }
 
 export function setHighlight(layers: ILayer[], pickedColors: any) {
-    const pickId = decodePickingColor(pickedColors);
+  const pickId = decodePickingColor(pickedColors);
-    layers.filter((layer) => layer.inited && layer.isVisible())
+  layers
+    .filter((layer) => layer.inited && layer.isVisible())
     // @ts-ignore
     .filter((layer) => layer.getPickID() !== pickId)
     .map((layer) => {
-        // @ts-ignore
+      // @ts-ignore
-        layer.setPickID(pickId);
+      layer.setPickID(pickId);
-        layer.hooks.beforeHighlight.call(pickedColors);
+      layer.hooks.beforeHighlight.call(pickedColors);
     });
 }
 
-export function setPickState(layers: ILayer[], pickColors: { select: any, active: any }) {
+export function setPickState(
+  layers: ILayer[],
+  pickColors: { select: any; active: any },
+) {
   if (pickColors.select) {
     layers.map((layer) => {
       selectFeature(layer, pickColors.select);
@@ -74,24 +77,27 @@ export function setPickState(layers: ILayer[], pickColors: { select: any, active
   }
 }
 
-export function selectFeature(layer: ILayer, pickedColors: Uint8Array | undefined) {
+export function selectFeature(
-    // @ts-ignore
+  layer: ILayer,
-    const [r, g, b] = pickedColors;
+  pickedColors: Uint8Array | undefined,
-    layer.hooks.beforeSelect.call([r, g, b]);
+) {
+  // @ts-ignore
+  const [r, g, b] = pickedColors;
+  layer.hooks.beforeSelect.call([r, g, b]);
 }
 
 export function setFeatureSelect(color: any, layers: ILayer[]) {
-    const id = decodePickingColor(color);
+  const id = decodePickingColor(color);
-    layers.map((layer) => {
+  layers.map((layer) => {
-        selectFeature(layer, color);
+    selectFeature(layer, color);
-        layer.setCurrentSelectedId(id);
+    layer.setCurrentSelectedId(id);
-      });
+  });
 }
 
 export function setFeatureActive(color: any, layers: ILayer[]) {
-    const id = decodePickingColor(color);
+  const id = decodePickingColor(color);
-    layers.map((layer) => {
+  layers.map((layer) => {
-        layer.hooks.beforeHighlight.call(color);
+    layer.hooks.beforeHighlight.call(color);
-        layer.setCurrentPickId(id);
+    layer.setCurrentPickId(id);
-    });
+  });
-}
+}

packages/layers/src/tile/manager/base.ts

@@ -1,10 +1,10 @@
 import {
-  ILayer,
-  IRendererService,
-  IMapService,
-  ISubLayerInitOptions,
   createLayerContainer,
+  ILayer,
   ILayerService,
+  IMapService,
+  IRendererService,
+  ISubLayerInitOptions,
 } from '@antv/l7-core';
 import { SourceTile } from '@antv/l7-utils';
 import { Container } from 'inversify';
@@ -22,16 +22,18 @@ export class Base {
   private tileLayerCache: Map<string, ILayer[]> = new Map();
 
   private async initTileLayers(layers: ILayer[], tile: SourceTile) {
-   return Promise.all(layers.map(async (layer) => {
+    return Promise.all(
-      const container = createLayerContainer(
+      layers.map(async (layer) => {
-        this.parent.sceneContainer as Container,
+        const container = createLayerContainer(
-      );
+          this.parent.sceneContainer as Container,
-      layer.setContainer(container, this.parent.sceneContainer as Container);
+        );
-      await layer.init();
+        layer.setContainer(container, this.parent.sceneContainer as Container);
-      this.addChild(layer);
+        await layer.init();
-      tile.layerLoad();
+        this.addChild(layer);
-      this.render()
+        tile.layerLoad();
-    }));
+        this.render();
+      }),
+    );
   }
 
   public render() {
@@ -46,10 +48,11 @@ export class Base {
   public async addTile(tile: SourceTile) {
     // oldTile 存在的时候暂时直接结束
     // TODO：合并不存在的时候
-    if (this.hasTile(tile))
+    if (this.hasTile(tile)) {
       return {
         layers: [],
       };
+    }
     // 存储当前 tile
     this.tileCache.set(tile.key, tile);
 
@@ -68,7 +71,6 @@ export class Base {
     //   updateLayersConfig(this.getLayers(t),'visible',visible)
     // })
 
-
     return layerCollections;
   }
 
@@ -101,7 +103,9 @@ export class Base {
   }
 
   public getLayers(tile: SourceTile) {
-    if (!tile) return [];
+    if (!tile) {
+      return [];
+    }
     return this.tileLayerCache.get(tile.key) || [];
   }
 
@@ -121,7 +125,6 @@ export class Base {
   }
 
   public initTileFactory() {
- 
     // this.tileFactory = new TileFactory({
     //   parent: this.parent,
     //   mapService: this.mapService,
@@ -144,13 +147,12 @@ export class Base {
 
   public updateTileVisible(tile: SourceTile, layerService: ILayerService) {
     const layers = this.getLayers(tile);
-    if (layers.length === 0) return;
+    if (layers.length === 0) {
+      return;
+    }
     if (tile.isVisible) {
       // 如果可见直接进行渲染，父级发
       updateLayersConfig(layers, 'visible', tile.isVisible);
-
-
-
     } else {
       // 如果不可见，放大，等到子瓦片渲染完成，缩小：父级渲染成功
       // console.log('updateTileVisible',`${tile.x}_${tile.y}_${tile.z}`,tile.isVisible)
@@ -184,14 +186,18 @@ export class Base {
   }
 
   public isTileLoaded(tile: SourceTile) {
-    if (tile.isLoad) return true;
+    if (tile.isLoad) {
+      return true;
+    }
     const isLoad = this.getLayers(tile).length === tile.loadedLayers;
     tile.isLoad = isLoad;
     return isLoad;
   }
 
   public isTileChildLoaded(tile: SourceTile) {
-    if (tile.isChildLoad) return true;
+    if (tile.isChildLoad) {
+      return true;
+    }
     const children = tile.children;
     const isLoad =
       children.filter((child) => this.isTileLoaded(child)).length ===

packages/layers/src/tile/service/TileLayerService.ts

@@ -1,11 +1,17 @@
-import { ILayer, ILayerService, ILngLat, IRendererService, ITile } from '@antv/l7-core';
+import {
+  ILayer,
+  ILayerService,
+  ILngLat,
+  IRendererService,
+  ITile,
+} from '@antv/l7-core';
 import { SourceTile } from '@antv/l7-utils';
 import 'reflect-metadata';
 
-interface TileLayerServiceOptions {
+interface ITileLayerServiceOptions {
   rendererService: IRendererService;
-  layerService: ILayerService
+  layerService: ILayerService;
-  parent:ILayer;
+  parent: ILayer;
 }
 export class TileLayerService {
   /**
@@ -16,42 +22,47 @@ export class TileLayerService {
   private layerService: ILayerService;
   private parent: ILayer;
 
-
+  private layerTiles: ITile[] = [];
-  private _tiles: ITile[] = [];
+  constructor({
-  constructor({ rendererService,layerService, parent }: TileLayerServiceOptions) {
+    rendererService,
+    layerService,
+    parent,
+  }: ITileLayerServiceOptions) {
     this.rendererService = rendererService;
-    this.layerService =layerService;
+    this.layerService = layerService;
     this.parent = parent;
   }
   get tiles(): ITile[] {
-    return this._tiles;
+    return this.layerTiles;
   }
 
-  hasTile(tileKey: string): boolean {
+  public hasTile(tileKey: string): boolean {
-    return this._tiles.some((tile) => tile.key === tileKey);
+    return this.layerTiles.some((tile) => tile.key === tileKey);
   }
 
-  addTile(tile: ITile) {
+  public addTile(tile: ITile) {
-    this._tiles.push(tile);
+    this.layerTiles.push(tile);
   }
 
-  getTile(tileKey: string): ITile | undefined {
+  public getTile(tileKey: string): ITile | undefined {
-    return this._tiles.find((tile) => tile.key === tileKey);
+    return this.layerTiles.find((tile) => tile.key === tileKey);
   }
-  
+
-  getVisibleTileBylngLat(lngLat: ILngLat): ITile | undefined {
+  public getVisibleTileBylngLat(lngLat: ILngLat): ITile | undefined {
     // 加载完成 & 可见 & 鼠标选中
-    return this._tiles.find(
+    return this.layerTiles.find(
       (tile) => tile.isLoaded && tile.visible && tile.lnglatInBounds(lngLat),
     );
   }
 
-  removeTile(tileKey: string) {
+  public removeTile(tileKey: string) {
-    const index = this._tiles.findIndex((tile) => tile.key === tileKey);
+    const index = this.layerTiles.findIndex((t) => t.key === tileKey);
-    const tile = this._tiles.splice(index, 1);
+    const tile = this.layerTiles.splice(index, 1);
-    tile[0] && tile[0].destroy();
+    if (tile[0]) {
+      tile[0].destroy();
+    }
   }
-  updateTileVisible(sourceTile: SourceTile) {
+  public updateTileVisible(sourceTile: SourceTile) {
     const tile = this.getTile(sourceTile.key);
     // if(sourceTile.isVisible) {
     //   // 不可见 => 可见 兄弟节点加载完成
@@ -61,7 +72,7 @@ export class TileLayerService {
     //   } else {
     //     tile?.updateVisible(true);
     //   }
-        
+
     // } else {
     //    // 可见 => 不可见 兄弟节点加载完成
     //    if(sourceTile.parent) {
@@ -71,62 +82,62 @@ export class TileLayerService {
     //     tile?.updateVisible(false);
     //   }
     // }
- 
-    tile?.updateVisible(sourceTile.isVisible);
 
+    tile?.updateVisible(sourceTile.isVisible);
   }
   public isParentLoaded(sourceTile: SourceTile): boolean {
     const parentTile = sourceTile.parent;
-    if(!parentTile) {
+    if (!parentTile) {
-      return true
+      return true;
     }
-    const tile = this.getTile(parentTile?.key)
+    const tile = this.getTile(parentTile?.key);
-    if(tile?.isLoaded) { // 递归父级
+    if (tile?.isLoaded) {
-      return true
+      // 递归父级
+      return true;
     }
- 
-    return false
 
+    return false;
   }
 
-  public isChildrenLoaded(sourceTile: SourceTile):boolean {
+  public isChildrenLoaded(sourceTile: SourceTile): boolean {
     const childrenTile = sourceTile?.children;
-    if(childrenTile.length === 0) {
+    if (childrenTile.length === 0) {
-      return true
+      return true;
     }
-   return childrenTile.some((tile:SourceTile)=>{
+    return childrenTile.some((tile: SourceTile) => {
-      const tileLayer = this.getTile(tile?.key)
+      const tileLayer = this.getTile(tile?.key);
-      return tileLayer?.isLoaded === false
+      return tileLayer?.isLoaded === false;
-    })
+    });
   }
-  async render() {
+  public async render() {
     const layers = this.getRenderLayers();
-    layers.map(async layer => {
+    layers.map(async (layer) => {
       await this.layerService.renderLayer(layer);
-    })    
+    });
   }
 
-  getRenderLayers() {
+  public getRenderLayers() {
-    const tileList = this._tiles.filter((t)=>t.visible && t.isLoaded);
+    const tileList = this.layerTiles.filter(
+      (t: ITile) => t.visible && t.isLoaded,
+    );
     const layers: ILayer[] = [];
-    tileList.map(tile => layers.push(...tile.getLayers()))
+    tileList.map((tile: ITile) => layers.push(...tile.getLayers()));
     return layers;
   }
 
-  getLayers(){
+  public getLayers() {
-    const tileList = this._tiles.filter((t)=>t.isLoaded);
+    const tileList = this.layerTiles.filter((t: ITile) => t.isLoaded);
     const layers: ILayer[] = [];
-    tileList.map(tile => layers.push(...tile.getLayers()))
+    tileList.map((tile) => layers.push(...tile.getLayers()));
     return layers;
   }
 
-  getTiles() {
+  public getTiles() {
-    return this._tiles;
+    return this.layerTiles;
   }
 
-
+  public destroy() {
-  destroy() {
+    this.layerTiles.forEach((t: ITile) => t.destroy());
-    this._tiles.forEach((t) => t.destroy());
     this.tileResource.clear();
   }
 }

packages/layers/src/tile/service/TilePickService.ts

@@ -124,10 +124,10 @@ export class TilePickService implements ITilePickService {
     // 提取当前可见瓦片
     const tiles = this.tileLayerService
       .getTiles()
-      .filter((tile) => tile.visible);
+      .filter((tile: ITile) => tile.visible);
     // 提取当前可见瓦片中匹配 ID 的 feature 列表
     const features: any[] = [];
-    tiles.forEach((tile) => {
+    tiles.forEach((tile: ITile) => {
       features.push(...tile.getFeatureById(pickedFeatureIdx));
     });
 

packages/layers/src/tile/service/TileSourceService.ts

@@ -11,6 +11,7 @@ export class TileSourceService {
     const properties = features[0];
     features.map((feature) => {
       const polygon = turf.polygon(feature.coordinates);
+      // tslint:disable-next-line: prefer-conditional-expression
       if (p === null) {
         p = polygon;
       } else {

packages/layers/src/tile/style/constants.ts

@@ -1,20 +1,19 @@
 // TileLayer 需要代理的子图层的方法
 // 一般都是在 BaseLayer 上的方法
 export const ProxyFuncs = [
-    /**
+  /**
-     * 1. 需要作用到所属子图层才会生效的方法
+   * 1. 需要作用到所属子图层才会生效的方法
-     * 2. 不需要主动重新创建 model 的方法
+   * 2. 不需要主动重新创建 model 的方法
-     */
+   */
-    'shape',
+  'shape',
-    'color',
+  'color',
-    'size',
+  'size',
-    'style',
+  'style',
-    'animate',
+  'animate',
-    'filter',
+  'filter',
-    'rotate',
+  'rotate',
-    'scale',
+  'scale',
-    'setBlend',
+  'setBlend',
-    'setSelect',
+  'setSelect',
-    'setActive',
+  'setActive',
-]
+];
-

packages/layers/src/tile/style/utils.ts

@@ -1,17 +1,16 @@
 import { ILayer } from '@antv/l7-core';
 
 export function updateLayersConfig(layers: ILayer[], key: string, value: any) {
-    layers.map((layer) => {
+  layers.map((layer) => {
-      if (key === 'mask') {
+    if (key === 'mask') {
-        // Tip: 栅格瓦片生效、设置全局的 mask、瓦片被全局的 mask 影响
+      // Tip: 栅格瓦片生效、设置全局的 mask、瓦片被全局的 mask 影响
-        layer.style({
+      layer.style({
-          mask: value,
+        mask: value,
-        });
+      });
-      } else {
+    } else {
-        layer.updateLayerConfig({
+      layer.updateLayerConfig({
-          [key]: value,
+        [key]: value,
-        });
+      });
-      }
+    }
-    });
+  });
-  }
+}
-

packages/layers/src/tile/tileFactory/DebugTile.ts

@@ -1,6 +1,6 @@
-import Tile from './Tile';
-import PointLayer from '../../point';
 import LineLayer from '../../line';
+import PointLayer from '../../point';
+import Tile from './Tile';
 
 export default class DebugTile extends Tile {
   public async initTileLayer(): Promise<void> {
@@ -11,36 +11,34 @@ export default class DebugTile extends Tile {
       .size(1)
       .shape('line')
       .color('red');
-      const pointLayer = new PointLayer({
+    const pointLayer = new PointLayer({
-        minZoom:this.z-1,
+      minZoom: this.z - 1,
-        maxZoom: this.z+1
+      maxZoom: this.z + 1,
-      })
+    })
-      .source([pointData],{
+      .source([pointData], {
         parser: {
           type: 'json',
           x: 'textLng',
           y: 'textLat',
-        }
+        },
-  
       })
       .size(20)
       .color('red')
       .shape(this.key)
       .style({
         stroke: '#fff',
-        strokeWidth: 2
+        strokeWidth: 2,
       });
-    
+
     await this.addLayer(lineLayer);
     await this.addLayer(pointLayer);
-    
+
     this.isLoaded = true;
   }
 
   protected getSourceOption() {
     const rawSource = this.parent.getSource();
-    const features = this.sourceTile.data.layers['testTile']
+    const features = this.sourceTile.data.layers.testTile.features;
-      .features;
     return {
       data: {
         type: 'FeatureCollection',