【Cesium Sandcastle 研究1】- HeadingPitchRoll

启动

cd C:\exercise\cesium

npm run dev

HeadingPitchRoll

访问地址：

http://localhost:8080/Apps/Sandcastle/index.html?src=HeadingPitchRoll.html

更新时机

viewer.scene.preUpdate.addEventListener(function(scene, time) {

viewer.scene.preUpdate
获取在更新或呈现场景之前将引发的事件。事件的订阅者接收Scene实例作为第一个参数，将当前时间作为第二个参数。

这个函数调用非常频繁，相当于每帧刷新之前都会调用此函数。

viewer.scene.preRender 相当于是场景渲染之前调用的。

在这个例子中，在渲染后，更新相关信息 到 页面。

viewer.scene.preRender.addEventListener(function(scene, time) {
    headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
    pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
    rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
    speedSpan.innerHTML = speed.toFixed(1);
});

实体

var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
    url : '../../SampleData/models/CesiumAir/Cesium_Air.glb',
    modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
    minimumPixelSize : 128
}));

planePrimitive.readyPromise.then(function(model) {
    // Play and loop all animations at half-speed
    model.activeAnimations.addAll({
        multiplier : 0.5,
        loop : Cesium.ModelAnimationLoop.REPEAT
    });

    // Zoom to model
    r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
    controller.minimumZoomDistance = r * 0.5;
    Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
    var heading = Cesium.Math.toRadians(230.0);
    var pitch = Cesium.Math.toRadians(-20.0);
    hpRange.heading = heading;
    hpRange.pitch = pitch;
    hpRange.range = r * 50.0;
    camera.lookAt(center, hpRange);
});



var entityPath = viewer.entities.add({
    position : pathPosition,
    name : 'path',	// 显示给用户的可读名称。它不一定是唯一的。
    path : {		// 与此实体关联的路径。描述一条折线，该折线定义为a Entity随时间移动而产生的路径。
        show : true,		// 一个布尔值，指定路径的可见性。
        leadTime : 0,		// 一个属性，指定要显示的对象后面的秒数。
        trailTime : 60,		// 一个属性，指定要显示的对象前面的秒数。
        width : 10,		// 数字属性，指定宽度（以像素为单位）。
        resolution : 1,		// 一个数字属性，指定采样位置时要步进的最大秒数
        material : new Cesium.PolylineGlowMaterialProperty({		// 一个属性，指定用于绘制路径的材质。 一个MaterialProperty映射到折线发光Material制服的。
            glowPower : 0.3,	// 个数字属性，指定逐渐减小效果的强度，以总线长度的百分比表示。如果为1.0或更高，则不使用锥度效果。
            taperPower : 0.3,	// 一个数字属性，指定发光强度，占总线宽的百分比。
            color : Cesium.Color.PALEGOLDENROD		// 一个指定Color行的属性。
        })
    }
});

基础知识

聚焦 canvas

var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.addEventListener('click', function() {
    canvas.focus();
});
canvas.focus();

笛卡尔 集合

new Cesium.Cartesian3(x, y, z)

.ZERO对象：An immutable Cartesian3 instance initialized to (0.0, 0.0, 0.0).
.UNIT_X对象：An immutable Cartesian3 instance initialized to (1.0, 0.0, 0.0).
.UNIT_Y对象：An immutable Cartesian3 instance initialized to (0.0, 1.0, 0.0).
.UNIT_Z对象：An immutable Cartesian3 instance initialized to (0.0, 0.0, 1.0).

原文链接：https://blog.csdn.net/zxzfcsu/article/details/80862821

通过提供的标量将所提供的笛卡尔分量乘以。

Cesium.Cartesian3.multiplyByScalar（笛卡儿，标量，结果）

// 定义一个示例的位置，推测就是一个随机产生的坐标点
var pathPosition = new Cesium.SampledPositionProperty();

小技巧

1. 在 Sandcastle 上，双击关键字，可以点击链接 弹出 帮助文档

2. 下面的窗口可以往下拽关闭、隐藏掉窗口