refactor: 地图渲染器改为与 LayerState 绑定

packages-user/client-modules/src/render/elements/index.ts

@@ -8,6 +8,7 @@ import { Animate } from './animate';
 import { createItemDetail } from './itemDetail';
 import { logger } from '@motajs/common';
 import { MapRender } from '../map/element';
+import { state } from '@user/data-state';
 
 export function createElements() {
     createCache();
@@ -71,14 +72,14 @@ export function createElements() {
     tagMap.register('map-render', (_0, _1, props) => {
         if (!props) {
             logger.error(42);
-            return new MapRender([]);
+            return new MapRender(state.layer);
         }
-        const { layerList } = props;
-        if (!layerList) {
+        const { layerState } = props;
+        if (!layerState) {
             logger.error(42);
-            return new MapRender([]);
+            return new MapRender(state.layer);
         }
-        return new MapRender(layerList);
+        return new MapRender(layerState);
     });
 }
 

packages-user/client-modules/src/render/elements/props.ts

@@ -11,7 +11,7 @@ import {
 import { EAnimateEvent } from './animate';
 import { EIconEvent, EWinskinEvent } from './misc';
 import { IEnemyCollection } from '@motajs/types';
-import { IRenderLayerData } from '../map/element';
+import { ILayerState } from '@user/data-state';
 
 export interface AnimateProps extends BaseProps {}
 
@@ -62,7 +62,7 @@ export interface LayerProps extends BaseProps {
 }
 
 export interface MapRenderProps extends BaseProps {
-    layerList: Iterable<IRenderLayerData>;
+    layerState: ILayerState;
 }
 
 declare module 'vue/jsx-runtime' {

packages-user/client-modules/src/render/map/element.ts

@@ -3,26 +3,13 @@ import {
     RenderItem,
     Transform
 } from '@motajs/render-core';
-import { IMapLayer } from '@user/data-state';
-import {
-    IMapRenderer,
-    IMapRendererExtends,
-    MapTileAlign,
-    MapTileBehavior
-} from './types';
+import { ILayerState, state } from '@user/data-state';
+import { IMapRenderer, IMapRendererHooks } from './types';
 import { MapRenderer } from './renderer';
 import { materials } from '@user/client-base';
 import { ElementNamespace, ComponentInternalInstance } from 'vue';
 import { CELL_HEIGHT, CELL_WIDTH, MAP_HEIGHT, MAP_WIDTH } from '../shared';
-
-export interface IRenderLayerData {
-    /** 图层对象 */
-    readonly layer: IMapLayer;
-    /** 图层纵深 */
-    readonly zIndex: number;
-    /** 图层别名 */
-    readonly alias?: string;
-}
+import { IHookController } from '@motajs/common';
 
 export class MapRender extends RenderItem {
     /** 地图渲染器 */
@@ -35,43 +22,31 @@ export class MapRender extends RenderItem {
     /** 画布上下文 */
     readonly gl: WebGL2RenderingContext;
 
-    constructor(layerList: Iterable<IRenderLayerData>) {
+    private rendererHook: IHookController<IMapRendererHooks>;
+
+    constructor(readonly layerState: ILayerState) {
         super('static');
 
         this.canvas = document.createElement('canvas');
         const gl = this.canvas.getContext('webgl2')!;
         this.gl = gl;
 
-        this.renderer = new MapRenderer(materials, this.gl, this.camera);
-        for (const layer of layerList) {
-            this.renderer.addLayer(layer.layer, layer.alias);
-            this.renderer.setZIndex(layer.layer, layer.zIndex);
-        }
+        this.renderer = new MapRenderer(
+            materials,
+            this.gl,
+            this.camera,
+            state.layer
+        );
+        this.renderer.setLayerState(layerState);
         this.renderer.useAsset(materials.trackedAsset);
-        this.renderer.addExtends(new MapUpdateExtends(this));
-
-        this.renderer.setTileBackground(1);
-
+        this.rendererHook = this.renderer.addHook(new RendererUpdateHook(this));
+        this.rendererHook.load();
         this.renderer.setCellSize(CELL_WIDTH, CELL_HEIGHT);
         this.renderer.setRenderSize(MAP_WIDTH, MAP_HEIGHT);
 
         gl.viewport(0, 0, this.canvas.width, this.canvas.height);
     }
 
-    /**
-     * 更新图层列表
-     * @param layerList 图层列表
-     */
-    updateLayerList(layerList: Iterable<IRenderLayerData>) {
-        this.renderer
-            .getSortedLayer()
-            .forEach(v => this.renderer.removeLayer(v));
-        for (const layer of layerList) {
-            this.renderer.addLayer(layer.layer, layer.alias);
-            this.renderer.setZIndex(layer.layer, layer.zIndex);
-        }
-    }
-
     private sizeGL(width: number, height: number) {
         const ratio = this.highResolution ? devicePixelRatio : 1;
         const scale = ratio * this.scale;
@@ -115,8 +90,8 @@ export class MapRender extends RenderItem {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
-            case 'layerList': {
-                this.updateLayerList(nextValue);
+            case 'layerState': {
+                this.renderer.setLayerState(nextValue);
                 break;
             }
         }
@@ -124,7 +99,7 @@ export class MapRender extends RenderItem {
     }
 }
 
-class MapUpdateExtends implements IMapRendererExtends {
+class RendererUpdateHook implements Partial<IMapRendererHooks> {
     constructor(readonly element: MapRender) {}
 
     onUpdate(): void {

packages-user/client-modules/src/render/map/renderer.ts

@@ -17,7 +17,7 @@ import {
     IMapBackgroundConfig,
     IMapRenderConfig,
     IMapRenderer,
-    IMapRendererExtends,
+    IMapRendererHooks,
     IMapVertexGenerator,
     IMapViewportController,
     IMovingBlock,
@@ -26,13 +26,13 @@ import {
     MapTileBehavior,
     MapTileSizeTestMode
 } from './types';
+import { ILayerState, ILayerStateHooks, IMapLayer } from '@user/data-state';
 import {
-    IMapLayer,
-    IMapLayerData,
-    IMapLayerExtends,
-    IMapLayerExtendsController
-} from '@user/data-state';
-import { logger } from '@motajs/common';
+    Hookable,
+    HookController,
+    IHookController,
+    logger
+} from '@motajs/common';
 import { compileProgramWith } from '@motajs/client-base';
 import { isNil, maxBy } from 'lodash-es';
 import { IMapDataGetter, MapVertexGenerator } from './vertex';
@@ -57,23 +57,8 @@ const enum BackgroundType {
     Tile
 }
 
-interface ILayerRenderData {
-    /** 顶点数组，与总的数组共享 ArrayBuffer */
-    readonly vertexArray: Float32Array;
-    /** 偏移数组，与总的数组共享 ArrayBuffer */
-    readonly offsetArray: Int16Array;
-
-    /** 顶点数组在原数组的起始索引值 */
-    readonly vertexStart: number;
-    /** 顶点数组在原数组的终止索引值 */
-    readonly vertexEnd: number;
-    /** 偏移数组在原数组的起始索引值 */
-    readonly offsetStart: number;
-    /** 偏移数组在原数组的终止索引值 */
-    readonly offsetEnd: number;
-}
-
 export class MapRenderer
+    extends Hookable<IMapRendererHooks>
     implements
         IMapRenderer,
         IMovingRenderer,
@@ -99,17 +84,10 @@ export class MapRenderer
     assetWidth: number = 4096;
     assetHeight: number = 4096;
 
-    /** 拓展列表 */
-    private readonly extendList: Set<IMapRendererExtends> = new Set();
+    layerState: ILayerState;
+    /** 地图状态钩子控制器 */
+    private layerStateHook: IHookController<ILayerStateHooks>;
 
-    /** 这个渲染器添加的图层 */
-    readonly layers: Set<IMapLayer> = new Set();
-    /** 图层的 zIndex 映射 */
-    private layerZIndex: Map<IMapLayer, number> = new Map();
-    /** 图层的别名 */
-    private layerAlias: Map<string, IMapLayer> = new Map();
-    /** 图层到其对应别名的映射 */
-    private layerAliasInv: Map<IMapLayer, string> = new Map();
     /** 排序后的图层 */
     private sortedLayers: IMapLayer[] = [];
     /** 图层到排序索引的映射 */
@@ -171,14 +149,12 @@ export class MapRenderer
     /** 是否应该更新偏移池 uniform */
     private needUpdateOffsetPool: boolean = true;
 
-    /** 地图渲染数据 */
-    private layerData: Map<IMapLayer, ILayerRenderData> = new Map();
-    /** 地图拓展映射 */
-    private layerController: Map<IMapLayer, IMapLayerExtendsController>;
     /** 顶点数组的图层列表是否需要更新 */
-    private layerDirty: boolean = false;
+    private layerListDirty: boolean = false;
     /** 顶点数组的图层的尺寸是否需要更新 */
     private layerSizeDirty: boolean = false;
+    /** 是否整个地图都需要更新，一般只有在地图尺寸等发生变动时才会执行 */
+    private layerAllDirty: boolean = false;
 
     /** 所有正在移动的图块 */
     private movingBlock: Set<IMovingBlock> = new Set();
@@ -223,8 +199,15 @@ export class MapRenderer
     constructor(
         readonly manager: IMaterialManager,
         readonly gl: WebGL2RenderingContext,
-        readonly transform: Transform
+        readonly transform: Transform,
+        layerState: ILayerState
     ) {
+        super();
+        this.layerState = layerState;
+        this.layerStateHook = layerState.addHook(
+            new RendererLayerStateHook(this)
+        );
+        this.layerStateHook.load();
         // 上下文初始化要依赖于 offsetPool，因此提前调用
         const offsetPool = this.getOffsetPool();
         this.offsetPool = offsetPool;
@@ -233,7 +216,6 @@ export class MapRenderer
             v => v / data.tileTextureWidth
         );
         this.contextData = data;
-        this.layerController = new Map();
         this.vertex = new MapVertexGenerator(this, data);
         this.autotile = new AutotileProcessor(manager);
         this.tick = this.tick.bind(this);
@@ -242,6 +224,7 @@ export class MapRenderer
         this.viewport.bindTransform(this.transform);
         this.tileAnimater = new TextureColumnAnimater();
         this.initVertexPointer(gl, data);
+        layerState.addHook(new RendererLayerStateHook(this));
     }
 
     /**
@@ -314,6 +297,12 @@ export class MapRenderer
         gl.bindVertexArray(null);
     }
 
+    protected createController(
+        hook: Partial<IMapRendererHooks>
+    ): IHookController<IMapRendererHooks> {
+        return new HookController(this, hook);
+    }
+
     //#endregion
 
     //#region 图层处理
@@ -322,82 +311,58 @@ export class MapRenderer
      * 图层排序
      */
     private sortLayer() {
-        this.sortedLayers = [...this.layers].sort((a, b) => {
-            const za = this.layerZIndex.get(a) ?? -1;
-            const zb = this.layerZIndex.get(b) ?? -1;
-            return za - zb;
+        this.sortedLayers = [...this.layerState.layerList].sort((a, b) => {
+            return a.zIndex - b.zIndex;
         });
         this.sortedLayers.forEach((v, i) => this.layerIndexMap.set(v, i));
+        this.forEachHook((hook, controller) => {
+            hook.onUpdate?.(controller);
+        });
+        this.layerListDirty = true;
     }
 
-    addLayer(layer: IMapLayer, identifier?: string): void {
-        this.layers.add(layer);
-        this.layerZIndex.set(layer, 0);
-        if (identifier) {
-            this.layerAlias.set(identifier, layer);
-        }
-        const ex = new MapRendererExtends(this);
-        const controller = layer.addExtends(ex);
-        controller.load();
-        this.layerController.set(layer, controller);
-        this.sortLayer();
-        this.layerDirty = true;
-        this.layerCount = this.layers.size;
-        this.resizeLayer();
+    private updateAllLayers() {
+        this.layerState.layerList.forEach(v => {
+            this.vertex.updateArea(v, 0, 0, v.width, v.height);
+        });
     }
 
-    removeLayer(layer: IMapLayer): void {
-        this.layers.delete(layer);
-        this.layerData.delete(layer);
-        this.layerZIndex.delete(layer);
-        const ex = this.layerController.get(layer);
-        if (ex) {
-            ex.unload();
-        }
-        this.layerController.delete(layer);
-        const alias = this.layerAliasInv.get(layer);
-        if (!isNil(alias)) {
-            this.layerAlias.delete(alias);
-        }
-        this.layerAliasInv.delete(layer);
+    updateLayerList() {
         this.sortLayer();
-        this.layerDirty = true;
-        this.layerCount = this.layers.size;
         this.resizeLayer();
+        this.layerCount = this.layerState.layerList.size;
+        this.layerAllDirty = true;
+    }
+
+    setLayerState(layerState: ILayerState): void {
+        this.layerStateHook.unload();
+        this.layerState = layerState;
+        this.layerStateHook = layerState.addHook(
+            new RendererLayerStateHook(this)
+        );
+        this.layerStateHook.load();
+        this.sortLayer();
+        this.resizeLayer();
+        this.layerCount = layerState.layerList.size;
+        this.layerAllDirty = true;
     }
 
     getLayer(identifier: string): IMapLayer | null {
-        return this.layerAlias.get(identifier) ?? null;
+        return this.layerState.getLayerByAlias(identifier) ?? null;
     }
 
     hasLayer(layer: IMapLayer): boolean {
-        return this.layers.has(layer);
+        return this.layerState.hasLayer(layer);
     }
 
     getSortedLayer(): IMapLayer[] {
         return this.sortedLayers.slice();
     }
 
-    setZIndex(layer: IMapLayer, zIndex: number): void {
-        this.layerZIndex.set(layer, zIndex);
-        this.sortLayer();
-        this.layerDirty = true;
-    }
-
-    getZIndex(layer: IMapLayer): number | undefined {
-        return this.layerZIndex.get(layer);
-    }
-
     getLayerIndex(layer: IMapLayer): number {
         return this.layerIndexMap.get(layer) ?? -1;
     }
 
-    getMapLayerData(layer: IMapLayer): Readonly<IMapLayerData> | null {
-        const ex = this.layerController.get(layer);
-        const data = ex?.getMapData();
-        return data ?? null;
-    }
-
     /**
      * 重新适应新的图层大小
      */
@@ -409,13 +374,13 @@ export class MapRenderer
         }
         this.mapWidth = maxWidth;
         this.mapHeight = maxHeight;
-        this.layerDirty = true;
         this.updateBackgroundVertex(
             this.gl,
             this.contextData,
             this.contextData.backgroundWidth,
             this.contextData.backgroundHeight
         );
+        this.layerAllDirty = true;
     }
 
     //#endregion
@@ -699,9 +664,9 @@ export class MapRenderer
             tileTextureWidth: 4096,
             tileTextureHeight: 4096,
             tileTextureDepth: 1,
-            backgroundWidth: 32,
-            backgroundHeight: 32,
-            backgroundDepth: 1,
+            backgroundWidth: 0,
+            backgroundHeight: 0,
+            backgroundDepth: 0,
             tileTextureMark: Symbol(),
             vertexMark: Symbol()
         };
@@ -789,7 +754,6 @@ export class MapRenderer
             data.tileTextureMark = this.assetData.mark();
             gl.bindTexture(gl.TEXTURE_2D_ARRAY, tile);
             this.checkTextureArraySize(gl, data, sourceArray);
-            console.time('texture-upload');
             source.forEach((v, i) => {
                 gl.texSubImage3D(
                     gl.TEXTURE_2D_ARRAY,
@@ -817,7 +781,6 @@ export class MapRenderer
                 gl.TEXTURE_MIN_FILTER,
                 gl.NEAREST
             );
-            console.timeEnd('texture-upload');
         } else {
             const dirty = this.assetData.dirtySince(data.tileTextureMark);
             if (dirty.size === 0) return;
@@ -829,7 +792,6 @@ export class MapRenderer
                 data,
                 sourceArray
             );
-            console.time('texture-upload');
             if (sizeChanged) {
                 // 尺寸变化，需要全部重新传递
                 source.forEach((v, i) => {
@@ -866,7 +828,6 @@ export class MapRenderer
                     );
                 });
             }
-            console.timeEnd('texture-upload');
         }
     }
 
@@ -1226,8 +1187,10 @@ export class MapRenderer
             gl.NEAREST
         );
         this.backgroundPending = false;
-        this.extendList.forEach(v => v.onUpdate?.());
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+        this.forEachHook((hook, controller) => {
+            hook.onUpdate?.(controller);
+        });
     }
 
     render(): void {
@@ -1260,14 +1223,18 @@ export class MapRenderer
 
         console.time('layer-check');
         // 图层检查
-        if (this.layerDirty) {
-            this.vertex.updateLayerArray();
-            this.layerDirty = false;
-        }
         if (this.layerSizeDirty) {
             this.vertex.resizeMap();
             this.layerSizeDirty = false;
         }
+        if (this.layerListDirty) {
+            this.vertex.updateLayerArray();
+            this.layerListDirty = false;
+        }
+        if (this.layerAllDirty) {
+            this.updateAllLayers();
+            this.layerAllDirty = false;
+        }
         this.vertex.checkRebuild();
         console.timeEnd('layer-check');
 
@@ -1352,9 +1319,6 @@ export class MapRenderer
         // 由于 WebGL2 没有 glDrawArraysInstancedBaseInstance，只能每次渲染的时候临时修改 VBO 读取方式
         const stride = INSTANCED_COUNT * 4;
         gl.bindBuffer(gl.ARRAY_BUFFER, instancedBuffer);
-
-        console.log(area);
-
         area.render.forEach(v => {
             const s = v.startIndex * INSTANCED_COUNT;
             const o1 = s + 0;
@@ -1393,7 +1357,9 @@ export class MapRenderer
         h: number
     ) {
         this.vertex.updateArea(layer, x, y, w, h);
-        this.extendList.forEach(v => v.onUpdate?.());
+        this.forEachHook((hook, controller) => {
+            hook.onUpdate?.(controller);
+        });
     }
 
     /**
@@ -1405,7 +1371,9 @@ export class MapRenderer
      */
     updateLayerBlock(layer: IMapLayer, block: number, x: number, y: number) {
         this.vertex.updateBlock(layer, block, x, y);
-        this.extendList.forEach(v => v.onUpdate?.());
+        this.forEachHook((hook, controller) => {
+            hook.onUpdate?.(controller);
+        });
     }
 
     //#endregion
@@ -1570,48 +1538,50 @@ export class MapRenderer
 
     updateTransform(): void {
         this.needUpdateTransform = true;
-        this.extendList.forEach(v => v.onUpdate?.());
-    }
-
-    addExtends(ex: IMapRendererExtends): void {
-        this.extendList.add(ex);
-    }
-
-    close(): void {
-        this.layers.clear();
-        this.layerAlias.clear();
-        this.layerZIndex.clear();
-        this.extendList.clear();
+        this.forEachHook((hook, controller) => {
+            hook.onUpdate?.(controller);
+        });
     }
 
     //#endregion
 }
 
-class MapRendererExtends implements IMapLayerExtends {
-    readonly id: string = 'map-render';
-
+class RendererLayerStateHook implements Partial<ILayerStateHooks> {
     constructor(readonly renderer: MapRenderer) {}
 
-    onResize(): void {
+    onChangeBackground(
+        _: IHookController<ILayerStateHooks>,
+        tile: number
+    ): void {
+        this.renderer.setTileBackground(tile);
+    }
+
+    onResizeLayer(): void {
         this.renderer.resizeLayer();
     }
 
-    onUpdateArea(
-        controller: IMapLayerExtendsController,
+    onUpdateLayer(): void {
+        this.renderer.updateLayerList();
+    }
+
+    onUpdateLayerArea(
+        _: IHookController<ILayerStateHooks>,
+        layer: IMapLayer,
         x: number,
         y: number,
         width: number,
         height: number
     ): void {
-        this.renderer.updateLayerArea(controller.layer, x, y, width, height);
+        this.renderer.updateLayerArea(layer, x, y, width, height);
     }
 
-    onUpdateBlock(
-        controller: IMapLayerExtendsController,
+    onUpdateLayerBlock(
+        _: IHookController<ILayerStateHooks>,
+        layer: IMapLayer,
         block: number,
         x: number,
         y: number
     ): void {
-        this.renderer.updateLayerBlock(controller.layer, block, x, y);
+        this.renderer.updateLayerBlock(layer, block, x, y);
     }
 }

packages-user/client-modules/src/render/map/types.ts

@@ -1,4 +1,10 @@
-import { IDirtyMark, IDirtyTracker } from '@motajs/common';
+import {
+    IDirtyMark,
+    IDirtyTracker,
+    IHookable,
+    IHookBase,
+    IHookController
+} from '@motajs/common';
 import { ITextureRenderable } from '@motajs/render-assets';
 import { Transform } from '@motajs/render-core';
 import {
@@ -7,7 +13,7 @@ import {
     IMaterialManager,
     ITrackedAssetData
 } from '@user/client-base';
-import { IMapLayer } from '@user/data-state';
+import { ILayerState, IMapLayer } from '@user/data-state';
 import { TimingFn } from 'mutate-animate';
 
 export const enum MapBackgroundRepeat {
@@ -221,14 +227,14 @@ export interface IMovingBlock {
     destroy(): void;
 }
 
-export interface IMapRendererExtends {
+export interface IMapRendererHooks extends IHookBase {
     /**
      * 当需要更新画面时执行
      */
-    onUpdate?(): void;
+    onUpdate(controller: IHookController<this>): void;
 }
 
-export interface IMapRenderer {
+export interface IMapRenderer extends IHookable<IMapRendererHooks> {
     /** 地图渲染器使用的资源管理器 */
     readonly manager: IMaterialManager;
     /** 画布渲染上下文 */
@@ -242,6 +248,8 @@ export interface IMapRenderer {
     readonly viewport: IMapViewportController;
     /** 顶点数组生成器 */
     readonly vertex: IMapVertexGenerator;
+    /** 使用的地图状态对象 */
+    readonly layerState: ILayerState;
 
     /** 地图宽度 */
     readonly mapWidth: number;
@@ -268,12 +276,6 @@ export interface IMapRenderer {
      */
     useAsset(asset: ITrackedAssetData): void;
 
-    /**
-     * 添加地图渲染拓展
-     * @param ex 拓展对象
-     */
-    addExtends(ex: IMapRendererExtends): void;
-
     /**
      * 摧毁此地图渲染器，表示当前渲染器不会再被使用到
      */
@@ -286,17 +288,10 @@ export interface IMapRenderer {
     render(gl: WebGL2RenderingContext): void;
 
     /**
-     * 添加地图图层
-     * @param layer 地图图层
-     * @param identifier 图层的标识符，可以用于 {@link getLayer} 获取图层
+     * 设置渲染器使用的地图状态
+     * @param layerState 地图状态
      */
-    addLayer(layer: IMapLayer, identifier?: string): void;
-
-    /**
-     * 移除指定图层
-     * @param layer 要移除的图层
-     */
-    removeLayer(layer: IMapLayer): void;
+    setLayerState(layerState: ILayerState): void;
 
     /**
      * 根据标识符获取图层
@@ -315,19 +310,6 @@ export interface IMapRenderer {
      */
     getSortedLayer(): IMapLayer[];
 
-    /**
-     * 设置当前渲染器中指定图层的纵深
-     * @param layer 要设置的图层
-     * @param zIndex 目标纵深
-     */
-    setZIndex(layer: IMapLayer, zIndex: number): void;
-
-    /**
-     * 获取指定图层的纵深
-     * @param layer 要获取的图层
-     */
-    getZIndex(layer: IMapLayer): number | undefined;
-
     /**
      * 获取指定图层排序后的索引位置
      * @param layer 要获取的图层
@@ -394,11 +376,6 @@ export interface IMapRenderer {
      */
     setCellSize(width: number, height: number): void;
 
-    /**
-     * 获取变换矩阵
-     */
-    getTransform(): Transform;
-
     /**
      * 添加一个移动图块
      * @param layer 图块所属的图层
@@ -449,11 +426,6 @@ export interface IMapRenderer {
      * @param y 图块纵坐标
      */
     setTileAlpha(layer: IMapLayer, alpha: number, x: number, y: number): void;
-
-    /**
-     * 结束此渲染器的使用，释放所有相关资源
-     */
-    close(): void;
 }
 
 export interface IMapVertexArray {

packages-user/client-modules/src/render/map/vertex.ts

@@ -1,4 +1,4 @@
-import { IMapLayer, IMapLayerData } from '@user/data-state';
+import { IMapLayer } from '@user/data-state';
 import {
     IBlockData,
     IBlockSplitter,
@@ -24,8 +24,6 @@ import { BlockCls, IMaterialFramedData } from '@user/client-base';
 import { IRect, SizedCanvasImageSource } from '@motajs/render-assets';
 import { INSTANCED_COUNT } from './constant';
 
-// todo: 潜在优化点：顶点数组的 z 坐标以及纹理的 z 坐标可以换为实例化绘制
-
 export interface IMapDataGetter {
     /** 图块缩小行为，即图块比格子大时应该如何处理 */
     readonly tileMinifyBehavior: MapTileBehavior;
@@ -38,12 +36,6 @@ export interface IMapDataGetter {
     /** 图块大小与格子大小判断方式 */
     readonly tileTestMode: MapTileSizeTestMode;
 
-    /**
-     * 获取指定图层的图块信息，是对内部存储的直接引用
-     * @param layer 地图图层
-     */
-    getMapLayerData(layer: IMapLayer): Readonly<IMapLayerData> | null;
-
     /**
      * 根据图集的图像源获取其索引
      * @param source 图像源
@@ -593,8 +585,8 @@ export class MapVertexGenerator
         const block = this.block.getBlockByDataLoc(x, y);
         if (!block) return;
         const vertex = block.data.getLayerData(layer);
-        const data = this.renderer.getMapLayerData(layer);
-        if (!vertex || !data) return;
+        const data = layer.getMapRef();
+        if (!vertex) return;
         const { array } = data;
         const dx = x - block.dataX;
         const dy = y - block.dataY;
@@ -789,8 +781,8 @@ export class MapVertexGenerator
             if (!dirty || !dirty.dirty) return;
             block.data.updated();
             const vertex = block.data.getLayerData(layer);
-            const mapData = this.renderer.getMapLayerData(layer);
-            if (!vertex || !mapData) return;
+            const mapData = layer.getMapRef();
+            if (!vertex) return;
             const { array } = mapData;
             const { dirtyLeft, dirtyTop, dirtyRight, dirtyBottom } = dirty;
             for (let nx = dirtyLeft; nx < dirtyRight; nx++) {
@@ -823,9 +815,9 @@ export class MapVertexGenerator
     //#region 图块配置
 
     enableStaticFrameAnimate(layer: IMapLayer, x: number, y: number): void {
-        const data = this.renderer.getMapLayerData(layer);
+        const data = layer.getMapRef();
         const block = this.block.getBlockByDataLoc(x, y);
-        if (!data || !block) return;
+        if (!block) return;
         const vertexArray = block.data.getLayerInstanced(layer);
         if (!vertexArray) return;
         const mapIndex = y * this.mapWidth + x;

packages-user/client-modules/src/render/ui/main.tsx

@@ -48,37 +48,9 @@ import { mainUIController } from './controller';
 import { LayerGroup } from '../elements';
 import { isNil } from 'lodash-es';
 import { materials } from '@user/client-base';
-import { IRenderLayerData } from '../map/element';
 
 const MainScene = defineComponent(() => {
     //#region 基本定义
-    const layerList: IRenderLayerData[] = [
-        {
-            layer: state.layer.getLayerByAlias('bg')!,
-            zIndex: 10,
-            alias: 'bg'
-        },
-        {
-            layer: state.layer.getLayerByAlias('bg2')!,
-            zIndex: 20,
-            alias: 'bg2'
-        },
-        {
-            layer: state.layer.getLayerByAlias('event')!,
-            zIndex: 30,
-            alias: 'event'
-        },
-        {
-            layer: state.layer.getLayerByAlias('fg')!,
-            zIndex: 40,
-            alias: 'fg'
-        },
-        {
-            layer: state.layer.getLayerByAlias('fg2')!,
-            zIndex: 50,
-            alias: 'fg2'
-        }
-    ];
 
     const mainTextboxProps: Props<typeof Textbox> = {
         text: '',
@@ -312,7 +284,7 @@ const MainScene = defineComponent(() => {
                 onMove={moveMap}
             >
                 <map-render
-                    layerList={layerList}
+                    layerState={state.layer}
                     loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]}
                 />
                 <Textbox id="main-textbox" {...mainTextboxProps}></Textbox>