| | |
| | | |
| | | const MapPage = () => { |
| | | const mapRef = useRef(); |
| | | |
| | | const contentRef = React.useRef(); |
| | | const [app, setApp] = useState(null); |
| | | const [mapContainer, setMapContainer] = React.useState(null); |
| | | |
| | |
| | | |
| | | // resize |
| | | const handleResize = () => { |
| | | player.resize(); |
| | | const width = contentRef.current.offsetWidth; |
| | | const height = contentRef.current.offsetHeight; |
| | | |
| | | player.resize(width, height); |
| | | }; |
| | | window.addEventListener('resize', handleResize); |
| | | handleResize(); |
| | | window.addEventListener('resize', handleResize); |
| | | |
| | | return () => { |
| | | player.destroy(); |
| | | window.removeEventListener('resize', handleResize); |
| | | |
| | | // 恢复父容器的内边距 |
| | | if (parentElement && parentElement.classList.contains('RaLayout-content')) { |
| | | parentElement.style.paddingLeft = ''; |
| | | parentElement.style.paddingRight = ''; |
| | | } |
| | | }; |
| | | }, [themeMode]) |
| | | |
| | | |
| | | const handleModeChange = (event) => { |
| | | setMode(event.target.value); |
| | |
| | | }} |
| | | > |
| | | <Box |
| | | ref={mapRef} |
| | | ref={contentRef} |
| | | sx={{ |
| | | position: 'relative', |
| | | width: '100%', |
| | | height: '100%', |
| | | backgroundColor: '#e0e0e0', |
| | | }} |
| | | > |
| | | <div ref={mapRef} style={{ |
| | | position: 'absolute', |
| | | top: 0, |
| | | left: 0, |
| | | width: '100%', |
| | | height: '100%', |
| | | }} /> |
| | | </Box> |
| | | |
| | | <SpeedDial |