cesium------如何将一个路径分解成几个czml流。

最新推荐文章于 2024-03-14 16:49:41 发布

三星程序饲养员

最新推荐文章于 2024-03-14 16:49:41 发布

阅读量917

点赞数

分类专栏： gis方向文章标签： cesium

原文链接：https://mp.csdn.net/mdeditor/102521420

版权

gis方向专栏收录该内容

41 篇文章 3 订阅

订阅专栏

<!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>

分成3个路径

三星程序饲养员

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
cesium------如何将一个路径分解成几个czml流。

<!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" con...
复制链接

扫一扫