Cesium Learning (Four): entity objects in motion

// 运动中的实体对象初始化方法
	function initRunEntity(){
		// 车辆默认不运行
		viewer.clock.shouldAnimate = false;
		
		// 创建czml文件;得到czml数据源
		var czml = getCzmlDataSource();
		
		// 动态添加点到czml的路径中
		// addPointForCzml(czml);
		
		// 加载提供的URL或CZML对象,替换任何现有数据。
		var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
		viewer.dataSources.add(dataSourcePromise);
		// 3、添加czml到三维球上
		viewer.zoomTo(dataSourcePromise);
		
		// 位置属性
		var positionProperty;
		// 实体对象
		var vehicleEntity;
		viewer.dataSources.add(dataSourcePromise).then(function(dataSource) {
		    vehicleEntity = dataSource.entities.getById('Vehicle');
		    positionProperty = vehicleEntity.position;
			// 带着相机跟踪车辆。
			if (!viewer.trackedEntity && viewer.clock.shouldAnimate) {
			   // viewer.trackedEntity = vehicleEntity;
			}
		});
		
		// 渲染监听
		viewer.scene.postRender.addEventListener(function() {
			// 带着相机跟踪车辆。
			if (!viewer.trackedEntity && viewer.clock.shouldAnimate) {
			    // viewer.trackedEntity = vehicleEntity;
			}
			
			// 得到实体对象的地理坐标位置
			var position = positionProperty.getValue(viewer.clock.currentTime);
			// 判断车辆是否在运行中(需要引入turf.min.js)
			if(viewer.clock.shouldAnimate){
				var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
				// console.log(cartographic);
				// console.log(position);
				// 根据地理坐标得到经纬度
				var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
				var longitude = Cesium.Math.toDegrees(cartographic.longitude);
				var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(3);
				
				// 判断矩形区域是否存在
				if(polyArray.length > 0){
					// 判断点是否在区域内部
					for(i = 0; i < polyArray.length; i++){
						var pt = turf.point([longitude, latitude]);
						var poly = turf.polygon([polyArray[i]]);
						var includeFlag = turf.booleanPointInPolygon(pt, poly);
						if(includeFlag){
							break;
						}
					}
					// 汽车行驶到某一区域内标识
					if(includeFlag){
						// 模型颜色
						vehicleEntity.model.color = Cesium.Color.fromAlpha(Cesium.Color.RED);
					}else{
						// 模型颜色
						vehicleEntity.model.color = Cesium.Color.fromAlpha(Cesium.Color.ALICEBLUE);
					}
				}
			}
		});
	}
	
	// 动态添加点到czml的路径中
	function addPointForCzml(czml){
		var i = 30.95759870500004;
		var a = 60;
		// 延迟加载每隔10秒钟添加一个点
		setInterval(function() {
		    i += 0.0001;
		    a += 10;
			// 路径最后添加节点
		    czml[1].position.cartographicDegrees.push(a, 118.87841653400005, i, 0);
			
			// 处理添加了点之后,界面上并没有体现出来的问题
			// 修改当前时间
		    czml[0].clock.currentTime = viewer.clock.currentTime.toString();
			// 清空之前数据,否则数据越来越多
		    viewer.entities.removeAll();
			// 重新添加修改后的数据
		    viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
		}, 1000);
	}
	
	// 封装czml数据源
	function getCzmlDataSource(){
		var czml = [{
		    "id": "document",
		    "name": "polygon",
		    "version": "1.0",
		    "clock": {
		        "interval": "2012-08-04T16:00:00Z/2012-08-04T16:02:00Z",
		        "currentTime": "2012-08-04T16:00:00Z",
		        "multiplier": 10
		    }
		}, {
		    "id": "Vehicle",
		    "name": "Red box with black outline",
		    "availability": "2012-08-04T16:00:00Z/2012-08-04T16:02:00Z",
		    "path": {
		        "material": {
		            "solidColor": {
		                "color": {
		                    "interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
		                    "rgba": [255,255,0,255]
		                }
		            }
		        },
		        "width": [{
		            "interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
		            "number": 3.0
		        }],
		        "show": [{
		            "interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
		            "boolean": true
		        }]
		    },
		    "position": {
		        "interpolationAlgorithm": "LAGRANGE",
		        "interpolationDegree": 1,
		        "epoch": "2012-08-04T16:00:00Z",
		        "cartographicDegrees": [
					0.0, 109.740, 19.997, 0.0,
					10.0, 109.750, 19.997, 0.0,
					20.0, 109.760, 19.997, 0.0,
					30.0, 109.770, 19.997, 0.0,
					40.0, 109.780, 19.997, 0.0,
					50.0, 109.790, 19.997, 0.0,
		            60.0, 109.800, 19.997, 0.0,
					70.0, 109.810, 19.997, 0.0,
					80.0, 109.820, 19.997, 0.0,
					90.0, 109.830, 19.997, 0.0,
					100.0, 109.840, 19.997, 0.0,
					110.0, 109.850, 19.997, 0.0,
					120.0, 109.860, 19.997, 0.0
		        ]
		    },
			"model": {
				"gltf" : "./models/CesiumMilkTruck/CesiumMilkTruck.glb",
				"minimumPixelSize":100,
				"maximumScale":50
			},
			"orientation" : {
				"velocityReference": "#position"
			},
		}];
		return czml;
	}

Guess you like

Origin blog.csdn.net/zy123698745/article/details/91046581