diff --git a/build/rollup-plugin-miniapp.js b/build/rollup-plugin-miniapp.js new file mode 100644 index 0000000000..26180f910a --- /dev/null +++ b/build/rollup-plugin-miniapp.js @@ -0,0 +1,47 @@ +import inject from '@rollup/plugin-inject'; +import modify from '@rollup/plugin-modify'; + +const module = '@oasis-engine/miniprogram-adapter '; + +function register(name) { + return [module, name]; +} + +function resolveFile(filePath) { + return path.join(__dirname, '..', filePath); +} + +const adapterArray = [ + 'window', + 'atob', + 'devicePixelRatio', + 'document', + 'Element', + 'Event', + 'EventTarget', + 'HTMLCanvasElement', + 'HTMLElement', + 'HTMLMediaElement', + 'HTMLVideoElement', + 'Image', + 'navigator', + 'Node', + 'requestAnimationFrame', + 'cancelAnimationFrame', + 'screen', + 'XMLHttpRequest', + 'performance', +]; +const adapterVars = {}; + +adapterArray.forEach((name) => { + adapterVars[name] = register(name); +}); + +export default [ + inject(adapterVars), + modify({ + find: /^@antv\/l7-(.*)/, + replacement: resolveFile('packages/$1/src'), + }), +]; diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index e385275fb5..a5f0be27ad 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -162,8 +162,7 @@ export default class PickingService implements IPickingService { } this.alreadyInPicking = true; await this.pickingLayers(target); - // TODO: 触发图层更新渲染，同时传递更新类型 - this.layerService.renderLayers('picking'); + this.layerService.renderLayers(); this.alreadyInPicking = false; } diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index c266eaba61..afec8fcfb2 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -382,7 +382,7 @@ export interface ILayerService { getLayerByName(name: string): ILayer | undefined; remove(layer: ILayer, parentLayer?: ILayer): void; removeAllLayers(): void; - updateRenderOrder(): void; + updateLayerRenderList(): void; renderLayers(type?: string): void; getOESTextureFloat(): boolean; isMapDragging(): boolean; diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 2bbc5ca7ee..f3ef21a8e3 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -17,16 +17,14 @@ export default class LayerService implements ILayerService { private layers: ILayer[] = []; + private layerList: ILayer[] = []; + private layerRenderID: number; private sceneInited: boolean = false; private animateInstanceCount: number = 0; - private lastRenderType: string; - - private lastPickRenderTime: number; - @inject(TYPES.IRendererService) private readonly renderService: IRendererService; @@ -41,6 +39,7 @@ export default class LayerService implements ILayerService { layer.init(); } this.layers.push(layer); + this.updateLayerRenderList(); } public initLayers() { @@ -50,6 +49,7 @@ export default class LayerService implements ILayerService { layer.init(); } }); + this.updateLayerRenderList(); } public getLayers(): ILayer[] { @@ -77,7 +77,7 @@ export default class LayerService implements ILayerService { this.layers.splice(layerIndex, 1); } } - + this.updateLayerRenderList(); layer.emit('remove', null); layer.destroy(); this.renderLayers(); @@ -87,46 +87,42 @@ export default class LayerService implements ILayerService { this.destroy(); } - public renderLayers(renderType?: string) { - // TODO: 每次渲染的时候都需要进行渲染判断，判断是否进行渲染 - // 没有传递 type 参数时默认触发的是地图事件，优先级最高，直接渲染 - if (!this.renderTest(renderType)) { - return; - } - + public renderLayers() { if (this.alreadyInRendering) { return; } this.alreadyInRendering = true; this.clear(); - this.updateRenderOrder(); + this.layerList.forEach((layer) => { + layer.hooks.beforeRenderData.call(); + layer.hooks.beforeRender.call(); + layer.render(); + layer.hooks.afterRender.call(); + }); + this.alreadyInRendering = false; + } + + public updateLayerRenderList() { + // TODO: 每次更新都是从 layers 重新构建 + this.layerList = []; this.layers .filter((layer) => layer.inited) .filter((layer) => layer.isVisible()) .forEach((layer) => { + this.layerList.push(layer); + // Tip: 渲染 layer 的子图层 默认 layerChildren 为空数组 表示没有子图层 目前只有 ImageTileLayer 有子图层 - renderLayerEvent(layer.layerChildren); - renderLayerEvent([layer]); + layer.layerChildren + .filter((childlayer) => childlayer.inited) + .filter((childlayer) => childlayer.isVisible()) + .forEach((childlayer) => { + this.layerList.push(childlayer); + }); }); - this.alreadyInRendering = false; - - function renderLayerEvent(layers: ILayer[]) { - layers - .filter((layer) => layer.inited) - .filter((layer) => layer.isVisible()) - .forEach((layer) => { - // trigger hooks - layer.hooks.beforeRenderData.call(); - layer.hooks.beforeRender.call(); - layer.render(); - layer.hooks.afterRender.call(); - }); - } - } - public updateRenderOrder() { - this.layers.sort((pre: ILayer, next: ILayer) => { + // 根据 zIndex 对渲染顺序进行排序 + this.layerList.sort((pre: ILayer, next: ILayer) => { return pre.zIndex - next.zIndex; }); } @@ -141,6 +137,7 @@ export default class LayerService implements ILayerService { layer.destroy(); }); this.layers = []; + this.layerList = []; this.renderLayers(); } @@ -172,56 +169,6 @@ export default class LayerService implements ILayerService { this.layerRenderID = requestAnimationFrame(this.runRender.bind(this)); } - // 渲染检测 - private renderTest(renderType: string | undefined): boolean { - const now = new Date().getTime(); - const betweenPickRenderTime = now - this.lastPickRenderTime; - if (renderType === 'picking') { - this.lastPickRenderTime = new Date().getTime(); - } - - // 继续渲染事件 - if (renderType) { - switch (renderType) { - case 'picking': - // return false; - // TODO: picking 类型的渲染事件 - // 若是上次触发为地图触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染 - if ( - this.lastRenderType === 'mapRender' || - this.lastRenderType === 'animate' - ) { - this.lastRenderType = 'picking'; - // 如果上一次触发的事件在 48 ms 以上，则这一次不放弃触发 - if (betweenPickRenderTime > 48) { - return true; - } else { - return false; - } - } else { - this.lastRenderType = 'picking'; - return true; - } - case 'animate': - // return false; - if (this.lastRenderType === 'mapRender') { - this.lastRenderType = 'animate'; - return false; - } else { - this.lastRenderType = 'animate'; - return true; - } - case 'mapRender': - this.lastRenderType = 'mapRender'; - return true; - default: - return true; - } - // TODO: 地图触发的渲染优先级最高，动画其次，拾取最次 - } - return true; - } - private clear() { const color = rgb2arr(this.mapService.bgColor) as [ number, diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts index b35551e25e..44866963a0 100644 --- a/packages/core/src/services/scene/ISceneService.ts +++ b/packages/core/src/services/scene/ISceneService.ts @@ -15,7 +15,7 @@ export interface ISceneService { initMiniScene(config: IMapConfig & IRenderConfig): void; addLayer(layer: ILayer): void; getSceneConfig(): Partial; - render(type?: string): void; + render(): void; getSceneContainer(): HTMLDivElement; getMarkerContainer(): HTMLElement; exportPng(type?: 'png' | 'jpg'): string; diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index bc145fdadf..d0a57caf96 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -298,7 +298,7 @@ export default class Scene extends EventEmitter implements ISceneService { this.render(); } - public async render(renderType?: string) { + public async render() { if (this.rendering || this.destroyed) { return; } @@ -325,7 +325,7 @@ export default class Scene extends EventEmitter implements ISceneService { } // 尝试初始化未初始化的图层 - this.layerService.renderLayers(renderType); + this.layerService.renderLayers(); // 组件需要等待layer 初始化完成之后添加 this.rendering = false; @@ -457,7 +457,7 @@ export default class Scene extends EventEmitter implements ISceneService { private handleMapCameraChanged = (viewport: IViewport) => { this.cameraService.update(viewport); - this.render('mapRender'); + this.render(); }; private addSceneEvent(target: IInteractionTarget) { diff --git a/packages/layers/package.json b/packages/layers/package.json index bc22dca19b..34cc66bbb0 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -23,7 +23,6 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/async-hook": "^2.1.0", "@antv/geo-coord": "^1.0.8", "@antv/l7-core": "^2.5.43", "@antv/l7-source": "^2.5.43", diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 49d8bf3a75..754579e8b3 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -667,7 +667,8 @@ export default class BaseLayer extends EventEmitter } public setIndex(index: number): ILayer { this.zIndex = index; - this.layerService.updateRenderOrder(); + this.layerService.updateLayerRenderList(); + this.layerService.renderLayers(); return this; } diff --git a/packages/layers/src/plugins/LayerStylePlugin.ts b/packages/layers/src/plugins/LayerStylePlugin.ts index aa02a8b6df..b68e317995 100644 --- a/packages/layers/src/plugins/LayerStylePlugin.ts +++ b/packages/layers/src/plugins/LayerStylePlugin.ts @@ -1,5 +1,4 @@ import { ILayer, ILayerPlugin, IMapService, TYPES } from '@antv/l7-core'; -import { encodePickingColor, rgb2arr } from '@antv/l7-utils'; import { injectable } from 'inversify'; import 'reflect-metadata'; /**