mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-03 16:54:16 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			49 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			49 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!--********************************************************************
 | 
						|
* by jiawanlong
 | 
						|
*********************************************************************-->
 | 
						|
<!DOCTYPE html>
 | 
						|
<html>
 | 
						|
 | 
						|
<head>
 | 
						|
    <meta charset="UTF-8" />
 | 
						|
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
 | 
						|
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
 | 
						|
    <script src="./html2canvas.js"></script>
 | 
						|
</head>
 | 
						|
 | 
						|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
 | 
						|
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
 | 
						|
    <button style="position: absolute;left: 10px;top: 10px;z-index: 1000;" onclick="print()">打印</button>
 | 
						|
    <script type="text/javascript">
 | 
						|
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
 | 
						|
        const viewer = new Cesium.Viewer('map', {
 | 
						|
            contextOptions: {
 | 
						|
                webgl: {
 | 
						|
                    // 一定要加,要不然是黑色
 | 
						|
                    preserveDrawingBuffer: true // 设置为 true 来启用
 | 
						|
                }
 | 
						|
            }
 | 
						|
        });
 | 
						|
        viewer.scene.debugShowFramesPerSecond = true;
 | 
						|
        viewer.scene.globe.depthTestAgainstTerrain = true;
 | 
						|
 | 
						|
        function print() {
 | 
						|
            var element = document.getElementById('map');
 | 
						|
            html2canvas(element, {
 | 
						|
                useCORS: true,
 | 
						|
                allowTaint: true,
 | 
						|
 | 
						|
            }).then(function (canvas) {
 | 
						|
                const imgData = canvas.toDataURL('image/png');
 | 
						|
                console.log(imgData)
 | 
						|
 | 
						|
                const link = document.createElement('a');
 | 
						|
                link.href = imgData;
 | 
						|
                link.download = 'myImage.png';
 | 
						|
                link.click();
 | 
						|
            });
 | 
						|
        }
 | 
						|
    </script>
 | 
						|
</body>
 | 
						|
 | 
						|
</html> |