#

luxiaotao1123

2024-02-29 1683c5121d67ec8bc0284dbccc17fd2a08dad180

#

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

@@ -1,4 +1,8 @@
.ant-pro-layout .ant-pro-layout-content {
    padding-block: 15px;
    padding-inline: 15px;
}

.ant-card .ant-card-body {
    padding: 0;
}

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

@@ -5,52 +5,61 @@
import './index.css'

const Map = () => {
    const map = React.useRef();
    const [activeMap, setActiveMap] = React.useState('zone')

    React.useEffect(() => {
        console.log(map.current);
        const app = new PIXI.Application({
            // width: window.innerWidth,
            // height: window.innerHeight,
            background: '#1099bb',
    const mapRef = React.useRef();
    const [activeMap, setActiveMap] = React.useState('zone');
    const [app, setApp] = React.useState(() => {
        return new PIXI.Application({
            // width: window.innerWidth - 32,
            // height: window.innerHeight - 92,
            background: '#dcdde1',
            antialias: true,
        })
    })
    app.stage.interactive = true;
    app.stage.hitArea = app.screen;
    globalThis.__PIXI_APP__ = app;
    mapRef.current.appendChild(app.view);

        app.stage.interactive = true;
        app.stage.hitArea = app.screen;
    React.useEffect(() => {
        const onResize = () => {
            const width = mapRef.current.offsetWidth;
            const height = window.innerHeight - 92;
            console.log(width, height);
            if (mapRef) {
                app.renderer.resize(width, height);
            }
        }
        window.addEventListener('resize', onResize);
        onResize();

        globalThis.__PIXI_APP__ = app;

        map.current.appendChild(app.view);
    
        return () => {
            app.destroy(true, true);
            window.removeEventListener('resize', onResize);
        }
    }, []);

    return (
        <>
            <Card
                style={{ width: '100%', height: 'calc(100vh - 100px)' }}
                tabList={[
                    {
                        key: 'zone',
                        label: 'zone'
                    }
                ]}
                activeTabKey={activeMap}
                tabBarExtraContent={<Button>更多设置</Button>}
                onTabChange={(key) => {
                    setActiveMap(key);
                }}
                tabProps={{
                    size: 'middle',
                }}
                style={{ width: '100%', height: 'calc(100vh - 90px)' }}
            // tabList={[
            //     {
            //         key: 'zone',
            //         label: 'zone'
            //     }
            // ]}
            // activeTabKey={activeMap}
            // tabBarExtraContent={<Button>更多设置</Button>}
            // onTabChange={(key) => {
            //     setActiveMap(key);
            // }}
            // tabProps={{
            //     size: 'middle',
            // }}
            >
                <div
                    style={{ width: '100%', height: '100%' }}
                    ref={map}
                    ref={mapRef}
                >
                </div>
            </Card>