1615058340

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/antvis/L7Plot/commit/<a class=hub.com/antvis/L7Plot/commit/c4ee0cfff90c726732061d12dd716099d708f955">c4ee0cfff<a href="https://github.com/antvis/L7Plot/commit/c4ee0cfff90c726732061d12dd716099d708f955">">Merge </a><a class="double-link" href="https://github.com/antvis/L7Plot/commit/<a class="double-link" href="https://github.com/antvis/L7Plot/commit/b315df2ea82a3ba76a237f4628f84c0a68877be2">b315df2ea</a>">b315df2ea</a><a href="https://github.com/antvis/L7Plot/commit/c4ee0cfff90c726732061d12dd716099d708f955"> into 456f46a45">456f46a45</a>

Pull Request Pull Request #115: perf: reduce rendering times

Run Details

541 of 1272 branches covered (42.53%)

Branch coverage included in aggregate %.

95 of 95 new or added lines in 8 files covered. (100.0%)

2188 of 3149 relevant lines covered (69.48%)

180.5 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

62.47

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

import { Scene } from '@antv/l7-scene';
import { Mapbox, GaodeMap } from '@antv/l7-maps';
import { Scale, Layers, Zoom } from '@antv/l7-component';
import EventEmitter from '@antv/event-emitter';
import { isObject, isBoolean, isUndefined, isEqual } from '@antv/util';
import { Tooltip } from '../../component/tooltip';
import { Legend, LegendItem } from '../../component/legend';
import { deepAssign } from '../../utils';
import {
  BaseMapType,
  MapOptions,
  AMapInstance,
  MapboxInstance,
  ZoomControlOptions,
  LayerMenuControlOptions,
  ScaleControlOptions,
  LegendOptions,
  Event,
  IPlotLayer,
  UpdateMapConfig,
  Bounds,
  MapStatusOptions,
} from '../../types';
import { LayerGroup } from '../layer/layer-group';
import { LayerEventList, MapEventList, SceneEventList } from './constants';
import { FONT_FACE_CACHE, ICON_FONT_CACHE, IMAGES_CACHE } from './register';
import { getTheme } from '../../theme';
import { createTheme } from '../../theme/util';

const DEFAULT_OPTIONS: Partial<MapOptions> = {
  map: { type: BaseMapType.Amap },
  logo: true,
};

export abstract class Map<O extends MapOptions> extends EventEmitter {
  /**
   * 默认的 options 配置项
   */
  static DefaultOptions = DEFAULT_OPTIONS;
  /**
   * 是否初始化成功
   */
  public inited = false;
  /**
   * 是否场景加载完成
   */
  public sceneLoaded = false;
  /**
   * 是否所有图层加载完成
   */
  public layersLoaded = false;
  /**
   * 是否场景与所有图层加载完成
   */
  public loaded = false;
  /**
   * map 的 schema 配置
   */
  public options: O;
  /**
   * map 上一次的 schema 配置
   */
  protected lastOptions: O;
  /**
   * map 绘制的 dom
   */
  public container!: HTMLDivElement;
  /**
   * scene 实例
   */
  public scene!: Scene;
  /**
   * 图层组
   */
  public layerGroup = new LayerGroup();
  /**
   * 主题配置
   */
  protected theme!: Record<string, any>;
  /**
   * zoom 放缩器 Control
   */
  public zoomControl: Zoom | undefined;
  /**
   * scale 比例尺 Control
   */
  public scaleControl: Scale | undefined;
  /**
   * layerMenu 图层列表 Control
   */
  public layerMenuControl: Layers | undefined;
  /**
   * legend 图例 Control
   */
  public legendControl: Legend | undefined;
  /**
   * tooltip 悬浮提示
   */
  public tooltip: Tooltip | undefined;

  constructor(options: O) {
    super();
    this.options = deepAssign({}, this.getDefaultOptions(), options);
    this.lastOptions = this.options;
  }

  /**
   * 获取默认配置
   */
  protected getDefaultOptions(): Partial<MapOptions> {
    return Map.DefaultOptions;
  }

  /**
   * 创建 DOM 容器
   */
  protected createContainer(container: string | HTMLDivElement) {
    const { width, height } = this.options;
    const dom = typeof container === 'string' ? (document.getElementById(container) as HTMLDivElement) : container;
    dom.style.position || (dom.style.position = 'relative');
    if (width) {
      dom.style.width || (dom.style.width = `${width}px`);
    }
    if (height) {
      dom.style.height || (dom.style.height = `${height}px`);
    }

    return dom;
  }

  /**
   * 注册主题
   */
  protected createTheme() {
    const theme = isObject(this.options.theme)
      ? deepAssign({}, getTheme('default'), createTheme(this.options.theme))
      : getTheme(this.options.theme);
    return theme;
  }

