<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>day01</title>
<script src="./Cesium/Cesium.js"></script>
<link rel="stylesheet " href="./Cesium/Widgets/widgets.css">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
//----加载中国谷歌影像地图
var guge=new Cesium.UrlTemplateImageryProvider({
url:'http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}',
tilingScheme:new Cesium.WebMercatorTilingScheme(),
minimumLevel:1,
maximumLevel:20
});
var viewer = new Cesium.Viewer('cesiumContainer', {
shouldAnimate : true
});
var statusDisplay = document.createElement('div'); //状态显示
var fuelDisplay = document.createElement('div'); //燃料显示器
var czmlPath = '../../SampleData/';
var vehicleEntity;
//添加一个空白czml数据库来保存我们的多部分实体。
var dataSource = new Cesium.CzmlDataSource();
viewer.dataSources.add(dataSource);
//这个演示,演示了如何将一个路径分解成几个czml流。
var partsToLoad = [{
url: 'MultipartVehicle_part1.czml',
range: [0, 1500],
requested: false,
loaded: false
}, {
url: 'MultipartVehicle_part2.czml',
range: [1500, 3000],
requested: false,
loaded: false
}, {
url: 'MultipartVehicle_part3.czml',
range: [3000, 4500],
requested: false,
loaded: false
}];
function updateStatusDisplay() {
var msg = '';
partsToLoad.forEach(function(part) {
msg += part.url + ' - ';
if (part.loaded) {
msg += 'Loaded.<br/>';
} else if (part.requested) {
msg += 'Loading now...<br/>';
} else {
msg += 'Not needed yet.<br/>';
}
});
statusDisplay.innerHTML = msg;
}
//helper函数根据请求标记部件,并将其处理到数据源中。
function processPart(part) {
part.requested = true;
updateStatusDisplay();
dataSource.process(czmlPath + part.url).then(function() {
part.loaded = true;
updateStatusDisplay();
//用摄像机跟着车辆。
if (!viewer.trackedEntity) {
viewer.trackedEntity = vehicleEntity = dataSource.entities.getById('Vehicle');
}
});
}
//将第一部分加载到前面。
processPart(partsToLoad[0]);
//在时钟自然到达之前加载一个新的节。
//请注意,这无法预测用户何时可以快速转发。
var preloadTimeInSeconds = 100;
viewer.clock.onTick.addEventListener(function(clock) {
//本例从一开始就使用时间偏移来标识需要加载哪些部分。
var timeOffset = Cesium.JulianDate.secondsDifference(clock.currentTime, clock.startTime);
//将零件列表筛选为当前需要加载的零件。
//然后,处理需要加载的每个部分。
partsToLoad.filter(function(part) {
return (!part.requested) &&
(timeOffset >= part.range[0] - preloadTimeInSeconds) &&
(timeOffset <= part.range[1]);
}).forEach(function(part) {
processPart(part);
});
if (vehicleEntity) {
var fuel = vehicleEntity.properties.fuel_remaining.getValue(clock.currentTime);
if (Cesium.defined(fuel)) {
fuelDisplay.textContent = 'Fuel: ' + fuel.toFixed(2) + ' gal';
}
}
});
//为方便起见,添加一个重置按钮。
Sandcastle.addToolbarButton('Reset demo', function() {
//把东西放回起始位置。
viewer.clock.currentTime = viewer.clock.startTime;
viewer.clock.shouldAnimate = true;
partsToLoad.forEach(function(part) {
part.requested = false;
part.loaded = false;
});
dataSource.entities.removeAll();
processPart(partsToLoad[0]);
});
//显示重置按钮下面的状态显示。
statusDisplay.style.background = 'rgba(42, 42, 42, 0.7)';
statusDisplay.style.padding = '5px 10px';
document.getElementById('toolbar').appendChild(statusDisplay);
//显示从czml读取的多部分自定义属性。
fuelDisplay.style.background = 'rgba(42, 42, 42, 0.7)';
fuelDisplay.style.padding = '5px 10px';
fuelDisplay.style.marginTop = '5px';
document.getElementById('toolbar').appendChild(fuelDisplay);
</script>
</body>
</html>
cesium------如何将一个路径分解成几个czml流。
最新推荐文章于 2024-07-11 10:41:16 发布