mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-03 16:54:16 +00:00 
			
		
		
		
	
		
			
	
	
		
			63 lines
		
	
	
		
			2.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
		
		
			
		
	
	
			63 lines
		
	
	
		
			2.3 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>
							 | 
						||
| 
								 | 
							
								</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">
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        const viewer = new Cesium.Viewer('map', {
							 | 
						||
| 
								 | 
							
								            imageryProvider: false,
							 | 
						||
| 
								 | 
							
								            baseLayerPicker: false,
							 | 
						||
| 
								 | 
							
								        });
							 | 
						||
| 
								 | 
							
								        var imageryProvider = new Cesium.SingleTileImageryProvider({
							 | 
						||
| 
								 | 
							
								            "url": "./world_b.jpg",
							 | 
						||
| 
								 | 
							
								            id: '1'
							 | 
						||
| 
								 | 
							
								        })
							 | 
						||
| 
								 | 
							
								        viewer.imageryLayers.addImageryProvider(imageryProvider)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        // 多个事件同时进行
							 | 
						||
| 
								 | 
							
								        let markerOpacity = 1;
							 | 
						||
| 
								 | 
							
								        let a = true;
							 | 
						||
| 
								 | 
							
								        let pixelSize = 1;
							 | 
						||
| 
								 | 
							
								        let n = true;
							 | 
						||
| 
								 | 
							
								        let outLineOpacity = 1;
							 | 
						||
| 
								 | 
							
								        let o = true;
							 | 
						||
| 
								 | 
							
								        let poin = viewer.entities.add({
							 | 
						||
| 
								 | 
							
								            position: Cesium.Cartesian3.fromDegrees(-110, 40),
							 | 
						||
| 
								 | 
							
								            point: {
							 | 
						||
| 
								 | 
							
								                color: new Cesium.CallbackProperty(() => {
							 | 
						||
| 
								 | 
							
								                    return a ? (markerOpacity -= 0.3,
							 | 
						||
| 
								 | 
							
								                        markerOpacity <= 0 && (a = false)) : (markerOpacity = 1,
							 | 
						||
| 
								 | 
							
								                            a = true),
							 | 
						||
| 
								 | 
							
								                        Cesium.Color.fromCssColorString('#FF0000').withAlpha(markerOpacity)
							 | 
						||
| 
								 | 
							
								                }, false),
							 | 
						||
| 
								 | 
							
								                pixelSize: new Cesium.CallbackProperty((time, result) => {
							 | 
						||
| 
								 | 
							
								                    return n ? (pixelSize += 2,
							 | 
						||
| 
								 | 
							
								                        pixelSize >= 120 && (n = false)) : (pixelSize = 30,
							 | 
						||
| 
								 | 
							
								                            n = true),
							 | 
						||
| 
								 | 
							
								                        pixelSize
							 | 
						||
| 
								 | 
							
								                }, false),
							 | 
						||
| 
								 | 
							
								                outlineColor: new Cesium.CallbackProperty(() => {
							 | 
						||
| 
								 | 
							
								                    return o ? (outLineOpacity -= 0.035,
							 | 
						||
| 
								 | 
							
								                        outLineOpacity <= 0 && (o = false)) : (outLineOpacity = 0.7,
							 | 
						||
| 
								 | 
							
								                            o = true),
							 | 
						||
| 
								 | 
							
								                        Cesium.Color.fromCssColorString('#1F0FD8').withAlpha(outLineOpacity)
							 | 
						||
| 
								 | 
							
								                }, false),
							 | 
						||
| 
								 | 
							
								                outlineWidth: 10,
							 | 
						||
| 
								 | 
							
								            },
							 | 
						||
| 
								 | 
							
								        });
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    </script>
							 | 
						||
| 
								 | 
							
								</body>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								</html>
							 |