  /**
   * 创建 map 容器
   */
  protected createMap() {
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const mapConfig = this.options.map ? this.options.map : DEFAULT_OPTIONS.map!;
    const { type, ...config } = mapConfig;
    const options = Object.assign({ style: this.theme['mapStyle'] }, config);

    return type === BaseMapType.Amap ? new GaodeMap(options) : new Mapbox(options);
  }

  /**
   * 创建 scene 实例
   */
  protected createScene() {
    const { logo, antialias, preserveDrawingBuffer } = this.options;
    const logoConfig = isBoolean(logo)
      ? { logoVisible: logo }
      : { logoVisible: logo?.visible, logoPosition: logo?.position };
    const sceneConfig = Object.assign(
      {
        // animate,
        // fitBoundsOptions,
        // pickBufferScale,
        // enableMultiPassRenderer,
        // passes,
        antialias,
        preserveDrawingBuffer,
      },
      logoConfig
    );
    const map = this.createMap();

    const scene = new Scene({
      id: this.container,
      map: map,
      ...sceneConfig,
    });

    return scene;
  }

  /**
   * 渲染
   */
  public abstract render(): void;

  /**
   * 注册静态资源
   */
  protected registerResources() {
    if (IMAGES_CACHE.size) {
      IMAGES_CACHE.forEach((img, id) => {
        !this.scene.hasImage(id) && this.scene.addImage(id, img);
      });
    }
    if (FONT_FACE_CACHE.size) {
      FONT_FACE_CACHE.forEach((fontPath, fontFamily) => {
        this.scene.addFontFace(fontFamily, fontPath);
      });
    }
    if (ICON_FONT_CACHE.size) {
      ICON_FONT_CACHE.forEach((name, fontUnicode) => {
        this.scene.addIconFont(fontUnicode, name);
      });
    }
  }

  /**
   * 更新: 更新配置且重新渲染
   */
  public update(options: Partial<O>) {
    this.updateOption(options);
    if (options.map && !isEqual(this.lastOptions.map, this.options.map)) {
      this.updateMap(options.map);
    }
    this.render();
    this.emit('update');
  }

  /**
   * 更新: 更新配置
   */
  public updateOption(options: Partial<O>) {
    this.lastOptions = this.options;
    this.options = deepAssign({}, this.options, options);
  }

  /**
   * 更新: 地图底图配置
   */
  public updateMap(updateMapConfig: UpdateMapConfig) {
    if (!this.scene) return;
    const { style, center, zoom, rotation, pitch } = updateMapConfig;

    if (!isUndefined(pitch)) {
      this.scene.setPitch(pitch);
    }

    if (!isUndefined(rotation)) {
      this.scene.setRotation(rotation);
    }

    if (style && style !== this.lastOptions.map?.style) {
      this.scene.setMapStyle(style);
    }

    if (zoom && center) {
      this.scene.setZoomAndCenter(zoom, center);
    }
  }

  /**
   * 修改容器大小
   */
  public changeSize(width: number, height: number) {
    if (this.options.width === width && this.options.height === height) return;
    this.container.style.width = `${width}px`;
    this.container.style.height = `${height}px`;
    this.options = Object.assign(this.options, { width, height });
  }

  /**
   * 事件代理: 绑定事件
   */
  public on(name: string, callback: (...args: any[]) => void) {
    this.proxyEventHander('on', name, callback);
    return this;
  }

  /**
   * 事件代理: 绑定一次事件
   */
  public once(name: string, callback: (...args: any[]) => void) {
    this.proxyEventHander('once', name, callback);
    return this;
  }

  /**
   * 事件代理: 解绑事件
   */
  public off(name: string, callback: (...args: any[]) => void) {
    this.proxyEventHander('off', name, callback);
    return this;
  }

  /**
   * 事件代理: 事件处理
   */
  private proxyEventHander(type: 'on' | 'off' | 'once', name: string, callback: (...args: any[]) => void) {
    const sceneEvent = SceneEventList.find((event) => event.adaptation === name);
    if (sceneEvent) {
      this.scene[type](sceneEvent.original, callback);
    } else if (MapEventList.indexOf(name) !== -1) {
      this.scene[type](name, callback);
    } else if (name.includes('Layer:')) {
      const [module, eventName] = name.split(':');
      const hasEventEmitter = this[module] && this[module][type];
      if (hasEventEmitter && LayerEventList.indexOf(eventName) !== -1) {
        this[module][type](eventName, callback);
      } else {
        throw new Error(`No event name "${name}"`);
      }
    } else {
      super[type](name, callback);
    }
  }

  /**
   * 获取 scene 实例
   */
  public getScene(): Scene {
    return this.scene;
  }

  /**
   * 获取 map 实例
   */
  public getMap(): MapboxInstance | AMapInstance | unknown {
    if (this.options.map?.type === BaseMapType.Amap) {
      return this.scene.map as AMapInstance;
    } else if (this.options.map?.type === BaseMapType.Mapbox) {
      return this.scene.map as MapboxInstance;
    } else {
      return this.scene.map;
    }
  }

