mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-04 01:04:17 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			76 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			76 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!--********************************************************************
 | 
						|
* by jiawanlong
 | 
						|
*********************************************************************-->
 | 
						|
<!DOCTYPE html>
 | 
						|
<html>
 | 
						|
 | 
						|
<head>
 | 
						|
    <meta charset="UTF-8" />
 | 
						|
    <link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css" />
 | 
						|
    <script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
 | 
						|
    <script src="./libgif.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 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;
 | 
						|
 | 
						|
        let div = document.createElement("div");
 | 
						|
        let img = document.createElement("img");
 | 
						|
        div.appendChild(img);
 | 
						|
        img.src = './tf.gif'
 | 
						|
 | 
						|
        img.onload = () => {
 | 
						|
            let rub = new SuperGif({
 | 
						|
                gif: img
 | 
						|
            })
 | 
						|
            rub.load(() => {
 | 
						|
                const entity = viewer.entities.add({
 | 
						|
                    position: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 | 
						|
                    billboard: {
 | 
						|
                        image: new Cesium.CallbackProperty(() => {
 | 
						|
                            return rub.get_canvas().toDataURL("image/png");
 | 
						|
                        }, false),
 | 
						|
                        scale: 0.3,
 | 
						|
                        // scaleByDistance: new Cesium.NearFarScalar(10, 1.2, 50, 1.2),
 | 
						|
                        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 600000),
 | 
						|
                        // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
 | 
						|
                        // disableDepthTestDistance: 1000000
 | 
						|
                    },
 | 
						|
                });
 | 
						|
                resolve(entity);
 | 
						|
            });
 | 
						|
        };
 | 
						|
    </script>
 | 
						|
</body>
 | 
						|
 | 
						|
</html> |