mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-03 16:54:16 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			79 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			79 lines
		
	
	
		
			2.5 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>
 | 
						|
    <link rel="stylesheet" href="./plottingfont/plottingfont.css" />
 | 
						|
    <script src="./jquery-1.8.3.min.js"></script>
 | 
						|
    <script src="./dom-to-image.js"></script>
 | 
						|
    <style>
 | 
						|
        * {
 | 
						|
            margin: 0;
 | 
						|
            padding: 0;
 | 
						|
        }
 | 
						|
 | 
						|
        html,
 | 
						|
        body {
 | 
						|
            width: 100%;
 | 
						|
            height: 100%;
 | 
						|
        }
 | 
						|
 | 
						|
        #cesiumContainer {
 | 
						|
            width: 100%;
 | 
						|
            height: 100%;
 | 
						|
        }
 | 
						|
    </style>
 | 
						|
</head>
 | 
						|
 | 
						|
<body style="
 | 
						|
      margin: 0;
 | 
						|
      overflow: hidden;
 | 
						|
      background: #fff;
 | 
						|
      width: 100%;
 | 
						|
      height: 100%;
 | 
						|
      position: absolute;
 | 
						|
      top: 0;
 | 
						|
    ">
 | 
						|
    <div class="dddddd" style="width: 36px;">
 | 
						|
        <img src="./haha.svg" alt="SVG Image" width="36" height="36">
 | 
						|
    </div>
 | 
						|
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
 | 
						|
    <script type="text/javascript">
 | 
						|
        Cesium.Ion.defaultAccessToken =
 | 
						|
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
 | 
						|
        const viewer = new Cesium.Viewer("map", {});
 | 
						|
        viewer.scene.debugShowFramesPerSecond = true;
 | 
						|
 | 
						|
        function base64ToBlob(base64) {
 | 
						|
            var parts = base64.split(';base64,');
 | 
						|
            var contentType = parts[0].split(':')[1];
 | 
						|
            var raw = window.atob(parts[1]);
 | 
						|
            var rawLength = raw.length;
 | 
						|
            var uInt8Array = new Uint8Array(rawLength);
 | 
						|
            for (var i = 0; i < rawLength; ++i) {
 | 
						|
                uInt8Array[i] = raw.charCodeAt(i);
 | 
						|
            }
 | 
						|
            return new Blob([uInt8Array], { type: contentType });
 | 
						|
        }
 | 
						|
        domtoimage.toPng(document.getElementsByClassName("dddddd")[0]).then(res => {
 | 
						|
            var blob = base64ToBlob(res);
 | 
						|
            var url = URL.createObjectURL(blob);
 | 
						|
 | 
						|
            var hello = viewer.entities.add({
 | 
						|
                position: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 | 
						|
                billboard: {
 | 
						|
                    image: url,
 | 
						|
                    scale: 1,
 | 
						|
                },
 | 
						|
            });
 | 
						|
        })
 | 
						|
 | 
						|
    </script>
 | 
						|
</body>
 | 
						|
 | 
						|
</html> |