Cesium学习笔记（一）

最新推荐文章于 2024-03-27 18:54:38 发布

Lafitteee拉菲

最新推荐文章于 2024-03-27 18:54:38 发布

阅读量1k

点赞数

分类专栏： Cesium

本文链接：https://blog.csdn.net/weixin_43889028/article/details/110307304

版权

Cesium 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Cesium

官网教程源码分析

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cesiumjs.org/releases/1.75/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.75/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Get your token from https://cesium.com/ion/tokens
    Cesium.Ion.defaultAccessToken = 'your_token_here';

    // STEP 4 CODE (replaces steps 2 and 3)
    // Keep your `Cesium.Ion.defaultAccessToken = 'your_token_here'` line from before here. 
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });
    const osmBuildings = viewer.scene.primitives.add(Cesium.createOsmBuildings());

    const flightData = JSON.parse(
      '[{"longitude":-122.39053,"latitude":37.61779,"height":-27.32},{"longitude":-122.39035,"latitude":37.61803,"height":-27.32},
      //............................
      //此处省略多行坐标信息代码
    );

    /* Initialize the viewer clock:
      Assume the radar samples are 30 seconds apart, and calculate the entire flight duration based on that assumption.
      Get the start and stop date times of the flight, where the start is the known flight departure time (converted from PST 
        to UTC) and the stop is the start plus the calculated duration. (Note that Cesium uses Julian dates. See 
        https://simple.wikipedia.org/wiki/Julian_day.)
      Initialize the viewer's clock by setting its start and stop to the flight start and stop times we just calculated. 
      Also, set the viewer's current time to the start time and take the user to that time. 
    */
    const timeStepInSeconds = 30;
    const totalSeconds = timeStepInSeconds * (flightData.length - 1);
    const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z");
    //结束时间=开始时间加上总时间，返回一个新的JulianDate对象：
    const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate());
    viewer.clock.startTime = start.clone();
    viewer.clock.stopTime = stop.clone();
    viewer.clock.currentTime = start.clone();
    viewer.timeline.zoomTo(start, stop);	//viewer.zoomTo(target, offset):异步设置摄像机来查看实体，此处是timeline.zoomTo，不知道有何区别
    // Speed up the playback speed 50x.
    viewer.clock.multiplier = 50;
    // Start playing the scene.
    viewer.clock.shouldAnimate = true;	//开始tick。The clock will only tick when both Clock.canAnimate and Clock.shouldAnimate are true. Clock.canAnimate 默认为true

    // The SampledPositionedProperty stores the position and timestamp for each sample along the radar sample series.
    const positionProperty = new Cesium.SampledPositionProperty();

    for (let i = 0; i < flightData.length; i++) {
      const dataPoint = flightData[i];

      // Declare the time for this individual sample and store it in a new JulianDate instance.
      const time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate());
      const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height);//根据经纬度坐标创建一个笛卡尔坐标系对象
      // Store the position along with its timestamp.
      // Here we add the positions all upfront, but these can be added at run-time as samples are received from a server.
      positionProperty.addSample(time, position);

      viewer.entities.add({
        description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
        position: position,
        point: { pixelSize: 10, color: Cesium.Color.RED }
      });
    }

    // STEP 6 CODE (airplane entity)
    async function loadModel() {
      // Load the glTF model from Cesium ion.
      const airplaneUri = await Cesium.IonResource.fromAssetId(your_asset_id);	//封装资源
      const airplaneEntity = viewer.entities.add({//viewer.entities: Gets the collection of entities not tied to a particular data source. 
      
        availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: start, stop: stop }) ]),
        position: positionProperty,
        // Attach the 3D model instead of the green point.
        model: { uri: airplaneUri },
        // Automatically compute the orientation from the position.
        orientation: new Cesium.VelocityOrientationProperty(positionProperty),    
        path: new Cesium.PathGraphics({ width: 3 })
        
      });
      
      viewer.trackedEntity = airplaneEntity;
    }

    loadModel();
  </script>
</body>
</html>

viewer.clock.canAnimate和viewer.clock.shouldAnimate要同时为true才会开始clock tick。canAnimate默认为true，shouldAnimate默认是false。
Cesium.Cartesian3：笛卡尔坐标系（直角坐标系），Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)根据经纬度坐标创建，返回一个Cartesian3对象。
async和await：
- 将 async 关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用 await 带来的任何潜在开销。在函数声明为 async 时，JavaScript引擎会添加必要的处理，以优化你的程序。
- 当 await 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。
Cesium.IonResource(endpoint, endpointResource):A Resource instance that encapsulates(封装) Cesium ion asset access. This object is normally not instantiated(实例化) directly.
viewer.entities：Gets the collection of entities not tied to(绑定) a particular data source.
new Cesium.TimeIntervalCollection(intervals)：A non-overlapping collection of TimeInterval instances sorted by start time.
new Cesium.VelocityOrientationProperty(position, ellipsoid): A Property which evaluates to a Quaternion(四元数) rotation(旋转) based on the velocity of the provided PositionProperty.
new Cesium.PathGraphics(options): Describes a polyline(多段线) defined as the path made by an Entity as it moves over time.

Lafitteee拉菲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cesium学习笔记（一）

Cesium官网教程源码分析<!DOCTYPE html><html lang="en"><head> <script src="https://cesiumjs.org/releases/1.75/Build/Cesium/Cesium.js"></script> <link href="https://cesiumjs.org/releases/1.75/Build/Cesium/Widgets/widgets.css"
复制链接

扫一扫

专栏目录