  /**
   * 添加图层
   */
  public addLayer(layer: IPlotLayer) {
    this.layerGroup.addLayer(layer);
  }

  /**
   * 获取所有图层
   *  @deprecate
   */
  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 {
    return this.layerGroup.getLayerByName(name);
  }

  /**
   * 移除图层
   */
  public removeLayer(layer: IPlotLayer) {
    return this.layerGroup.removeLayer(layer);
  }

  /**
   * 移除内置所有的图层
   */
  public removeAllLayer() {
    this.layerGroup.removeAllLayer();
  }

  /**
   * 地图放大一级
   */
  public zoomIn() {
    this.scene.zoomIn();
  }

  /**
   * 地图缩小一级
   */
  public zoomOut() {
    this.scene.zoomOut();
  }

  /**
   * 设置地图倾角
   */
  public setPitch(pitch: number) {
    this.scene.setPitch(pitch);
  }

  /**
   * 设置地图缩放范围
   */
  public fitBounds(bound: Bounds) {
    this.scene.fitBounds(bound);
  }

  /**
   * 设置地图状态
   * 可用来关闭地图的一些交互操作
   */
  public setMapStatus(status: MapStatusOptions) {
    this.scene.setMapStatus(status);
  }

  /**
   * 设置场景的背景色
   */
  public setBgColor(color: string) {
    this.scene.setBgColor(color);
  }

  /**
   * 初始化组件
   */
  protected initComponents() {
    this.initControls();
    this.initTooltip();
  }

  /**
   * 更新化组件
   */
  protected updateComponents() {
    this.updateControls();
    this.initTooltip();
  }

  /**
   * 初始化控件
   */
  protected initControls() {
    const { zoom, scale, layerMenu, legend } = this.options;
    scale && this.addScaleControl(scale);
    zoom && this.addZoomControl(zoom);
    layerMenu && this.addLayerMenuControl(layerMenu);
    legend && this.addLegendControl(legend);
  }

  /**
   * 更新控件
   */
  protected updateControls() {
    const { zoom, scale, layerMenu, legend } = this.options;
    if (!isEqual(this.lastOptions.zoom, zoom)) {
      zoom ? this.updateZoomControl(zoom) : this.removeZoomControl();
    }
    if (!isEqual(this.lastOptions.scale, scale)) {
      scale ? this.updateScaleControl(scale) : this.removeScaleControl();
    }
    if (!isEqual(this.lastOptions.layerMenu, layerMenu)) {
      layerMenu ? this.updateLayerMenuControl(layerMenu) : this.removeLayerMenuControl();
    }
    if (!isEqual(this.lastOptions.legend, legend)) {
      legend ? this.updateLegendControl(legend) : this.removeLegendControl();
    }
  }

  /**
   * 添加 zoom 控件
   */
  public addZoomControl(options: ZoomControlOptions) {
    if (this.zoomControl) {
      return;
    }
    this.zoomControl = new Zoom(options);
    this.scene.addControl(this.zoomControl);
  }

  /**
   * 更新 zoom 控件
   */
  public updateZoomControl(options: ZoomControlOptions) {
    if (!this.zoomControl) {
      this.addZoomControl(options);
      return;
    }
    this.removeZoomControl();
    this.addZoomControl(options);
  }

  /**
   * 移除 zoom 控件
   */
  public removeZoomControl() {
    if (this.zoomControl) {
      this.zoomControl.remove();
      this.zoomControl = undefined;
    }
  }

  /**
   * 添加 scale 控件
   */
  public addScaleControl(options: ScaleControlOptions) {
    if (this.scaleControl) {
      return;
    }
    this.scaleControl = new Scale(options);
    this.scene.addControl(this.scaleControl);
  }

  /**
   * 更新 scale 控件
   */
  public updateScaleControl(options: ScaleControlOptions) {
    if (!this.scaleControl) {
      this.addScaleControl(options);
      return;
    }
    this.removeScaleControl();
    this.addScaleControl(options);
  }

  /**
   * 移除 scale 控件
   */
  public removeScaleControl() {
    if (this.scaleControl) {
      this.scaleControl.remove();
      this.scaleControl = undefined;
    }
  }

  /**
   * 添加 layerMenu 控件
   */
  public addLayerMenuControl(options: LayerMenuControlOptions) {
    if (this.layerMenuControl) {
      return;
    }
    const baseLayers = {};
    const overlayers = {};
    this.layerGroup.getLayers().forEach(({ name, layer }) => {
      overlayers[name] = layer;
    });
    this.layerMenuControl = new Layers(Object.assign({}, options, { baseLayers, overlayers }));
    this.scene.addControl(this.layerMenuControl);
  }

