babyeditor-tool 0.0.8 → 0.0.10

package/types/tool/map/tile/TileLayerRenderer.js

@@ -0,0 +1,329 @@
+import { MeshBuilder, StandardMaterial, Texture, Color3 } from "@babylonjs/core";
+import { Layer } from "../Layer";
+import { Projection } from "../Projection";
+import { TileLayer } from "./TileLayer";
+/**
+ * 瓦片图层渲染器
+ */
+export class TileLayerRenderer extends Layer {
+    /**
+     * 构造函数
+     * @param mapViewer 地图视图
+     */
+    constructor(mapViewer) {
+        super('TileLayerRenderer', mapViewer.scene);
+        /**
+         * 瓦片图层渲染器
+         */
+        this.tileLayers = [];
+        /**
+         * 当前缩放级别
+         */
+        this.currentZoom = 1;
+        /**
+         * 已渲染的瓦片集合，使用 "x-y-z" 作为键
+         */
+        this.renderedTiles = new Map();
+        /**
+         * 摄像机位置观察者
+         */
+        this.cameraObserver = null;
+        /**
+         * 是否启用自动更新
+         */
+        this.autoUpdate = false;
+        this.mapViewer = mapViewer;
+        this.maxBBox = mapViewer.projection === 'EPSG:3857' ? Projection.Max3857BBox : Projection.Max4326BBox;
+        // 将瓦片图层添加到地图根节点
+        this.layerRootNode.parent = mapViewer.rootNode;
+        this.tileLayers = [new TileLayer('aaa', 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')];
+    }
+    get projectionBBox() {
+        return this.mapViewer.getProjectionBbox();
+    }
+    /**
+     * 获取地图范围
+     * @returns [minX, minY, maxX, maxY] 地图范围
+     */
+    get bbox() {
+        return this.mapViewer.bbox;
+    }
+    /**
+     * 获取地图大小
+     * @returns [width, height] 地图大小
+     */
+    get size() {
+        return this.mapViewer.size;
+    }
+    /**
+     * 获取地图投影
+     * @returns 地图投影
+     */
+    get projection() {
+        return this.mapViewer.projection;
+    }
+    /**
+     * 根据地图投影坐标和缩放级别获取瓦片序号
+     * @param x 投影坐标X
+     * @param y 投影坐标Y
+     * @param z 缩放级别
+     * @returns [tileX, tileY] 瓦片序号
+     */
+    positionToTile(x, y, z) {
+        const [bboxMinX, bboxMinY, bboxMaxX, bboxMaxY] = this.maxBBox;
+        const width = bboxMaxX - bboxMinX;
+        const height = bboxMaxY - bboxMinY;
+        // 计算单个瓦片在当前缩放级别下的大小
+        const tileCount = Math.pow(2, z);
+        const tileWidth = width / tileCount;
+        const tileHeight = height / tileCount;
+        // 计算瓦片序号
+        const tileX = Math.floor((x - bboxMinX) / tileWidth);
+        const tileY = Math.floor((bboxMaxY - y) / tileHeight); // Y轴通常是从上到下
+        return [tileX, tileY];
+    }
+    /**
+     * 根据瓦片序号和缩放级别获取瓦片范围
+     * @param tileX 瓦片序号X
+     * @param tileY 瓦片序号Y
+     * @param z 缩放级别
+     * @returns [minX, minY, maxX, maxY] 瓦片范围
+     */
+    tileToBBox(tileX, tileY, z) {
+        const [minX, minY, maxX, maxY] = this.maxBBox;
+        const width = maxX - minX;
+        const height = maxY - minY;
+        // 计算单个瓦片在当前缩放级别下的大小
+        const tileCount = Math.pow(2, z);
+        const tileWidth = width / tileCount;
+        const tileHeight = height / tileCount;
+        // 计算瓦片范围
+        const tileMinX = minX + tileX * tileWidth;
+        const tileMinY = maxY - tileY * tileHeight - tileHeight;
+        const tileMaxX = tileMinX + tileWidth;
+        const tileMaxY = tileMinY + tileHeight;
+        return [tileMinX, tileMaxY, tileMaxX, tileMinY];
+    }
+    /**
+     * 根据瓦片序号和缩放级别获取瓦片中心点坐标
+     * @param tileX 瓦片序号X
+     * @param tileY 瓦片序号Y
+     * @param z 缩放级别
+     * @returns [centerX, centerY] 瓦片中心点坐标
+     */
+    tileToCenter(tileX, tileY, z) {
+        const [minX, minY, maxX, maxY] = this.tileToBBox(tileX, tileY, z);
+        const centerX = (minX + maxX) / 2;
+        const centerY = (minY + maxY) / 2;
+        return [centerX, centerY];
+    }
+    /**
+     * 根据瓦片序号和缩放级别获取瓦片在视野中的尺寸大小
+     * @param tileX 瓦片序号X
+     * @param tileY 瓦片序号Y
+     * @param z 缩放级别
+     * @returns [width, height] 瓦片在视野中的宽度和高度(像素)
+     */
+    tileToViewportSize(tileX, tileY, z) {
+        const [minX, minY, maxX, maxY] = this.tileToBBox(tileX, tileY, z);
+        // 获取瓦片左上角和右下角在视口中的坐标
+        const [viewportMinX, viewportMinY] = this.projectionToViewport(minX, maxY);
+        const [viewportMaxX, viewportMaxY] = this.projectionToViewport(maxX, minY);
+        // 计算视口尺寸
+        const viewportWidth = Math.abs(viewportMaxX - viewportMinX);
+        const viewportHeight = Math.abs(viewportMaxY - viewportMinY);
+        return [viewportWidth, viewportHeight];
+    }
+    /**
+     * 将投影坐标转换为地图视野相对坐标
+     * @param x 投影坐标X
+     * @param y 投影坐标Y
+     * @returns [relativeX, relativeY] 相对于地图视野的坐标
+     */
+    projectionToViewport(x, y) {
+        const [bboxMinX, bboxMinY, bboxMaxX, bboxMaxY] = this.projectionBBox;
+        const [width, height] = this.size;
+        // 计算投影坐标在地图范围内的相对位置(0-1)
+        const relativeX = (x - bboxMinX) / (bboxMaxX - bboxMinX);
+        const relativeY = (y - bboxMinY) / (bboxMaxY - bboxMinY);
+        // 转换为视口像素坐标
+        const viewportX = relativeX * width - this.size[0] / 2;
+        const viewportY = relativeY * height - this.size[1] / 2;
+        return [viewportX, viewportY];
+    }
+    /**
+     * 根据瓦片序号和缩放级别获取瓦片网格
+     * @param tileX 瓦片序号X
+     * @param tileY 瓦片序号Y
+     * @param z 缩放级别
+     * @returns 瓦片网格
+     */
+    getTileMesh(tileX, tileY, z) {
+        const tileMesh = MeshBuilder.CreateGround(`tile-${tileX}-${tileY}-${z}`, { width: 1, height: 1 }, this.mapViewer.scene);
+        const center = this.tileToCenter(tileX, tileY, z);
+        const worldPosition = this.projectionToViewport(center[0], center[1]);
+        const worldSize = this.tileToViewportSize(tileX, tileY, z);
+        tileMesh.position.x = worldPosition[0];
+        tileMesh.position.z = worldPosition[1];
+        tileMesh.scaling.x = worldSize[0];
+        tileMesh.scaling.z = worldSize[1];
+        tileMesh.parent = this.layerRootNode;
+        this.updateTileTexture(tileX, tileY, z, tileMesh);
+        return tileMesh;
+    }
+    /**
+     * 获取调试画布
+     * @returns 调试画布元素
+     */
+    getTileCanvas(tileX, tileY, z) {
+        const canvas = document.createElement('canvas');
+        canvas.width = 256;
+        canvas.height = 256;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.fillStyle = 'red';
+            ctx.font = '18px Arial';
+            ctx.textBaseline = 'middle';
+            ctx.textAlign = 'center';
+            ctx.fillText(`Tile: ${tileX}-${tileY}, ${z}`, canvas.width / 2, canvas.height / 2);
+        }
+        return canvas;
+    }
+    updateTileTexture(tileX, tileY, z, tileMesh) {
+        const canvas = document.createElement('canvas');
+        canvas.width = 256;
+        canvas.height = 256;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.fillStyle = 'red';
+            ctx.font = '18px Arial';
+            ctx.textBaseline = 'middle';
+            ctx.textAlign = 'center';
+            ctx.fillText(`Tile: ${tileX}-${tileY}, ${z}`, canvas.width / 2, canvas.height / 2);
+        }
+        let material = tileMesh.material;
+        if (!material) {
+            material = new StandardMaterial(`tile-${tileX}-${tileY}-${z}`, this.mapViewer.scene);
+            material.specularColor = new Color3(0, 0, 0);
+            tileMesh.material = material;
+        }
+        this.tileLayers.forEach((tileLayer) => {
+            // tileLayer.requestImage(tileX, tileY, z).then((image: HTMLImageElement) => {
+            //   if (image) {
+            //     if (ctx) ctx.drawImage(image, 0, 0, 256, 256);
+            //     material.diffuseTexture = new Texture(canvas.toDataURL(), this.mapViewer.scene, false, true);
+            //   }
+            // })
+            material.diffuseTexture = new Texture(tileLayer.getTileUrl(tileX, tileY, z), this.mapViewer.scene, false, true);
+        });
+        // material.diffuseTexture = new Texture(canvas.toDataURL(), this.mapViewer.scene, false, true);
+    }
+    /**
+     * 根据当前视野范围和缩放级别计算需要渲染的瓦片列表
+     * @param zoom 缩放级别
+     * @returns 需要渲染的瓦片坐标数组 [[tileX, tileY, z], ...]
+     */
+    calculateVisibleTiles(zoom) {
+        const [bboxMinX, bboxMinY, bboxMaxX, bboxMaxY] = this.projectionBBox;
+        // 获取视野范围的四个角点对应的瓦片坐标
+        const [minTileX, maxTileY] = this.positionToTile(bboxMinX, bboxMinY, zoom);
+        const [maxTileX, minTileY] = this.positionToTile(bboxMaxX, bboxMaxY, zoom);
+        const visibleTiles = [];
+        // 遍历视野范围内的所有瓦片
+        for (let tileY = minTileY; tileY <= maxTileY; tileY++) {
+            for (let tileX = minTileX; tileX <= maxTileX; tileX++) {
+                // 确保瓦片坐标在有效范围内
+                const center = this.tileToCenter(tileX, tileY, zoom);
+                if (center[0] >= bboxMinX && center[0] <= bboxMaxX && center[1] >= bboxMinY && center[1] <= bboxMaxY) {
+                    visibleTiles.push([tileX, tileY, zoom]);
+                }
+            }
+        }
+        return visibleTiles;
+    }
+    /**
+     * 更新瓦片渲染，只渲染当前视野内的瓦片
+     * @param zoom 缩放级别
+     */
+    updateTiles(zoom) {
+        this.currentZoom = zoom;
+        const visibleTiles = this.calculateVisibleTiles(zoom);
+        // 创建当前应该存在的瓦片集合
+        const shouldExistTiles = new Set();
+        visibleTiles.forEach(([x, y, z]) => {
+            shouldExistTiles.add(`${x}-${y}-${z}`);
+        });
+        // 移除不在视野内的瓦片
+        this.renderedTiles.forEach((mesh, key) => {
+            if (!shouldExistTiles.has(key)) {
+                mesh.dispose();
+                this.renderedTiles.delete(key);
+            }
+        });
+        // 添加新的可见瓦片
+        visibleTiles.forEach(([tileX, tileY, z]) => {
+            const tileKey = `${tileX}-${tileY}-${z}`;
+            if (!this.renderedTiles.has(tileKey)) {
+                const tileMesh = this.getTileMesh(tileX, tileY, z);
+                this.renderedTiles.set(tileKey, tileMesh);
+            }
+        });
+    }
+    /**
+     * 启用自动更新模式，监听摄像机变化自动更新瓦片
+     * @param zoom 缩放级别
+     */
+    enableAutoUpdate(zoom = 0) {
+        this.autoUpdate = true;
+        this.currentZoom = zoom;
+        // 初始渲染
+        this.updateTiles(zoom);
+        // 监听场景渲染，检测视野变化
+        const scene = this.mapViewer.scene;
+        if (scene.activeCamera) {
+            this.cameraObserver = scene.onAfterCameraRenderObservable.add(() => {
+                if (this.autoUpdate) {
+                    // 这里可以添加防抖逻辑，避免频繁更新
+                    this.updateTiles(this.currentZoom);
+                }
+            });
+        }
+    }
+    /**
+     * 禁用自动更新模式
+     */
+    disableAutoUpdate() {
+        this.autoUpdate = false;
+        if (this.cameraObserver) {
+            this.mapViewer.scene.onAfterCameraRenderObservable.remove(this.cameraObserver);
+            this.cameraObserver = null;
+        }
+    }
+    /**
+     * 设置缩放级别并更新瓦片
+     * @param zoom 缩放级别
+     */
+    setZoom(zoom) {
+        if (zoom !== this.currentZoom) {
+            this.currentZoom = zoom;
+            this.updateTiles(zoom);
+        }
+    }
+    /**
+     * 清除所有已渲染的瓦片
+     */
+    clearTiles() {
+        this.renderedTiles.forEach((mesh) => {
+            mesh.dispose();
+        });
+        this.renderedTiles.clear();
+    }
+    /**
+     * 释放资源
+     */
+    dispose() {
+        this.disableAutoUpdate();
+        this.clearTiles();
+        super.dispose();
+    }
+}