我正在构建一个cesium应用程序,我需要我的点来表示旋转标题。我正在使用广告牌来显示我创建的图像以显示此标题;但是,当我旋转地球仪时,点不会随之旋转,导致航向指示器不正确。
换句话说,我的广告牌的旋转与屏幕空间保持不变,但与地球不同。
这是纽约的鸟瞰图。有问题的点位于图像的左下角。请注意,标题指示符指向东北方向。
Map.merge(key, value, remappingFunction)
这是相同的视图,但旋转180°使得向上是南方。现在,标题指示器仍然指向屏幕的西北方向,但我需要它指向地球的东北方向,即朝向曼哈顿。
这是显示一个点的代码:
{{1}}
使用globe / map旋转点的最简单/最有效的方法是什么?
答案 0 :(得分:0)
你需要做一些事情。
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
这里设置的所有内容都是如何工作的。 地图上的广告牌从该点连续拉动旋转,如果它发生变化,它将更新地图上的广告牌。每次间隔或时钟滴答时,所使用的值都会根据摄像机的方向而改变。
注意:相机上的标题属性为弧度。
答案 1 :(得分:0)
将广告牌的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 }
);