build(prettier): support optional chain with TS 3.7

fix #46

package.json

@@ -50,6 +50,7 @@
     "enzyme-adapter-react-16": "^1.5.0",
     "enzyme-to-json": "^3.0.0-beta6",
     "gatsby": "^2.17.7",
+    "geotiff": "^1.0.0-beta.6",
     "gh-pages": "^2.1.1",
     "gl": "^4.4.0",
     "html-webpack-plugin": "^3.2.0",
@@ -62,7 +63,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^7.0.18",
     "postcss-plugin": "^1.0.0",
-    "prettier": "^1.18.2",
+    "prettier": "^1.19.1",
     "raw-loader": "^1.0.0",
     "react": "^16.8.6",
     "react-docgen-typescript-loader": "^3.1.0",
@@ -129,8 +130,5 @@
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
-  },
-  "dependencies": {
-    "geotiff": "^1.0.0-beta.6"
   }
 }

packages/component/src/control/layer.ts

@@ -220,7 +220,8 @@ export default class Layers extends Control {
 
     const obj = this.layerService.getLayer(e.target.layerId);
 
-    const type = obj.overlay
+    // @ts-ignore
+    const type = obj?.overlay
       ? e.type === 'add'
         ? 'overlayadd'
         : 'overlayremove'

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

@@ -17,10 +17,6 @@ export default class LayerService implements ILayerService {
 
   public add(layer: ILayer) {
     this.layers.push(layer);
-    this.initPlugin(layer);
-    layer.init();
-    // 添加完成需要触发重绘
-    // this.renderLayers();
   }
 
   public initLayers() {
@@ -75,11 +71,7 @@ export default class LayerService implements ILayerService {
     this.layers.forEach((layer) => layer.destroy());
     this.layers = [];
   }
-  private initPlugin(layer: ILayer) {
-    for (const plugin of layer.plugins) {
-      plugin.apply(layer);
-    }
-  }
+
   private clear() {
     this.renderService.clear({
       color: [0, 0, 0, 0],

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

@@ -4,7 +4,7 @@ import { gl } from '../renderer/gl';
 import { IAttribute } from '../renderer/IAttribute';
 import { IElements } from '../renderer/IElements';
 import { IRendererService } from '../renderer/IRendererService';
-import { IParseDataItem } from '../source/ISourceService'
+import { IParseDataItem } from '../source/ISourceService';
 import { ILayer } from './ILayerService';
 import {
   IEncodeFeature,
@@ -216,10 +216,11 @@ export default class StyleAttributeService implements IStyleAttributeService {
       ) {
         descriptors.forEach((descriptor, attributeIdx) => {
           if (descriptor && descriptor.update) {
-            const normal = normalsForCurrentFeature?.slice(
-              vertexIdx * 3,
-              vertexIdx * 3 + 3,
-            )|| [];
+            const normal =
+              normalsForCurrentFeature?.slice(
+                vertexIdx * 3,
+                vertexIdx * 3 + 3,
+              ) || [];
             (descriptor.buffer.data as number[]).push(
               ...descriptor.update(
                 feature,

packages/core/src/services/map/IMapService.ts

@@ -20,9 +20,9 @@ export interface IMapService {
   getMarkerContainer(): HTMLElement;
   // MapEvent // 定义事件类型
 
-  on(type: string, hander: (...args: any[]) => void): void;
-  off(type: string, hander: (...args: any[]) => void): void;
-  once(type: string, hander: (...args: any[]) => void): void;
+  on(type: string, handler: (...args: any[]) => void): void;
+  off(type: string, handler: (...args: any[]) => void): void;
+  once(type: string, handler: (...args: any[]) => void): void;
   // get dom
   getContainer(): HTMLElement | null;
   getSize(): [number, number];

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

@@ -24,7 +24,8 @@ function decodePickingColor(color: Uint8Array): number {
  * @see https://github.com/antvis/L7/blob/next/dev-docs/PixelPickingEngine.md
  */
 @injectable()
-export default class PixelPickingPass<InitializationOptions = {}> implements IPass<InitializationOptions> {
+export default class PixelPickingPass<InitializationOptions = {}>
+  implements IPass<InitializationOptions> {
   @lazyInject(TYPES.IRendererService)
   protected readonly rendererService: IRendererService;
 
@@ -132,7 +133,12 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
 
     const xInDevicePixel = x * window.devicePixelRatio;
     const yInDevicePixel = y * window.devicePixelRatio;
-    if (xInDevicePixel > width || xInDevicePixel < 0 || yInDevicePixel > height || yInDevicePixel < 0) {
+    if (
+      xInDevicePixel > width ||
+      xInDevicePixel < 0 ||
+      yInDevicePixel > height ||
+      yInDevicePixel < 0
+    ) {
       return;
     }
 
@@ -214,7 +220,9 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
     const { clear, useFramebuffer } = this.rendererService;
 
     // 先输出到 PostProcessor
-    const readFBO = this.layer.multiPassRenderer.getPostProcessor().getReadFBO();
+    const readFBO = this.layer.multiPassRenderer
+      .getPostProcessor()
+      .getReadFBO();
     this.layer.hooks.beforeRender.call();
     useFramebuffer(readFBO, () => {
       clear({

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

@@ -59,7 +59,8 @@ export default class Scene extends EventEmitter implements ISceneService {
   /**
    * 是否首次渲染
    */
-  private inited: boolean;
+  private inited: boolean = false;
+  private initPromise: Promise<void>;
 
   /**
    * canvas 容器
@@ -87,6 +88,8 @@ export default class Scene extends EventEmitter implements ISceneService {
   public init(globalConfig: IGlobalConfig) {
     this.initClear();
     this.configService.setAndCheckConfig(globalConfig);
+    // 初始化 ShaderModule
+    this.shaderModule.registerBuiltinModules();
 
     // 初始化资源管理 图片
     this.iconService.init();
@@ -134,9 +137,6 @@ export default class Scene extends EventEmitter implements ISceneService {
         this.logger.error('容器 id 不存在');
       }
 
-      // 初始化 ShaderModule
-      this.shaderModule.registerBuiltinModules();
-
       // 初始化 container 上的交互
       this.interactionService.init();
 
@@ -144,24 +144,26 @@ export default class Scene extends EventEmitter implements ISceneService {
     });
 
     // TODO：init worker, fontAtlas...
+
+    // 执行异步并行初始化任务
+    this.initPromise = this.hooks.init.promise(this.configService.getConfig());
   }
 
   public addLayer(layer: ILayer) {
     this.logger.info(`add layer ${layer.name}`);
-
     this.layerService.add(layer);
   }
 
   public async render() {
     // 首次初始化，或者地图的容器被强制销毁的需要重新初始化
     if (!this.inited) {
-      // 首次渲染需要等待底图、相机初始化
-      await this.hooks.init.promise(this.configService.getConfig());
-      // 初始化marker 容器
+      // 还未初始化完成需要等待
+      await this.initPromise;
+      // 初始化 marker 容器 TODO: 可以放到 map 初始化方法中？
       this.map.addMarkerContainer();
-      this.inited = true;
+      this.layerService.initLayers();
 
-      this.layerService.renderLayers();
+      this.inited = true;
       this.emit('loaded');
     }
 

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

@@ -85,7 +85,12 @@ export function packCircleVertex(
     packUint8ToFloat(strokeColor[2], strokeColor[3]),
   ];
 
-  [[-1, -1], [1, -1], [1, 1], [-1, 1]].forEach(([extrudeX, extrudeY]) => {
+  [
+    [-1, -1],
+    [1, -1],
+    [1, 1],
+    [-1, 1],
+  ].forEach(([extrudeX, extrudeY]) => {
     // vec4(
     //   color,
     //   color,

packages/layers/src/core/BaseLayer.ts

@@ -52,9 +52,7 @@ let layerIdCounter = 0;
 /**
  * Layer 基类默认样式属性
  */
-const defaultLayerInitializationOptions: Partial<
-  ILayerInitializationOptions
-> = {
+const defaultLayerInitializationOptions: Partial<ILayerInitializationOptions> = {
   minZoom: 0,
   maxZoom: 20,
   visible: true,
@@ -142,12 +140,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   >;
   private scaleOptions: IScaleOptions = {};
 
-  private enodeOptions: {
-    [type: string]: {
-      field: string;
-    };
-  };
-
   @lazyInject(TYPES.IInteractionService)
   private readonly interactionService: IInteractionService;
 
@@ -343,7 +335,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public fitBounds(): void {
     const source = this.getSource();
     const extent = source.extent;
-    this.map.fitBounds([[extent[0], extent[1]], [extent[2], extent[3]]]);
+    this.map.fitBounds([
+      [extent[0], extent[1]],
+      [extent[2], extent[3]],
+    ]);
   }
 
   public destroy() {

packages/layers/src/core/triangulation.ts

@@ -83,9 +83,9 @@ export function PolygonExtrudeTriangulation(feature: IEncodeFeature) {
 export function HeatmapGridTriangulation(feature: IEncodeFeature) {
   const { shape } = feature;
 
-  const { positions, index } = getHeatmapGeometry(shape as
-    | ShapeType2D
-    | ShapeType3D);
+  const { positions, index } = getHeatmapGeometry(
+    shape as ShapeType2D | ShapeType3D,
+  );
   return {
     vertices: positions, // [ x, y, z ] 多边形顶点
     indices: index,

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -89,7 +89,10 @@ export default class DataMappingPlugin implements ILayerPlugin {
     const params: unknown[] = [];
 
     scalers.forEach(({ field }) => {
-       if (record.hasOwnProperty(field) || attribute.scale?.type ==='variable') {
+      if (
+        record.hasOwnProperty(field) ||
+        attribute.scale?.type === 'variable'
+      ) {
         params.push(record[field]);
       }
     });

packages/layers/src/plugins/FeatureScalePlugin.ts

@@ -43,12 +43,12 @@ export default class FeatureScalePlugin implements ILayerPlugin {
   @inject(TYPES.ILogService)
   private readonly logger: ILogService;
 
- // key = field_attribute name
+  // key = field_attribute name
   private scaleCache: {
     [field: string]: IStyleScale;
   } = {};
 
-  private scaleOptions: IScaleOptions = {}
+  private scaleOptions: IScaleOptions = {};
 
   public apply(layer: ILayer) {
     layer.hooks.init.tap('FeatureScalePlugin', () => {
@@ -83,11 +83,12 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       if (attribute.scale) {
         // 创建Scale
         const attributeScale = attribute.scale;
-        attributeScale.names=  this.parseFields(attribute!.scale!.field || []);
-        const scales: IStyleScale[] = attributeScale.names
-        .map((field:string) => {
-           return this.getOrCreateScale(field, attribute, dataArray);
-        })
+        attributeScale.names = this.parseFields(attribute!.scale!.field || []);
+        const scales: IStyleScale[] = attributeScale.names.map(
+          (field: string) => {
+            return this.getOrCreateScale(field, attribute, dataArray);
+          },
+        );
 
         // 为scales 设置值区间
         if (scales.some((scale) => scale.type === StyleScaleType.VARIABLE)) {
@@ -106,16 +107,15 @@ export default class FeatureScalePlugin implements ILayerPlugin {
           });
         }
 
-        attributeScale.scalers = scales.map((scale: IStyleScale)=> {
+        attributeScale.scalers = scales.map((scale: IStyleScale) => {
           return {
             field: scale.field,
             func: scale.scale,
-          }
+          };
         });
 
         attribute.needRescale = false;
       }
-
     });
   }
   private getOrCreateScale(
@@ -123,7 +123,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
     attribute: IStyleAttribute,
     dataArray: IParseDataItem[],
   ) {
-    const scalekey = [field,attribute.name].join('_')
+    const scalekey = [field, attribute.name].join('_');
     if (this.scaleCache[scalekey]) {
       return this.scaleCache[scalekey];
     }
@@ -134,11 +134,11 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       styleScale.type === StyleScaleType.VARIABLE &&
       attribute.scale?.values &&
       attribute.scale?.values.length > 0
-    ) { // 只有变量初始化range
+    ) {
+      // 只有变量初始化range
       styleScale.scale.range(attribute.scale?.values);
     }
 
-
     return this.scaleCache[scalekey];
   }
 
@@ -161,13 +161,12 @@ export default class FeatureScalePlugin implements ILayerPlugin {
     // 首先查找全局默认配置例如 color
     const scaleOption: IScale | undefined = this.scaleOptions[field];
     const styleScale: IStyleScale = {
-        field,
-        scale: undefined,
-        type: StyleScaleType.VARIABLE,
-        option: scaleOption,
-      };
+      field,
+      scale: undefined,
+      type: StyleScaleType.VARIABLE,
+      option: scaleOption,
+    };
     if (!data || !data.length) {
-
       if (scaleOption && scaleOption.type) {
         styleScale.scale = this.createDefaultScale(scaleOption);
       } else {
@@ -176,7 +175,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       }
       return styleScale;
     }
-    const firstValue = (data!.find((d) => !isNil(d[field])))?.[field]
+    const firstValue = data!.find((d) => !isNil(d[field]))?.[field];
     // 常量 Scale
     if (isNumber(field) || (isNil(firstValue) && !scaleOption)) {
       styleScale.scale = d3.scaleOrdinal([field]);
@@ -190,7 +189,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       Object.assign(cfg, scaleOption);
       styleScale.scale = this.createDefaultScale(cfg);
       styleScale.option = cfg;
-
     }
     return styleScale;
   }
@@ -217,8 +215,8 @@ export default class FeatureScalePlugin implements ILayerPlugin {
       cfg.domain = extent(values);
     } else if (type === ScaleTypes.CAT) {
       cfg.domain = uniq(values);
-    } else if(type === ScaleTypes.QUANTILE) {
-       cfg.domain = values
+    } else if (type === ScaleTypes.QUANTILE) {
+      cfg.domain = values;
     }
     return cfg;
   }

packages/layers/src/polygon/__tests__/polygonTriangulation.spec.ts

@@ -4,7 +4,14 @@ import { polygonTriangulation } from '..';
 describe('PolygonTriangulation', () => {
   it('should do triangulation with a polygon correctly', () => {
     const mockFeature: IEncodeFeature = {
-      coordinates: [[[0, 0], [1, 0], [1, 1], [0, 1]]],
+      coordinates: [
+        [
+          [0, 0],
+          [1, 0],
+          [1, 1],
+          [0, 1],
+        ],
+      ],
       color: [1, 0, 0, 0],
     };
     const { indices, vertices, size } = polygonTriangulation(mockFeature);

packages/maps/src/amap/index.ts

@@ -34,7 +34,7 @@ export default class AMapService implements IMapService {
   @inject(TYPES.ICoordinateSystemService)
   private readonly coordinateSystemService: ICoordinateSystemService;
   @inject(TYPES.IEventEmitter)
-  private eventEmitter: IEventEmitter;
+  private eventEmitter: any;
   private markerContainer: HTMLElement;
   private $mapContainer: HTMLElement | null;
   private $jsapi: HTMLScriptElement;
@@ -58,15 +58,19 @@ export default class AMapService implements IMapService {
   }
 
   //  map event
-  public on(type: string, handle: (...args: any[]) => void): void {
+  public on(type: string, handler: (...args: any[]) => void): void {
     if (MapServiceEvent.indexOf(type) !== -1) {
-      this.eventEmitter.on(type, handle);
+      this.eventEmitter.on(type, handler);
     } else {
-      this.map.on(type, handle);
+      this.map.on(type, handler);
     }
   }
-  public off(type: string, handle: (...args: any[]) => void): void {
-    this.map.off(type, handle);
+  public off(type: string, handler: (...args: any[]) => void): void {
+    if (MapServiceEvent.indexOf(type) !== -1) {
+      this.eventEmitter.off(type, handler);
+    } else {
+      this.map.off(type, handler);
+    }
   }
 
   public getContainer(): HTMLElement | null {
@@ -105,7 +109,10 @@ export default class AMapService implements IMapService {
     const amapBound = this.map.getBounds().toBounds();
     const NE = amapBound.getNorthEast();
     const SW = amapBound.getSouthWest();
-    return [[NE.getLng(), NE.getLat()], [SW.getLng(), SW.getLat()]];
+    return [
+      [NE.getLng(), NE.getLat()],
+      [SW.getLng(), SW.getLat()],
+    ];
   }
 
   public getMinZoom(): number {
@@ -200,7 +207,7 @@ export default class AMapService implements IMapService {
         });
 
         // 监听地图相机时间
-        this.map.on('camerachange', this.handleCameraChanged);
+        this.map.on('camerachange', this.handlerCameraChanged);
         this.emit('mapload');
         resolve();
       };
@@ -238,7 +245,7 @@ export default class AMapService implements IMapService {
     this.cameraChangedCallback = callback;
   }
 
-  private handleCameraChanged = (e: IAMapEvent): void => {
+  private handlerCameraChanged = (e: IAMapEvent): void => {
     const {
       fov,
       near,
@@ -270,7 +277,7 @@ export default class AMapService implements IMapService {
 
       // set coordinate system
       // if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
-      //   // TODO:偏移坐标系高德地图不支持 pith bear 同步
+      //   // TODO:偏移坐标系高德地图不支持 pitch bear 同步
       //   this.coordinateSystemService.setCoordinateSystem(
       //     CoordinateSystem.P20_OFFSET,
       //   );

packages/maps/src/map.ts

@@ -1,34 +0,0 @@
-import {
-  Bounds,
-  container,
-  CoordinateSystem,
-  ICoordinateSystemService,
-  ILngLat,
-  IMapConfig,
-  IMapService,
-  IPoint,
-  IViewport,
-  MapType,
-  TYPES,
-} from '@l7/core';
-import { DOM } from '@l7/utils';
-import { inject, injectable } from 'inversify';
-import { IAMapEvent, IAMapInstance } from '../typings/index';
-
-@injectable()
-export default class MapService<MapInstance> implements IMapService {
-  public map: MapInstance;
-
-  @inject(TYPES.ICoordinateSystemService)
-  protected readonly coordinateSystemService: ICoordinateSystemService;
-  @inject(TYPES.IEventEmitter)
-  protected eventEmitter: IEventEmitter;
-  protected markerContainer: HTMLElement;
-  protected $mapContainer: HTMLElement | null;
-
-  private cameraChangedCallback: (viewport: IViewport) => void;
-
-  public getMarkerContainer(): HTMLElement {
-    return this.markerContainer;
-  }
-}

packages/maps/src/mapbox/index.ts

@@ -40,7 +40,7 @@ export default class MapboxService implements IMapService {
   private readonly coordinateSystemService: ICoordinateSystemService;
 
   @inject(TYPES.IEventEmitter)
-  private eventEmitter: IEventEmitter;
+  private eventEmitter: any;
   private viewport: Viewport;
   private markerContainer: HTMLElement;
   private cameraChangedCallback: (viewport: IViewport) => void;

packages/scene/src/index.ts

@@ -102,15 +102,16 @@ class Scene {
 
     // 依赖注入
     this.sceneService = container.get<ISceneService>(TYPES.ISceneService);
-    this.sceneService.init(config);
     this.mapService = container.get<IMapService>(TYPES.IMapService);
     this.iconService = container.get<IIconService>(TYPES.IIconService);
     this.controlService = container.get<IControlService>(TYPES.IControlService);
     this.layerService = container.get<ILayerService>(TYPES.ILayerService);
     mapType = this.mapService.getType();
-    // 初始化 scene
 
-    this.init();
+    // 初始化 scene
+    this.sceneService.init(config);
+    // 初始化组件
+    this.initControl();
   }
 
   public getMapService(): IMapService {
@@ -265,11 +266,6 @@ class Scene {
     // TODO: 清理其他 Service 例如 IconService
   }
 
-  private init(): void {
-    this.initControl();
-    this.render();
-  }
-
   private initControl(): void {
     this.addControl(new Logo());
   }

packages/source/src/parser/image.ts

@@ -19,7 +19,10 @@ export default function image(
     dataArray: [
       {
         _id: 0,
-        coordinates: [[extent[0], extent[1]], [extent[2], extent[3]]],
+        coordinates: [
+          [extent[0], extent[1]],
+          [extent[2], extent[3]],
+        ],
       },
     ],
   };

packages/source/src/parser/raster.ts

@@ -11,7 +11,10 @@ export default function raster(data: number[], cfg: IRasterCfg): IParserData {
         height,
         min,
         max,
-        coordinates: [[extent[0], extent[1]], [extent[2], extent[3]]],
+        coordinates: [
+          [extent[0], extent[1]],
+          [extent[2], extent[3]],
+        ],
       },
     ],
   };

stories/MapAdaptor/components/Mapbox.tsx

@@ -64,7 +64,6 @@ export default class Mapbox extends React.Component {
         .addTo(scene);
       scene.addControl(zoomControl);
       scene.addControl(scaleControl);
-      console.log(layer);
       // layer.fitBounds();
     });
   }