javascript - 如何让铯点随 map 旋转？

Question

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

换句话说，我的广告牌的旋转与屏幕空间保持一致，而不是与地球保持一致。

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

这是相同的 View ，但旋转了 180°，因此向上是南。现在，航向指示器仍指向屏幕的西北方向，但我需要它指向地球的东北方向，即朝向曼哈顿。

这是显示一个点的代码:

var entity = {
    id: data.cluster_number + '_' + point.id,
    name: point.id,
    position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
    billboard: {
        image: 'assets/img/point.png',
        color: color,
        rotation: -1 * toRadians(point.heading),
        scale: point.size * 0.07
    }
};

if (!angular.isDefined(viewer.entities.getById(entity.id))) {
    viewer.entities.add(entity);
}

让点随地球/ 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

一旦这里设置好了，它就是如何工作的。 map 上的billboard不断从该点拉动旋转，如果有变化，会更新 map 上的billboard。每次间隔或时钟滴答时，所使用的值都会根据相机的航向而变化。

注意:相机的航向属性以弧度为单位。