perf: reduce rendering times (#115)

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "prepare": "husky install",
     "bootstrap": "yarn",
-    "dev": "lerna run dev --stream --parallel --ignore=l7plot-website",
+    "dev": "lerna run dev --stream --parallel --no-bail --ignore=l7plot-website",
     "dev-l7lot": "lerna run dev --stream --scope=@antv/l7plot",
     "dev-component": "lerna run dev --stream --scope=@antv/l7plot-component",
     "dev-storybook": "lerna run dev --stream --scope=l7plot-storybook",
@@ -22,7 +22,7 @@
     "test": "jest",
     "test-live": "DEBUG_MODE=1 jest --watch __tests__/unit",
     "test-cover": "jest --coverage",
-    "build": "lerna run build --stream --ignore=l7plot-website",
+    "build": "lerna run build --stream --scope=@antv/l7plot*",
     "build-l7lot": "lerna run build --stream --scope=@antv/l7plot",
     "build-component": "lerna run build --stream --scope=@antv/l7plot-component",
     "build-website": "lerna run build --stream --scope=l7plot-website",

packages/l7plot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7plot",
-  "version": "0.0.3-alpha.10",
+  "version": "0.0.3-alpha.11",
   "description": "Geospatial Visualization Chart Library",
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.ts",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@antv/event-emitter": "^0.1.2",
-    "@antv/l7": "^2.5.5",
+    "@antv/l7": "^2.6.22",
     "@antv/l7plot-component": "^0.0.3-alpha.5",
     "@antv/util": "^2.0.13",
     "lodash-es": "^4.17.21",

packages/l7plot/src/component/tooltip.ts

@@ -9,7 +9,7 @@ import {
 } from '@antv/l7plot-component';
 import { get as getValueByPath } from 'lodash-es';
 import {
-  IPLotLayer,
+  IPlotLayer,
   ILngLat,
   TooltipAnchorType,
   Event,
@@ -30,7 +30,7 @@ export class Tooltip extends EventEmitter {
   /**
    * 带交互的图层
    */
-  protected interactionLayers: IPLotLayer[];
+  protected interactionLayers: IPlotLayer[];
   /**
    * tooltip 的 schema 配置
    */
@@ -52,7 +52,7 @@ export class Tooltip extends EventEmitter {
    */
   private lastComponentOptions: any;
 
-  constructor(scene: Scene, interactionLayers: IPLotLayer[], options: TooltipOptions) {
+  constructor(scene: Scene, interactionLayers: IPlotLayer[], options: TooltipOptions) {
     super();
     this.scene = scene;
     this.interactionLayers = interactionLayers;

packages/l7plot/src/core/layer/layer-group.ts

@@ -1,6 +1,6 @@
 import { uniqueId } from '@antv/util';
 import EventEmitter from '@antv/event-emitter';
-import { Scene, IPLotLayer } from '../../types';
+import { Scene, IPlotLayer } from '../../types';
 
 export interface LayerGroupOption {
   name?: string;
@@ -14,13 +14,13 @@ export class LayerGroup extends EventEmitter {
   /**
    * 子图层
    */
-  public layers: IPLotLayer[];
+  public layers: IPlotLayer[];
   /**
    * 地图容器
    */
   public scene: Scene | undefined;
 
-  constructor(layers: IPLotLayer[] = [], option: LayerGroupOption = {}) {
+  constructor(layers: IPlotLayer[] = [], option: LayerGroupOption = {}) {
     super();
     this.name = option.name ? option.name : uniqueId('layerGroup');
     this.layers = layers;
@@ -48,14 +48,14 @@ export class LayerGroup extends EventEmitter {
   /**
    * 图层组是否有该图层
    */
-  hasLayer(layer: IPLotLayer): boolean {
+  hasLayer(layer: IPlotLayer): boolean {
     return this.layers.some((itemLayer) => itemLayer === layer);
   }
 
   /**
    * 增加图层
    */
-  public addLayer(layer: IPLotLayer) {
+  public addLayer(layer: IPlotLayer) {
     // TODO: duplicate layer
     this.layers.push(layer);
     if (this.scene) {
@@ -67,7 +67,7 @@ export class LayerGroup extends EventEmitter {
   /**
    * 移除 layer 图层
    */
-  public removeLayer(layer: IPLotLayer): boolean {
+  public removeLayer(layer: IPlotLayer): boolean {
     const layerIndex = this.layers.findIndex((itemLayer) => itemLayer === layer);
     if (layerIndex === -1) return false;
     this.layers.splice(layerIndex, 1);
@@ -80,28 +80,28 @@ export class LayerGroup extends EventEmitter {
   /**
    * 获取所有的地图图层
    */
-  public getLayers(): IPLotLayer[] {
+  public getLayers(): IPlotLayer[] {
     return this.layers;
   }
 
   /**
    * 获取所有的带交互图层
    */
-  public getInteractionLayers(): IPLotLayer[] {
+  public getInteractionLayers(): IPlotLayer[] {
     return this.layers.filter(({ interaction }) => interaction);
   }
 
   /**
    * 根据图层 ID 获取图层对象
    */
-  public getLayer(id: string): IPLotLayer | undefined {
+  public getLayer(id: string): IPlotLayer | undefined {
     return this.layers.find(({ layer }) => layer.id === id);
   }
 
   /**
    * 根据图层 name 获取图层对象
    */
-  public getLayerByName(name: string): IPLotLayer | undefined {
+  public getLayerByName(name: string): IPlotLayer | undefined {
     return this.layers.find((itemLayer) => itemLayer.name === name);
   }
 

packages/l7plot/src/core/layer/plot-layer.ts

@@ -1,15 +1,15 @@
 import { isEqual, isUndefined, pick } from '@antv/util';
 import Source from '@antv/l7-source';
 import EventEmitter from '@antv/event-emitter';
-import { LayerType, IPLotLayer, PlotLayerOptions, LayerBlend } from '../../types/layer';
+import { LayerType, IPlotLayer, PlotLayerOptions, LayerBlend } from '../../types/layer';
 import { Scene, ILayer, ILayerConfig, SourceOptions } from '../../types';
 import { MappingSource } from '../../adaptor/source';
 import { LayerEventList } from '../map/constants';
 import { deepAssign } from '../../utils';
 
 const LayerConfigkeys = ['name', 'zIndex', 'visible', 'minZoom', 'maxZoom', 'pickingBuffer', 'autoFit', 'blend'];
 
-export abstract class PlotLayer<O extends PlotLayerOptions> extends EventEmitter implements IPLotLayer {
+export abstract class PlotLayer<O extends PlotLayerOptions> extends EventEmitter implements IPlotLayer {
   /**
    * 地图图表类型
    */

packages/l7plot/src/core/map/index.ts

@@ -16,9 +16,10 @@ import {
   ScaleControlOptions,
   LegendOptions,
   Event,
-  IPLotLayer,
+  IPlotLayer,
   UpdateMapConfig,
   Bounds,
+  MapStatusOptions,
 } from '../../types';
 import { LayerGroup } from '../layer/layer-group';
 import { LayerEventList, MapEventList, SceneEventList } from './constants';
@@ -191,7 +192,7 @@ export abstract class Map<O extends MapOptions> extends EventEmitter {
   protected registerResources() {
     if (IMAGES_CACHE.size) {
       IMAGES_CACHE.forEach((img, id) => {
-        this.scene.addImage(id, img);
+        !this.scene.hasImage(id) && this.scene.addImage(id, img);
       });
     }
     if (FONT_FACE_CACHE.size) {
@@ -329,36 +330,45 @@ export abstract class Map<O extends MapOptions> extends EventEmitter {
   /**
    * 添加图层
    */
-  public addLayer(layer: IPLotLayer) {
+  public addLayer(layer: IPlotLayer) {
     this.layerGroup.addLayer(layer);
   }
 
   /**
    * 获取所有图层
+   *  @deprecate
    */
-  public getLayes(): IPLotLayer[] {
+  public getLayes(): IPlotLayer[] {
+    console.warn('Replace to use getLayers()');
+    return this.getLayers();
+  }
+
+  /**
+   * 获取所有图层
+   */
+  public getLayers(): IPlotLayer[] {
     return this.layerGroup.getLayers();
   }
 
   /**
    * 根据图层名称获取图层
    */
-  public getLayerByName(name: string): IPLotLayer | undefined {
+  public getLayerByName(name: string): IPlotLayer | undefined {
     return this.layerGroup.getLayerByName(name);
   }
 
   /**
    * 移除图层
    */
-  public removeLayer(layer: IPLotLayer) {
-    this.layerGroup.addLayer(layer);
+  public removeLayer(layer: IPlotLayer) {
+    return this.layerGroup.removeLayer(layer);
   }
 
   /**
-   * 移除容器内所有的图层
+   * 移除内置所有的图层
    */
   public removeAllLayer() {
-    this.scene.removeAllLayer();
+    this.layerGroup.removeAllLayer();
   }
 
   /**
@@ -389,6 +399,21 @@ export abstract class Map<O extends MapOptions> extends EventEmitter {
     this.scene.fitBounds(bound);
   }
 
+  /**
+   * 设置地图状态
+   * 可用来关闭地图的一些交互操作
+   */
+  public setMapStatus(status: MapStatusOptions) {
+    this.scene.setMapStatus(status);
+  }
+
+  /**
+   * 设置场景的背景色
+   */
+  public setBgColor(color: string) {
+    this.scene.setBgColor(color);
+  }
+
   /**
    * 初始化组件
    */

packages/l7plot/src/core/plot/index.ts

@@ -5,6 +5,7 @@ import { PlotType, PlotOptions, LabelOptions, Source, SourceOptions, Scene, Plot
 import { LayerGroup } from '../layer/layer-group';
 import { MappingSource } from '../../adaptor/source';
 import { isEqual } from '@antv/util';
+import { getTheme } from '../../theme';
 
 const DEFAULT_OPTIONS: Partial<PlotOptions> = {
   autoFit: false,
@@ -117,7 +118,7 @@ export abstract class Plot<O extends PlotOptions> extends Map<O> {
       this.layerGroup.removeAllLayer();
       layerGroup.addTo(this.scene);
       this.layerGroup = layerGroup;
-      this.updateComponents();
+      // this.scene.render();
     } else {
       this.layerGroup = layerGroup;
       this.onLayersLoaded();
@@ -156,13 +157,45 @@ export abstract class Plot<O extends PlotOptions> extends Map<O> {
 
   /**
    * 挂载到容器
+   * 用于高级图表 L7Plot 挂载单个图表示例
    */
-  public attachToScene(scene: Scene, theme: Record<string, any>) {
+  public attachToScene(scene: Scene, theme?: Record<string, any>) {
     this.scene = scene;
-    this.theme = theme;
+    this.theme = theme ? theme : getTheme('default');
+    this.registerResources();
     this.initLayers();
   }
 
+  /**
+   * 取消挂载到容器上的 scene
+   * 用于高级图表 L7Plot 挂载单个图表示例
+   */
+  public unattachFromScene() {
+    this.removeAllLayer();
+    this.tooltip?.destroy();
+  }
+
+  /**
+   * 添加到容器
+   * 用于 L7 Scene 与图表混合使用场景
+   */
+  public addToScene(scene: Scene) {
+    this.attachToScene(scene);
+  }
+
+  /**
+   * 从容器上移除
+   * 用于 L7 Scene 与图表混合使用场景
+   */
+  public removeFromScene() {
+    this.removeAllLayer();
+    this.removeScaleControl();
+    this.removeZoomControl();
+    this.removeLayerMenuControl();
+    this.removeLegendControl();
+    this.tooltip?.destroy();
+  }
+
   /**
    * 更新: 更新配置且重新渲染
    */
@@ -171,11 +204,15 @@ export abstract class Plot<O extends PlotOptions> extends Map<O> {
     if (options.map && !isEqual(this.lastOptions.map, this.options.map)) {
       this.updateMap(options.map);
     }
+    this.scene.setEnableRender(false);
     if (options.source && !isEqual(this.lastOptions.source, this.options.source)) {
       const { data, ...sourceConfig } = options.source;
       this.changeData(data, sourceConfig);
     }
+    // this.updateLayers(options);
+    this.scene.setEnableRender(true);
     this.render();
+    this.updateComponents();
     this.emit('update');
   }
 

packages/l7plot/src/index.ts

@@ -1,4 +1,4 @@
-export const version = '0.0.3-alpha.10';
+export const version = '0.0.3-alpha.11';
 
 /** 资源静态注册 **/
 export {