fix: init hooks

This commit is contained in:
象数 2022-10-13 15:55:19 +08:00
parent 8a98f79b16
commit 3b2817595f
38 changed files with 128 additions and 96 deletions

View File

@ -124,6 +124,7 @@ export default () => {
scene.on('loaded', () => {
scene.addLayer(layer);
scene.render();
});
}, []);
return (

View File

@ -120,6 +120,7 @@ export default () => {
scene.addLayer(dotPoint);
scene.addLayer(flyLine2);
scene.addLayer(flyLine);
});
});
}, []);

View File

@ -55,6 +55,7 @@ export default () => {
});
scene.addLayer(pointLayer);
scene.render();
},
)
})

View File

@ -1,5 +1,5 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { useEuropeData, addEuropeLayers } from './useLine';
@ -9,7 +9,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new Map({
pitch: 0,
style: 'light',
center: [-96, 37.8],

View File

@ -1,5 +1,5 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { useData, addLayers } from './useLine';
@ -9,7 +9,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new Map({
pitch: 0,
style: 'light',
center: [-96, 37.8],

View File

@ -1,5 +1,5 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { useData, addLayers } from './useLine';
@ -9,7 +9,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new Map({
pitch: 0,
style: 'light',
center: [-96, 37.8],

View File

@ -1,5 +1,5 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { useData, addLayers } from './useLine';
@ -9,7 +9,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new Map({
pitch: 0,
style: 'light',
center: [-96, 37.8],

View File

@ -1,5 +1,5 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { useData, addLayers } from './useLine';
@ -9,7 +9,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new Map({
pitch: 0,
style: 'light',
center: [-96, 37.8],

View File

@ -1,5 +1,5 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { useData, addLayers } from './useLine';
@ -9,7 +9,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new Map({
pitch: 0,
style: 'light',
center: [-96, 37.8],

View File

@ -1,5 +1,5 @@
// @ts-ignore
import { SyncBailHook, SyncHook, SyncWaterfallHook } from '@antv/async-hook';
import { SyncBailHook, SyncHook, SyncWaterfallHook,AsyncSeriesBailHook } from '@antv/async-hook';
import { IColorRamp, Tile, TilesetManager } from '@antv/l7-utils';
import { Container } from 'inversify';
import Clock from '../../utils/clock';
@ -282,7 +282,7 @@ export interface ILayer {
encodeDataLength: number;
pickedFeatureID: number | null;
hooks: {
init: SyncBailHook;
init: AsyncSeriesBailHook;
afterInit: SyncBailHook;
beforeRenderData: SyncWaterfallHook;
beforeRender: SyncBailHook;
@ -354,7 +354,7 @@ export interface ILayer {
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
): void;
init(): ILayer;
init(): Promise<void>;
scale(field: string | number | IScaleOptions, cfg?: IScale): ILayer;
getScale(name: string): any;
size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
@ -607,7 +607,7 @@ export interface ILayerService {
clear(): void;
add(layer: ILayer): void;
addMask(mask: ILayer): void;
initLayers(): void;
initLayers(): Promise<void>;
startAnimate(): void;
stopAnimate(): void;
getSceneInited(): boolean;

View File

@ -49,12 +49,23 @@ export default class LayerService implements ILayerService {
public add(layer: ILayer) {
// if (this.sceneInited) {
// layer.init();
// }
// todo
if (this.sceneInited) {
layer.on('inited',()=>{
this.updateLayerRenderList();
this.renderLayers();
})
layer.init();
}
this.layers.push(layer);
this.updateLayerRenderList();
// this.updateLayerRenderList();
}
public addMask(mask: ILayer) {
@ -63,14 +74,15 @@ export default class LayerService implements ILayerService {
}
}
public initLayers() {
public async initLayers() {
this.sceneInited = true;
this.layers.forEach((layer) => {
this.layers.forEach(async (layer) => {
if (!layer.inited) {
layer.init();
await layer.init();
this.updateLayerRenderList();
}
});
this.updateLayerRenderList();
}
public getSceneInited() {
@ -134,7 +146,6 @@ export default class LayerService implements ILayerService {
}
this.alreadyInRendering = true;
this.clear();
for (const layer of this.layerList) {
layer.hooks.beforeRenderData.call();
layer.hooks.beforeRender.call();
@ -168,8 +179,7 @@ export default class LayerService implements ILayerService {
public updateLayerRenderList() {
// Tip: 每次更新都是从 layers 重新构建
this.layerList = [];
this.layers
.filter((layer) => layer.inited)
this.layers.filter((layer) => layer.inited)
.filter((layer) => layer.isVisible())
.sort((pre: ILayer, next: ILayer) => {
// 根据 zIndex 对渲染顺序进行排序

View File

@ -314,9 +314,8 @@ export default class Scene extends EventEmitter implements ISceneService {
if (this.destroyed) {
this.destroy();
}
// FIXME: 初始化 marker 容器,可以放到 map 初始化方法中?
this.layerService.initLayers();
await this.layerService.initLayers();
this.controlService.addControls();
this.loaded = true;
this.emit('loaded');
@ -324,6 +323,7 @@ export default class Scene extends EventEmitter implements ISceneService {
}
// 尝试初始化未初始化的图层
this.layerService.initLayers();
this.layerService.updateLayerRenderList();
this.layerService.renderLayers();

View File

@ -1,6 +1,7 @@
import { TilesetManager } from '@antv/l7-utils';
import { BBox } from '@turf/helpers';
export type DataType = string | object[] | object;
export type SourceEventType = 'inited' | 'sourceUpdate'
export interface IParserCfg {
type: string;
x?: string;
@ -83,9 +84,9 @@ export interface ISource {
): void;
destroy(): void;
// Event
on(type: string, handler: (...args: any[]) => void): void;
off(type: string, handler: (...args: any[]) => void): void;
once(type: string, handler: (...args: any[]) => void): void;
on(type: SourceEventType | string, handler: (...args: any[]) => void): void;
off(type: SourceEventType | string, handler: (...args: any[]) => void): void;
once(type: SourceEventType | string, handler: (...args: any[]) => void): void;
}
export interface IRasterCfg {
extent: [number, number, number, number];

View File

@ -1,5 +1,10 @@
// @ts-ignore
import { SyncBailHook, SyncHook, SyncWaterfallHook } from '@antv/async-hook';
import {
SyncBailHook,
SyncHook,
SyncWaterfallHook,
AsyncSeriesBailHook,
} from '@antv/async-hook';
import {
BlendType,
IActiveOption,
@ -104,7 +109,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
};
// 生命周期钩子
public hooks = {
init: new SyncBailHook(),
init: new AsyncSeriesBailHook(),
afterInit: new SyncBailHook(),
beforeRender: new SyncBailHook(),
beforeRenderData: new SyncWaterfallHook(),
@ -305,7 +310,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
return this;
}
public init() {
public async init(): Promise<void> {
// 设置配置项
const sceneId = this.container.get<string>(TYPES.SceneID);
// 初始化图层配置项
@ -403,10 +408,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
}
// 触发 init 生命周期插件
this.hooks.init.call();
await this.hooks.init.promise();
// this.pickingPassRender = this.normalPassFactory('pixelPicking');
// this.pickingPassRender.init(this);
this.hooks.afterInit.call();
this.inited = true;
// 触发初始化完成事件;
this.emit('inited', {
target: this,
@ -416,8 +423,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
target: this,
type: 'add',
});
return this;
}
public updateModelData(data: IAttributeAndElements) {

View File

@ -24,7 +24,7 @@ export default class MaskLayer extends BaseLayer<IMaskLayerStyleOptions> {
};
};
public init() {
public async init(): Promise<void> {
// 设置配置项
const sceneId = this.container.get<string>(TYPES.SceneID);
@ -95,10 +95,11 @@ export default class MaskLayer extends BaseLayer<IMaskLayerStyleOptions> {
}
// 触发 init 生命周期插件
this.hooks.init.call();
await this.hooks.init.promise();
this.hooks.afterInit.call();
return this;
this.inited = true;
this.emit('inited');
// TODO
}
public buildModels() {

View File

@ -31,16 +31,9 @@ export default class DataMappingPlugin implements ILayerPlugin {
styleAttributeService,
}: { styleAttributeService: IStyleAttributeService },
) {
layer.hooks.init.tap('DataMappingPlugin', () => {
layer.hooks.init.tapPromise('DataMappingPlugin', async () => {
// 初始化重新生成 map
const source = layer.getSource();
if (source.inited) {
this.generateMaping(layer, { styleAttributeService });
} else {
source.once('sourceUpdate', () => {
this.generateMaping(layer, { styleAttributeService });
});
}
this.generateMaping(layer, { styleAttributeService });
});
layer.hooks.beforeRenderData.tap('DataMappingPlugin', () => {

View File

@ -8,20 +8,28 @@ export default class DataSourcePlugin implements ILayerPlugin {
protected mapService: IMapService;
public apply(layer: ILayer) {
this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService);
layer.hooks.init.tap('DataSourcePlugin', () => {
layer.hooks.init.tapPromise('DataSourcePlugin', async () => {
let source = layer.getSource();
if (!source) {
// Tip: 用户没有传入 source 的时候使用图层的默认数据
const { data, options } =
layer.sourceOption || layer.defaultSourceConfig;
source = new Source(data, options);
layer.setSource(source);
await new Promise((resolve) => {
source.on('inited', () => {
layer.setSource(source);
resolve(null);
});
});
}
if (source.inited) {
this.updateClusterData(layer);
} else {
source.once('sourceUpdate', () => {
this.updateClusterData(layer);
await new Promise((resolve) => {
source.on('inited', () => {
this.updateClusterData(layer);
resolve(null);
});
});
}
});

View File

@ -59,17 +59,15 @@ export default class FeatureScalePlugin implements ILayerPlugin {
styleAttributeService,
}: { styleAttributeService: IStyleAttributeService },
) {
layer.hooks.init.tap('FeatureScalePlugin', () => {
layer.hooks.init.tapPromise('FeatureScalePlugin', async () => {
this.scaleOptions = layer.getScaleOptions();
const attributes = styleAttributeService.getLayerStyleAttributes();
this.getSourceData(layer, ({ dataArray }) => {
if (Array.isArray(dataArray) && dataArray.length === 0) {
return;
} else {
this.caculateScalesForAttributes(attributes || [], dataArray);
}
});
const dataArray = layer.getSource()?.data.dataArray;
if (Array.isArray(dataArray) && dataArray.length === 0) {
return;
} else {
this.caculateScalesForAttributes(attributes || [], dataArray);
}
});
// 检测数据是否需要更新

View File

@ -25,8 +25,9 @@ export default class LayerModelPlugin implements ILayerPlugin {
}
public apply(layer: ILayer) {
layer.hooks.init.tap('LayerModelPlugin', () => {
layer.inited = true;
layer.hooks.init.tapPromise('LayerModelPlugin', () => {
// TODO
// layer.inited = true;
layer.modelLoaded = false;
const source = layer.getSource();
if (source.inited) {

View File

@ -38,7 +38,7 @@ export default class MultiPassRendererPlugin implements ILayerPlugin {
normalPassFactory: (name: string) => IPass<unknown>;
},
) {
layer.hooks.init.tap('MultiPassRendererPlugin', () => {
layer.hooks.init.tapPromise('MultiPassRendererPlugin', () => {
const { enableMultiPassRenderer, passes = [] } = layer.getLayerConfig();
// SceneConfig 的 enableMultiPassRenderer 配置项可以统一关闭

View File

@ -33,7 +33,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
},
) {
// TODO: 由于 Shader 目前无法根据是否开启拾取进行内容修改,因此即使不开启也需要生成 a_PickingColor
layer.hooks.init.tap('PixelPickingPlugin', () => {
layer.hooks.init.tapPromise('PixelPickingPlugin', () => {
const { enablePicking } = layer.getLayerConfig();
styleAttributeService.registerStyleAttribute({
name: 'pickingColor',

View File

@ -20,7 +20,7 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
styleAttributeService,
}: { styleAttributeService: IStyleAttributeService },
) {
layer.hooks.init.tap('RegisterStyleAttributePlugin', () => {
layer.hooks.init.tapPromise('RegisterStyleAttributePlugin', () => {
this.registerBuiltinAttributes(styleAttributeService, layer);
});
}

View File

@ -13,7 +13,7 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
styleAttributeService,
}: { styleAttributeService: IStyleAttributeService },
) {
layer.hooks.init.tap('UpdateStyleAttributePlugin', () => {
layer.hooks.init.tapPromise('UpdateStyleAttributePlugin', () => {
this.initStyleAttribute(layer, { styleAttributeService });
});
@ -22,7 +22,7 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
if (
layer.layerModelNeedUpdate ||
layer.tileLayer ||
usage === 'basemap'
usage === 'basemap' // TODO: Chore 不走该流程 应从外部统一控制,而不是打补丁
) {
return;
}

View File

@ -15,6 +15,7 @@ import { generateColorRamp, IColorRamp } from '@antv/l7-utils';
import { getLayerShape, getMaskValue, updateLayersConfig } from '../utils';
import TileConfigManager, { ITileConfigManager } from './tileConfigManager';
import TilePickManager from './tilePickerManager';
// TODO: 命名问题,基类和父类看不出关联性 tile-tilelayer 概念混淆
export class TileLayerManager extends TileManager implements ITileLayerManager {
public tilePickManager: ITilePickManager;
public tileConfigManager: ITileConfigManager;

View File

@ -26,7 +26,7 @@ export default class TilePickManager extends EventEmitter
this.pickingService = pickingService;
this.children = children;
}
// TODO:chore: 命名问题什么叫normal render
/**
*
* @param layers

View File

@ -84,6 +84,7 @@ export default class TileFactory implements ITileFactory {
let geofeatures = [];
if(layerType === 'LineLayer' && shape === 'simple') {
features.map(feature => {
const cloneFeature = clone(feature);
if(cloneFeature.geometry.type === 'MultiPolygon') {
// @ts-ignore
@ -190,7 +191,8 @@ export default class TileFactory implements ITileFactory {
layer.addMaskLayer(masklayer);
}
// regist layer
// regist layer
registerLayers(this.parentLayer, layers);
this.layers = [layer];
@ -278,7 +280,7 @@ export default class TileFactory implements ITileFactory {
protected emitEvent(layers: ILayer[], isVector?: boolean) {
layers.map((layer) => {
layer.once('modelLoaded', () => {
layer.on('inited', () => {
layer.on('click', (e) => {
this.eventCache.click = 1;
if (this.parentLayer.type === 'RasterLayer') {
@ -390,6 +392,7 @@ export default class TileFactory implements ITileFactory {
isVector?: boolean,
tile?: any,
) {
if (isVector === false) {
// raster tile get rgb
// e.pickedColors = readPixel(e.x, e.y, this.rendererService);

View File

@ -29,7 +29,8 @@ export default class VectorLineTile extends TileFactory {
vectorTileLayer,
source: source as Source,
});
layer.once('modelLoaded', () => {
layer.on('inited', () => {
tile.layerLoad();
})
return {

View File

@ -30,7 +30,7 @@ export default class VectorMaskTile extends TileFactory {
source: source as Source,
needListen: false
});
layer.once('modelLoaded', () => {
layer.on('inited', () => {
tile.layerLoad();
})
return {

View File

@ -30,7 +30,8 @@ export default class VectorPointTile extends TileFactory {
source: source as Source,
needListen: false
});
layer.once('modelLoaded', () => {
// layer.once('modelLoaded', ()
layer.on('inited', () => {
tile.layerLoad();
})
return {

View File

@ -29,7 +29,7 @@ export default class VectorPolygonTile extends TileFactory {
vectorTileLayer,
source: source as Source,
});
layer.once('modelLoaded', () => {
layer.on('inited', () => {
tile.layerLoad();
})
return {

View File

@ -21,12 +21,12 @@ export default class RasterTile extends TileFactory {
});
const layer = this.createLayer({
L7Layer: ImageLayer,
L7Layer: ImageLayer,
tile,
initOptions,
source,
});
layer.once('modelLoaded', () => {
layer.on('inited', () => {
tile.layerLoad();
})
return {

View File

@ -47,7 +47,6 @@ export default class RasterTiffTile extends TileFactory {
.style({
colorTexture,
opacity,
// TODO: 目前从 domain 从父瓦片图层的 style 进行配置,后续考虑从每个时机请求的栅格文件中进行配置
domain,
clampHigh,
clampLow,
@ -55,7 +54,7 @@ export default class RasterTiffTile extends TileFactory {
this.emitEvent([layer], false);
registerLayers(this.parentLayer, [layer]);
layer.once('modelLoaded', () => {
layer.on('inited', () => {
tile.layerLoad();
})
return {

View File

@ -42,7 +42,7 @@ export default class VectorLayer extends BaseLayer<
private pickedID: number | null = null;
public init() {
public async init(): Promise<void> {
// 设置配置项
const sceneId = this.container.get<string>(TYPES.SceneID);
this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
@ -118,10 +118,18 @@ export default class VectorLayer extends BaseLayer<
}
// 触发 init 生命周期插件
this.hooks.init.call();
await this.hooks.init.promise();
this.inited = true;
this.hooks.afterInit.call();
this.emit('inited', {
target: this,
type: 'inited',
});
this.emit('add', {
target: this,
type: 'add',
});
return this;
}
public renderModels(isPicking?: boolean) {
@ -213,7 +221,6 @@ export default class VectorLayer extends BaseLayer<
return pointFillModel;
}
}
protected getConfigSchema() {
return {
properties: {

View File

@ -10,7 +10,6 @@ import {
import { Tile, TilesetManager } from '@antv/l7-utils';
import { BaseMapTileLayerManager } from '../manager/baseMapTileLayerManager';
import { debounce } from 'lodash';
export default class BaseTileLayer implements IBaseTileLayer {
public get children() {
return this.tileLayerManager.children;

View File

@ -28,7 +28,6 @@ export class TMSTileLayer extends BaseTileLayer {
);
tile.parentLayerIDList.push(this.parent.id);
tile.layerIDList.push(...layerIDList);
this.tileLayerManager.addChilds(layers);
this.setPickState(layers);
} else {

View File

@ -167,6 +167,7 @@ export function tileAllLoad(tile: Tile, callback: () => void) {
}, 36);
}
// TODO 类方法 不是util
export function updateLayersConfig(layers: ILayer[], key: string, value: any) {
layers.map((layer) => {
if (key === 'mask') {
@ -201,7 +202,6 @@ function updateImmediately(layers: ILayer[]) {
});
return immediately;
}
export function updateTileVisible(
tile: Tile,
layers: ILayer[],

View File

@ -75,7 +75,10 @@ export default class Source extends EventEmitter implements ISource {
this.originData = data;
this.initCfg(cfg);
this.init();
this.init().then(()=>{
this.inited = true;
this.emit('inited')
});
}
public getClusters(zoom: number): any {
@ -187,7 +190,10 @@ export default class Source extends EventEmitter implements ISource {
this.originData = data;
this.dataArrayChanged = false;
this.initCfg(options);
this.init();
this.init().then(()=>{
this.emit('sourceUpdate')
});
}
public destroy() {
@ -199,7 +205,7 @@ export default class Source extends EventEmitter implements ISource {
this.tileset?.destroy();
}
private handleData() {
private async handleData() {
return new Promise((resolve, reject) => {
try {
this.excuteParser();
@ -233,13 +239,10 @@ export default class Source extends EventEmitter implements ISource {
}
}
private init() {
private async init() {
// this.hooks.init.call(this);
this.inited = false;
this.handleData().then(() => {
this.inited = true;
this.emit('sourceUpdate');
});
await this.handleData();
}
/**

View File

@ -1,5 +1,4 @@
import { IParserData } from '@antv/l7-core';
type CallBack = (...args: any[]) => any;
export function map(data: IParserData, options: { [key: string]: any }) {
const { callback } = options;
if (callback) {