  /**
   * 更新 layerMenu 控件
   */
  public updateLayerMenuControl(options: LayerMenuControlOptions) {
    if (!this.layerMenuControl) {
      this.addLayerMenuControl(options);
      return;
    }
    this.removeLayerMenuControl();
    this.addLayerMenuControl(options);
  }

  /**
   * 移除 layerMenu 控件
   */
  public removeLayerMenuControl() {
    if (this.layerMenuControl) {
      this.layerMenuControl.remove();
      this.layerMenuControl = undefined;
    }
  }

  /**
   * 获取 legend 配置项
   * 由各图各自实现，不同的图 legend 可能不同
   */
  public getLegendOptions(): LegendOptions {
    return {};
  }

  /**
   * 添加 legend 控件
   */
  public addLegendControl(options: LegendOptions) {
    if (this.legendControl) {
      return;
    }
    const legendTheme = this.theme['components'].legend;
    const legendOptions: LegendOptions = deepAssign({}, this.getLegendOptions(), options);
    const { type, position, ...rest } = legendOptions;
    const items: LegendItem[] = [];
    if (type === 'category') {
      const options = deepAssign({}, { domStyles: legendTheme.category.domStyles }, rest);
      items.push({ type, options });
    } else if (type === 'continue') {
      const options = deepAssign({}, { domStyles: legendTheme.continue.domStyles }, rest);
      items.push({ type, options });
    }

    if (items.length) {
      this.legendControl = new Legend({ position, items });
      this.scene.addControl(this.legendControl);
    }
  }

  /**
   * 更新 legend 控件
   */
  public updateLegendControl(options: LegendOptions) {
    if (!this.legendControl) {
      this.addLegendControl(options);
      return;
    }
    this.removeLegendControl();
    this.addLegendControl(options);
  }

  /**
   * 移除 legend 控件
   */
  public removeLegendControl() {
    if (this.legendControl) {
      this.legendControl.remove();
      this.legendControl = undefined;
    }
  }

  /**
   * 初始化 tooltip
   */
  protected initTooltip() {
    if (this.tooltip) {
      this.tooltip.destroy();
    }
    const { tooltip } = this.options;
    if (tooltip) {
      const options = deepAssign({}, { domStyles: this.theme['components'].tooltip.domStyles }, tooltip);
      const interactionLayers = this.layerGroup.getInteractionLayers();
      this.tooltip = new Tooltip(this.scene, interactionLayers, options);
      this.tooltip.on('*', (event: Event) => this.emit(event.type, event));
    }
  }

  /**
   * 导出地图图片
   */
  public exportPng(type?: 'png' | 'jpg'): string {
    return this.scene.exportPng(type);
  }

  /**
   * 销毁
   */
  public destroy() {
    // TODO: 清空已经绑定其他的事件
    super.off('*');
    this.removeScaleControl();
    this.removeZoomControl();
    this.removeLayerMenuControl();
    this.removeLegendControl();
    this.tooltip?.destroy();
    this.scene.destroy();
  }
}

