Cesium: 跟踪实体前方的视图

Question

Cesium: 跟踪实体前方的视图

16

我需要实现一个追踪实体的前视图，它会根据实体的移动而改变。

当我给viewer.trackedEntity属性分配一个值时，相机会假定某个位置。是否可能改变这个位置，使相机直接位于追踪实体的正面？

如何在这个示例中实现这个功能？

var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, 
    selectionIndicator: false,
    shouldAnimate: true, 
    terrainProvider: Cesium.createWorldTerrain()
});

var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 10;

viewer.timeline.zoomTo(start, stop);

var position = new Cesium.SampledPositionProperty();
position.addSample(start, Cesium.Cartesian3.fromDegrees(-118.243683, 34.052235, 500000));
position.addSample(Cesium.JulianDate.addSeconds(start, 250, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-110, 35.5, 500000));
position.addSample(Cesium.JulianDate.addSeconds(start, 500, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-86.134903, 40.267193, 500000));

var entity = viewer.entities.add({
    availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start : start,
        stop : stop
    })]),
    position : position,
    orientation : new Cesium.VelocityOrientationProperty(position),
    model : {
        uri : 'https://cesiumjs.org/Cesium/Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    },
    path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.1,
            color : Cesium.Color.YELLOW
        }),
        width : 10
    }
});

viewer.trackedEntity = entity;

<link href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<script src="https://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>

<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
    <div id="interpolationMenu"></div>
</div>

- ollazarev

你好Ollazarev，能否将答案标记为积极的，这样我们就可以将此问题标记为已解决？ - SirPeople

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SirPeople · Accepted Answer

在向 Cesium.Viewer 添加实体时，您可以在实体中使用一个属性 viewFrom，例如：

var entity = viewer.entities.add({
    availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start : start,
        stop : stop
    })]),
    position : position,
    orientation : new Cesium.VelocityOrientationProperty(position),
    model : {
        uri : 
'https://cesiumjs.org/Cesium/Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    },
    path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.1,
            color : Cesium.Color.YELLOW
        }),
        width : 10
    },
    viewFrom: new Cesium.Cartesian3(30, 0, 0),
});

您可以获得所需的效果，需要注意的是viewFrom是一个Cartesian3对象，因此如果您想要正面视图，其中平面YZ可见，您只需在X轴中设置距离。

免责声明：如评论所指出的那样，这是一个东北天坐标系，因此XYZ取决于车辆本身的方向。

必须承认，文档相当不足，甚至有关于此行为的错误。

但经过他们论坛上长时间的讨论，您就能够了解它是如何工作的。