#

luxiaotao1123

2024-03-15 6f0db36501336185ce00ef8e73402f3d6ef292fe

#

 zy-asrs-flow/src/pages/map/index.jsx

@@ -263,6 +263,9 @@
                        >
                            <FloatButton
                                icon={<CompressOutlined />}
                                onClick={() => {
                                    Utils.adaptScreen();
                                }}
                            />
                            <FloatButton.BackTop visibilityHeight={0} />
                        </FloatButton.Group>

 zy-asrs-flow/src/pages/map/utils.js

@@ -276,4 +276,41 @@

    })
    return options;
}

export const adaptScreen = () => {
    if (!mapContainer || !app) {
        return;
    }
    if (mapContainer.children.length === 0) {
        return;
    }

    let minX, maxX, minY, maxY;
    for (let sprite of mapContainer.children) {
        let bounds = sprite.getBounds();
        minX = minX !== undefined ? Math.min(minX, bounds.x) : bounds.x;
        minY = minY !== undefined ? Math.min(minY, bounds.y) : bounds.y;
        maxX = maxX !== undefined ? Math.max(maxX, bounds.x + bounds.width) : bounds.x + bounds.width;
        maxY = maxY !== undefined ? Math.max(maxY, bounds.y + bounds.height) : bounds.y + bounds.height;
    }

    // 矩形中心
    let centerPoint = {
        x: (minX + maxX) / 2 * mapContainer.scale.x,
        y: (minY + maxY) / 2 * mapContainer.scale.y
    };

    let newScale = Math.min(
        app.renderer.width / (maxX - minX) * 0.9, // 90%的宽度
        app.renderer.height / (maxY - minY) * 0.9 // 90%的高度
    );

    mapContainer.scale.set(newScale);

    // 让地图容器的中心点定位到屏幕的中心
    mapContainer.position.set(
        app.renderer.width / 2 - centerPoint.x * newScale,
        app.renderer.height / 2 - centerPoint.y * newScale
    );
}