如何使铯点与地图一起旋转？

Question

我正在构建一个cesium应用程序，我需要我的点来表示旋转标题。我正在使用广告牌来显示我创建的图像以显示此标题;但是，当我旋转地球仪时，点不会随之旋转，导致航向指示器不正确。

换句话说，我的广告牌的旋转与屏幕空间保持不变，但与地球不同。

这是纽约的鸟瞰图。有问题的点位于图像的左下角。请注意，标题指示符指向东北方向。

Map.merge(key, value, remappingFunction)

这是相同的视图，但旋转180°使得向上是南方。现在，标题指示器仍然指向屏幕的西北方向，但我需要它指向地球的东北方向，即朝向曼哈顿。

这是显示一个点的代码：

{{1}}

使用globe / map旋转点的最简单/最有效的方法是什么？

Answer 1

你需要做一些事情。

1 - 将广告牌的轮播属性更新为CesiumCallbackProperty。

rotation: new Cesium.CallbackProperty(
  function () {
    return -1 * toRadians(point.heading);
  }, false);

2 - 您需要根据camera's heading更新该点的标题属性。

point.heading = viewer.camera.heading;

3 - 您需要使用铯时钟在某个时间间隔内更新该点：

mapContext.clock.onTick.addEventListener(function() {...});

或使用JavaScripts setInterval

这里设置的所有内容都是如何工作的。 地图上的广告牌从该点连续拉动旋转，如果它发生变化，它将更新地图上的广告牌。每次间隔或时钟滴答时，所使用的值都会根据摄像机的方向而改变。

注意：相机上的标题属性为弧度。

Answer 2

将广告牌的alignedAxis设置为Cesium.Cartesian3.UNIT_Z，而不是默认的屏幕向上矢量。在SandCastle中运行以下示例以证明它有效：

var viewer = new Cesium.Viewer('cesiumContainer');

var position = Cesium.Cartesian3.fromDegrees(-111.572177, 40.582083);

var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider(
{ url : '//assets.agi.com/stk-terrain/world' } 
);
 //viewer.terrainProvider = cesiumTerrainProviderMeshes;
 //viewer.scene.globe.depthTestAgainstTerrain = true;

var ellipsoid = viewer.scene.globe.ellipsoid;
 var billboardCollection = viewer.scene.primitives.add(new Cesium.BillboardCollection(
{ scene : viewer.scene } 
));

billboardCollection.add(
{ position : position, image : '../images/facility.gif', //heightReference : Cesium.HeightReference.CLAMP_TO_GROUND, rotation: Cesium.Math.PI/4, alignedAxis : Cesium.Cartesian3.UNIT_Z } 
);