| | |
| | | |
| | | const MapPage = () => { |
| | | const mapRef = useRef(); |
| | | |
| | | const contentRef = React.useRef(); |
| | | const [app, setApp] = useState(null); |
| | | const [mapContainer, setMapContainer] = React.useState(null); |
| | | |
| | | const [mode, setMode] = useState('monitoring'); |
| | | |
| | | const [windowSize, setWindowSize] = React.useState({ |
| | | width: window.innerWidth, |
| | | height: window.innerHeight, |
| | | }); |
| | | |
| | | const theme = useTheme(); |
| | | const themeMode = theme.palette.mode; |
| | |
| | | } |
| | | initialize(); |
| | | |
| | | // resize |
| | | // windows resize |
| | | const handleResize = () => { |
| | | setWindowSize({ |
| | | width: window.innerWidth, |
| | | height: window.innerHeight, |
| | | }); |
| | | player.resize(); |
| | | }; |
| | | window.addEventListener('resize', handleResize); |
| | | handleResize(); |
| | | |
| | | return () => { |
| | | player.destroy(); |
| | | window.removeEventListener('resize', handleResize); |
| | | |
| | | // 恢复父容器的内边距 |
| | | if (parentElement && parentElement.classList.contains('RaLayout-content')) { |
| | | parentElement.style.paddingLeft = ''; |
| | | parentElement.style.paddingRight = ''; |
| | |
| | | }} |
| | | > |
| | | <Box |
| | | ref={mapRef} |
| | | ref={contentRef} |
| | | sx={{ |
| | | width: '100%', |
| | | height: '100%', |
| | | backgroundColor: '#e0e0e0', |
| | | }} |
| | | > |
| | | <div ref={mapRef} style={{ |
| | | width: '100%', |
| | | height: '100%', |
| | | }} /> |
| | | </Box> |
| | | |
| | | <SpeedDial |