1	import { Scene } from '@antv/l7-scene';
2	import { Mapbox, GaodeMap } from '@antv/l7-maps';	91✔
3	import { Scale, Layers, Zoom } from '@antv/l7-component';	91✔
4	import EventEmitter from '@antv/event-emitter';	91✔
5	import { isObject, isBoolean, isUndefined, isEqual } from '@antv/util';	91✔
6	import { Tooltip } from '../../component/tooltip';	91✔
7	import { Legend, LegendItem } from '../../component/legend';	91✔
8	import { deepAssign } from '../../utils';	91✔
9	import {	91✔
10	BaseMapType,	91✔
11	MapOptions,	91✔
12	AMapInstance,	91✔
13	MapboxInstance,	91✔
14	ZoomControlOptions,	91✔
15	LayerMenuControlOptions,	91✔
16	ScaleControlOptions,	91✔
17	LegendOptions,	91✔
18	Event,	91✔
19	IPlotLayer,	91✔
20	UpdateMapConfig,
21	Bounds,
22	MapStatusOptions,
23	} from '../../types';	91✔
24	import { LayerGroup } from '../layer/layer-group';	91✔
25	import { LayerEventList, MapEventList, SceneEventList } from './constants';
26	import { FONT_FACE_CACHE, ICON_FONT_CACHE, IMAGES_CACHE } from './register';	252✔
27	import { getTheme } from '../../theme';
28	import { createTheme } from '../../theme/util';
29
30	const DEFAULT_OPTIONS: Partial<MapOptions> = {	252✔
31	map: { type: BaseMapType.Amap },
32	logo: true,
33	};
34		252✔
35	export abstract class Map<O extends MapOptions> extends EventEmitter {
36	/**
37	* 默认的 options 配置项
38	*/	252✔
39	static DefaultOptions = DEFAULT_OPTIONS;
40	/**
41	* 是否初始化成功
42	*/	252✔
43	public inited = false;
44	/**
45	* 是否场景加载完成
46	*/	252✔
47	public sceneLoaded = false;	252✔
48	/**	252✔
49	* 是否所有图层加载完成	252✔
50	*/
51	public layersLoaded = false;
52	/**
53	* 是否场景与所有图层加载完成
54	*/	91✔
55	public loaded = false;	×
56	/**
57	* map 的 schema 配置
58	*/
59	public options: O;
60	/**	91✔
61	* map 上一次的 schema 配置	252✔
62	*/	252!
63	protected lastOptions: O;	252!
64	/**	252✔
65	* map 绘制的 dom	12✔
66	*/
67	public container!: HTMLDivElement;	252✔
68	/**	12!
69	* scene 实例
70	*/	252✔
71	public scene!: Scene;
72	/**
73	* 图层组
74	*/
75	public layerGroup = new LayerGroup();	91✔
76	/**	252!
77	* 主题配置
78	*/
79	protected theme!: Record<string, any>;	252✔
80	/**
81	* zoom 放缩器 Control
82	*/
83	public zoomControl: Zoom \| undefined;
84	/**	91✔
85	* scale 比例尺 Control
86	*/	252!
87	public scaleControl: Scale \| undefined;	252✔
88	/**	252✔
89	* layerMenu 图层列表 Control	252!
90	*/
91	public layerMenuControl: Layers \| undefined;
92	/**
93	* legend 图例 Control
94	*/	91✔
95	public legendControl: Legend \| undefined;	252✔
96	/**	252✔
97	* tooltip 悬浮提示
98	*/	1,500!
99	public tooltip: Tooltip \| undefined;	252✔
100
101	constructor(options: O) {
102	super();
103	this.options = deepAssign({}, this.getDefaultOptions(), options);
104	this.lastOptions = this.options;
105	}
106
107	/**
108	* 获取默认配置	252✔
109	*/	252✔
110	protected getDefaultOptions(): Partial<MapOptions> {	252✔
111	return Map.DefaultOptions;
112	}
113
114	/**
115	* 创建 DOM 容器	91✔
116	*/	252✔
117	protected createContainer(container: string \| HTMLDivElement) {	252✔
118	const { width, height } = this.options;	60✔
119	const dom = typeof container === 'string' ? (document.getElementById(container) as HTMLDivElement) : container;	78✔
120	dom.style.position \|\| (dom.style.position = 'relative');
121	if (width) {
122	dom.style.width \|\| (dom.style.width = `${width}px`);	252✔
123	}	9✔
124	if (height) {	9✔
125	dom.style.height \|\| (dom.style.height = `${height}px`);
126	}
127		252!
128	return dom;	×
129	}	×
130
131	/**
132	* 注册主题
133	*/
134	protected createTheme() {
135	const theme = isObject(this.options.theme)
136	? deepAssign({}, getTheme('default'), createTheme(this.options.theme))	91✔
137	: getTheme(this.options.theme);	×
138	return theme;	×
139	}	×
140
141	/**	×
142	* 创建 map 容器	×
143	*/
144	protected createMap() {
145	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
146	const mapConfig = this.options.map ? this.options.map : DEFAULT_OPTIONS.map!;
147	const { type, ...config } = mapConfig;	91✔
148	const options = Object.assign({ style: this.theme['mapStyle'] }, config);	24✔
149		24✔
150	return type === BaseMapType.Amap ? new GaodeMap(options) : new Mapbox(options);
151	}
152
153	/**
154	* 创建 scene 实例	91✔
155	*/
156	protected createScene() {	×
157	const { logo, antialias, preserveDrawingBuffer } = this.options;	×
158	const logoConfig = isBoolean(logo)	×
159	? { logoVisible: logo }	×
160	: { logoVisible: logo?.visible, logoPosition: logo?.position };	×
161	const sceneConfig = Object.assign(
162	{	×
163	// animate,	×
164	// fitBoundsOptions,
165	// pickBufferScale,	×
166	// enableMultiPassRenderer,	×
167	// passes,
168	antialias,	×
169	preserveDrawingBuffer,	×
170	},
171	logoConfig
172	);
173	const map = this.createMap();
174
175	const scene = new Scene({	91✔
176	id: this.container,	12!
177	map: map,	×
178	...sceneConfig,	12✔
179	});	12✔
180		12✔
181	return scene;
182	}
183
184	/**
185	* 渲染	91✔
186	*/	223✔
187	public abstract render(): void;	223✔
188
189	/**
190	* 注册静态资源
191	*/
192	protected registerResources() {	91✔
193	if (IMAGES_CACHE.size) {	×
194	IMAGES_CACHE.forEach((img, id) => {	×
195	!this.scene.hasImage(id) && this.scene.addImage(id, img);
196	});
197	}
198	if (FONT_FACE_CACHE.size) {
199	FONT_FACE_CACHE.forEach((fontPath, fontFamily) => {	91✔
200	this.scene.addFontFace(fontFamily, fontPath);	×
201	});	×
202	}
203	if (ICON_FONT_CACHE.size) {
204	ICON_FONT_CACHE.forEach((name, fontUnicode) => {
205	this.scene.addIconFont(fontUnicode, name);
206	});	91✔
207	}	892✔
208	}	223!
209		×
210	/**
211	* 更新: 更新配置且重新渲染	223!
212	*/	×
213	public update(options: Partial<O>) {
214	this.updateOption(options);	223✔
215	if (options.map && !isEqual(this.lastOptions.map, this.options.map)) {	60✔
216	this.updateMap(options.map);	60✔
217	}	60!
218	this.render();	60✔
219	this.emit('update');
220	}
221		×
222	/**
223	* 更新: 更新配置
224	*/
225	public updateOption(options: Partial<O>) {	163✔
226	this.lastOptions = this.options;
227	this.options = deepAssign({}, this.options, options);
228	}
229
230	/**
231	* 更新: 地图底图配置	91✔
232	*/	×
233	public updateMap(updateMapConfig: UpdateMapConfig) {
234	if (!this.scene) return;
235	const { style, center, zoom, rotation, pitch } = updateMapConfig;
236
237	if (!isUndefined(pitch)) {	91✔
238	this.scene.setPitch(pitch);
239	}	×
240		×
241	if (!isUndefined(rotation)) {
242	this.scene.setRotation(rotation);	×
243	}	×
244
245	if (style && style !== this.lastOptions.map?.style) {
246	this.scene.setMapStyle(style);	×
247	}
248
249	if (zoom && center) {
250	this.scene.setZoomAndCenter(zoom, center);
251	}
252	}	91✔
253		×
254	/**
255	* 修改容器大小
256	*/
257	public changeSize(width: number, height: number) {
258	if (this.options.width === width && this.options.height === height) return;
259	this.container.style.width = `${width}px`;	91✔
260	this.container.style.height = `${height}px`;	×
261	this.options = Object.assign(this.options, { width, height });	×
262	}
263
264	/**
265	* 事件代理: 绑定事件
266	*/	91✔
267	public on(name: string, callback: (...args: any[]) => void) {	×
268	this.proxyEventHander('on', name, callback);
269	return this;
270	}
271
272	/**	91✔
273	* 事件代理: 绑定一次事件	×
274	*/
275	public once(name: string, callback: (...args: any[]) => void) {
276	this.proxyEventHander('once', name, callback);
277	return this;
278	}	91✔
279		×
280	/**
281	* 事件代理: 解绑事件
282	*/
283	public off(name: string, callback: (...args: any[]) => void) {
284	this.proxyEventHander('off', name, callback);	91✔
285	return this;	×
286	}
287
288	/**
289	* 事件代理: 事件处理
290	*/	91✔
291	private proxyEventHander(type: 'on' \| 'off' \| 'once', name: string, callback: (...args: any[]) => void) {	×
292	const sceneEvent = SceneEventList.find((event) => event.adaptation === name);
293	if (sceneEvent) {
294	this.scene[type](sceneEvent.original, callback);
295	} else if (MapEventList.indexOf(name) !== -1) {
296	this.scene[type](name, callback);	91✔
297	} else if (name.includes('Layer:')) {	×
298	const [module, eventName] = name.split(':');
299	const hasEventEmitter = this[module] && this[module][type];
300	if (hasEventEmitter && LayerEventList.indexOf(eventName) !== -1) {
301	this[module][type](eventName, callback);
302	} else {	91✔
303	throw new Error(`No event name "${name}"`);	×
304	}
305	} else {
306	super[type](name, callback);
307	}
308	}	91✔
309		×
310	/**
311	* 获取 scene 实例
312	*/
313	public getScene(): Scene {
314	return this.scene;
315	}	91✔
316		×
317	/**
318	* 获取 map 实例
319	*/
320	public getMap(): MapboxInstance \| AMapInstance \| unknown {
321	if (this.options.map?.type === BaseMapType.Amap) {	91✔
322	return this.scene.map as AMapInstance;	×
323	} else if (this.options.map?.type === BaseMapType.Mapbox) {
324	return this.scene.map as MapboxInstance;
325	} else {
326	return this.scene.map;
327	}	91✔
328	}	248✔
329		248✔
330	/**
331	* 添加图层
332	*/
333	public addLayer(layer: IPlotLayer) {
334	this.layerGroup.addLayer(layer);	91✔
335	}	12✔
336		12✔
337	/**
338	* 获取所有图层
339	* @deprecate
340	*/
341	public getLayes(): IPlotLayer[] {	91✔
342	console.warn('Replace to use getLayers()');	250✔
343	return this.getLayers();	250✔
344	}	250✔
345		250✔
346	/**	250✔
347	* 获取所有图层
348	*/
349	public getLayers(): IPlotLayer[] {
350	return this.layerGroup.getLayers();
351	}	91✔
352		12✔
353	/**	12!
354	* 根据图层名称获取图层	×
355	*/
356	public getLayerByName(name: string): IPlotLayer \| undefined {	12!
357	return this.layerGroup.getLayerByName(name);	×
358	}
359		12!
360	/**	×
361	* 移除图层
362	*/	12!
363	public removeLayer(layer: IPlotLayer) {	×
364	return this.layerGroup.removeLayer(layer);
365	}
366
367	/**
368	* 移除内置所有的图层
369	*/	91✔
370	public removeAllLayer() {	12!
371	this.layerGroup.removeAllLayer();	×
372	}
373		12✔
374	/**	12✔
375	* 地图放大一级
376	*/
377	public zoomIn() {
378	this.scene.zoomIn();
379	}	91✔
380		×
381	/**	×
382	* 地图缩小一级	×
383	*/
384	public zoomOut() {	×
385	this.scene.zoomOut();	×
386	}
387
388	/**
389	* 设置地图倾角
390	*/	91✔
391	public setPitch(pitch: number) {	237✔
392	this.scene.setPitch(pitch);	12✔
393	}	12✔
394
395	/**
396	* 设置地图缩放范围
397	*/
398	public fitBounds(bound: Bounds) {
399	this.scene.fitBounds(bound);	91✔
400	}	12!
401		×
402	/**
403	* 设置地图状态	12✔
404	* 可用来关闭地图的一些交互操作	12✔
405	*/
406	public setMapStatus(status: MapStatusOptions) {
407	this.scene.setMapStatus(status);
408	}
409		91✔
410	/**	×
411	* 设置场景的背景色	×
412	*/	×
413	public setBgColor(color: string) {
414	this.scene.setBgColor(color);	×
415	}	×
416
417	/**
418	* 初始化组件
419	*/
420	protected initComponents() {	91✔
421	this.initControls();	237✔
422	this.initTooltip();	12✔
423	}	12✔
424
425	/**
426	* 更新化组件
427	*/
428	protected updateComponents() {
429	this.updateControls();	91✔
430	this.initTooltip();	12!
431	}	×
432
433	/**	12✔
434	* 初始化控件	12✔
435	*/	12✔
436	protected initControls() {	12✔
437	const { zoom, scale, layerMenu, legend } = this.options;	12✔
438	scale && this.addScaleControl(scale);
439	zoom && this.addZoomControl(zoom);	12✔
440	layerMenu && this.addLayerMenuControl(layerMenu);	12✔
441	legend && this.addLegendControl(legend);
442	}
443
444	/**
445	* 更新控件	91✔
446	*/	×
447	protected updateControls() {	×
448	const { zoom, scale, layerMenu, legend } = this.options;	×
449	if (!isEqual(this.lastOptions.zoom, zoom)) {
450	zoom ? this.updateZoomControl(zoom) : this.removeZoomControl();	×
451	}	×
452	if (!isEqual(this.lastOptions.scale, scale)) {
453	scale ? this.updateScaleControl(scale) : this.removeScaleControl();
454	}
455	if (!isEqual(this.lastOptions.layerMenu, layerMenu)) {
456	layerMenu ? this.updateLayerMenuControl(layerMenu) : this.removeLayerMenuControl();	91✔
457	}	237✔
458	if (!isEqual(this.lastOptions.legend, legend)) {	12✔
459	legend ? this.updateLegendControl(legend) : this.removeLegendControl();	12✔
460	}
461	}
462
463	/**
464	* 添加 zoom 控件
465	*/
466	public addZoomControl(options: ZoomControlOptions) {	91✔
467	if (this.zoomControl) {	×
468	return;
469	}
470	this.zoomControl = new Zoom(options);
471	this.scene.addControl(this.zoomControl);
472	}	91✔
473		27!
474	/**	×
475	* 更新 zoom 控件
476	*/	27✔
477	public updateZoomControl(options: ZoomControlOptions) {	27✔
478	if (!this.zoomControl) {	27✔
479	this.addZoomControl(options);	27✔
480	return;	27✔
481	}	11✔
482	this.removeZoomControl();	11✔
483	this.addZoomControl(options);
484	}	16!
485		16✔
486	/**	16✔
487	* 移除 zoom 控件
488	*/	27!
489	public removeZoomControl() {	27✔
490	if (this.zoomControl) {	27✔
491	this.zoomControl.remove();
492	this.zoomControl = undefined;
493	}
494	}
495
496	/**	91✔
497	* 添加 scale 控件	×
498	*/	×
499	public addScaleControl(options: ScaleControlOptions) {	×
500	if (this.scaleControl) {
501	return;	×
502	}	×
503	this.scaleControl = new Scale(options);
504	this.scene.addControl(this.scaleControl);
505	}
506
507	/**	91✔
508	* 更新 scale 控件	225✔
509	*/	25✔
510	public updateScaleControl(options: ScaleControlOptions) {	25✔
511	if (!this.scaleControl) {
512	this.addScaleControl(options);
513	return;
514	}
515	this.removeScaleControl();
516	this.addScaleControl(options);	91✔
517	}	260✔
518		260!
519	/**	×
520	* 移除 scale 控件
521	*/	260✔
522	public removeScaleControl() {	260!
523	if (this.scaleControl) {	×
524	this.scaleControl.remove();	×
525	this.scaleControl = undefined;	×
526	}	×
527	}
528
529	/**
530	* 添加 layerMenu 控件
531	*/
532	public addLayerMenuControl(options: LayerMenuControlOptions) {	91✔
533	if (this.layerMenuControl) {	×
534	return;
535	}
536	const baseLayers = {};
537	const overlayers = {};
538	this.layerGroup.getLayers().forEach(({ name, layer }) => {	91✔
539	overlayers[name] = layer;
540	});
541	this.layerMenuControl = new Layers(Object.assign({}, options, { baseLayers, overlayers }));	225✔
542	this.scene.addControl(this.layerMenuControl);	225✔
543	}	225✔
544		225✔
545	/**	225✔
546	* 更新 layerMenu 控件	225!
547	*/	225✔
548	public updateLayerMenuControl(options: LayerMenuControlOptions) {
549	if (!this.layerMenuControl) {
550	this.addLayerMenuControl(options);
551	return;
552	}	91✔
553	this.removeLayerMenuControl();	91✔
554	this.addLayerMenuControl(options);
555	}	91✔
556
557	/**
558	* 移除 layerMenu 控件
559	*/
560	public removeLayerMenuControl() {
561	if (this.layerMenuControl) {
562	this.layerMenuControl.remove();
563	this.layerMenuControl = undefined;
564	}
565	}
566
567	/**
568	* 获取 legend 配置项
569	* 由各图各自实现，不同的图 legend 可能不同
570	*/
571	public getLegendOptions(): LegendOptions {
572	return {};
573	}
574
575	/**
576	* 添加 legend 控件
577	*/
578	public addLegendControl(options: LegendOptions) {
579	if (this.legendControl) {
580	return;
581	}
582	const legendTheme = this.theme['components'].legend;
583	const legendOptions: LegendOptions = deepAssign({}, this.getLegendOptions(), options);
584	const { type, position, ...rest } = legendOptions;
585	const items: LegendItem[] = [];
586	if (type === 'category') {
587	const options = deepAssign({}, { domStyles: legendTheme.category.domStyles }, rest);
588	items.push({ type, options });
589	} else if (type === 'continue') {
590	const options = deepAssign({}, { domStyles: legendTheme.continue.domStyles }, rest);
591	items.push({ type, options });
592	}
593
594	if (items.length) {
595	this.legendControl = new Legend({ position, items });
596	this.scene.addControl(this.legendControl);
597	}
598	}
599
600	/**
601	* 更新 legend 控件
602	*/
603	public updateLegendControl(options: LegendOptions) {
604	if (!this.legendControl) {
605	this.addLegendControl(options);
606	return;
607	}
608	this.removeLegendControl();
609	this.addLegendControl(options);
610	}
611
612	/**
613	* 移除 legend 控件
614	*/
615	public removeLegendControl() {
616	if (this.legendControl) {
617	this.legendControl.remove();
618	this.legendControl = undefined;
619	}
620	}
621
622	/**
623	* 初始化 tooltip
624	*/
625	protected initTooltip() {
626	if (this.tooltip) {
627	this.tooltip.destroy();
628	}
629	const { tooltip } = this.options;
630	if (tooltip) {
631	const options = deepAssign({}, { domStyles: this.theme['components'].tooltip.domStyles }, tooltip);
632	const interactionLayers = this.layerGroup.getInteractionLayers();
633	this.tooltip = new Tooltip(this.scene, interactionLayers, options);
634	this.tooltip.on('*', (event: Event) => this.emit(event.type, event));
635	}
636	}
637
638	/**
639	* 导出地图图片
640	*/
641	public exportPng(type?: 'png' \| 'jpg'): string {
642	return this.scene.exportPng(type);
643	}
644
645	/**
646	* 销毁
647	*/
648	public destroy() {
649	// TODO: 清空已经绑定其他的事件
650	super.off('*');
651	this.removeScaleControl();
652	this.removeZoomControl();
653	this.removeLayerMenuControl();
654	this.removeLegendControl();
655	this.tooltip?.destroy();
656	this.scene.destroy();
657	}
658	}

antvis / L7Plot / 1615058340

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous