在铯实体的位置放置一个 HTML 元素
Place an HTML element on a Cesium Entity's position
我需要根据 Cesium 实体的位置定义 html 元素的位置。我使用 window 坐标中的鼠标位置 (Cesium.Cartesian3.clone(movement.endPosition)
) 作为测试,它有效。所以我需要获取实体位置,将其转换为 WGS84 坐标,将其转换为 window 坐标并将它们用于 element.style.left = window_coord.x
和 element.style.top = window_coord.y
。
所以我得到 entity.position 并且 x、y 和 z 值是正确的。但是,当我想将它们转换为 WGS84 坐标时,出现了问题,我得到了经纬度和高度的 NaN。
这些是我尝试过的变体,两者都会导致纬度、经度和高度的结果为 NaN:
var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(entity.position);
or
var carto = Cesium.Cartographic.fromCartesian(entity.position);
or
var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian = viewer.camera.pickEllipsoid(entity.position, ellipsoid);
var carto = ellipsoid.cartesianToCartographic(cartesian);
var entity_pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, carto);
element.style.left = entity_pos.x;
element.style.top = entity_pos.y;
我的另一个想法是手动计算 WGS84 坐标,但这是一个非常愚蠢的解决方法。关于如何在不影响用户体验的情况下执行此操作的任何想法。
获取实体的位置必须使用 entity.position.getValue(clock.currentTime)
函数完成,因为实体可以是位置不断变化的移动对象。
这是一个demo of an HTML element following an entity position。
// Create Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');
// Create a sample HTML element in the document.
var testElement = document.createElement('div');
testElement.style.position = 'absolute';
testElement.style.border = '2px solid #444';
testElement.style.font = '16px sans-serif';
testElement.innerHTML = 'Testing';
viewer.container.appendChild(testElement);
var isEntityVisible = true;
// Create a sample entity
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point : {
pixelSize : 10,
color : Cesium.Color.YELLOW
}
});
// Pre-allocate memory once. Don't re-allocate for each animation frame.
var scratch3dPosition = new Cesium.Cartesian3();
var scratch2dPosition = new Cesium.Cartesian2();
// Every animation frame, update the HTML element position from the entity.
viewer.clock.onTick.addEventListener(function(clock) {
var position3d;
var position2d;
// Not all entities have a position, need to check.
if (entity.position) {
position3d = entity.position.getValue(clock.currentTime, scratch3dPosition);
}
// Moving entities don't have a position for every possible time, need to check.
if (position3d) {
position2d = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
viewer.scene, position3d, scratch2dPosition);
}
// Having a position doesn't guarantee it's on screen, need to check.
if (position2d) {
// Set the HTML position to match the entity's position.
testElement.style.left = position2d.x + 'px';
testElement.style.top = position2d.y + 'px';
// Reveal HTML when entity comes on screen
if (!isEntityVisible) {
isEntityVisible = true;
testElement.style.display = 'block';
}
} else if (isEntityVisible) {
// Hide HTML when entity goes off screen or loses its position.
isEntityVisible = false;
testElement.style.display = 'none';
}
});
我需要根据 Cesium 实体的位置定义 html 元素的位置。我使用 window 坐标中的鼠标位置 (Cesium.Cartesian3.clone(movement.endPosition)
) 作为测试,它有效。所以我需要获取实体位置,将其转换为 WGS84 坐标,将其转换为 window 坐标并将它们用于 element.style.left = window_coord.x
和 element.style.top = window_coord.y
。
所以我得到 entity.position 并且 x、y 和 z 值是正确的。但是,当我想将它们转换为 WGS84 坐标时,出现了问题,我得到了经纬度和高度的 NaN。
这些是我尝试过的变体,两者都会导致纬度、经度和高度的结果为 NaN:
var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(entity.position);
or
var carto = Cesium.Cartographic.fromCartesian(entity.position);
or
var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian = viewer.camera.pickEllipsoid(entity.position, ellipsoid);
var carto = ellipsoid.cartesianToCartographic(cartesian);
var entity_pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, carto);
element.style.left = entity_pos.x;
element.style.top = entity_pos.y;
我的另一个想法是手动计算 WGS84 坐标,但这是一个非常愚蠢的解决方法。关于如何在不影响用户体验的情况下执行此操作的任何想法。
获取实体的位置必须使用 entity.position.getValue(clock.currentTime)
函数完成,因为实体可以是位置不断变化的移动对象。
这是一个demo of an HTML element following an entity position。
// Create Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');
// Create a sample HTML element in the document.
var testElement = document.createElement('div');
testElement.style.position = 'absolute';
testElement.style.border = '2px solid #444';
testElement.style.font = '16px sans-serif';
testElement.innerHTML = 'Testing';
viewer.container.appendChild(testElement);
var isEntityVisible = true;
// Create a sample entity
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point : {
pixelSize : 10,
color : Cesium.Color.YELLOW
}
});
// Pre-allocate memory once. Don't re-allocate for each animation frame.
var scratch3dPosition = new Cesium.Cartesian3();
var scratch2dPosition = new Cesium.Cartesian2();
// Every animation frame, update the HTML element position from the entity.
viewer.clock.onTick.addEventListener(function(clock) {
var position3d;
var position2d;
// Not all entities have a position, need to check.
if (entity.position) {
position3d = entity.position.getValue(clock.currentTime, scratch3dPosition);
}
// Moving entities don't have a position for every possible time, need to check.
if (position3d) {
position2d = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
viewer.scene, position3d, scratch2dPosition);
}
// Having a position doesn't guarantee it's on screen, need to check.
if (position2d) {
// Set the HTML position to match the entity's position.
testElement.style.left = position2d.x + 'px';
testElement.style.top = position2d.y + 'px';
// Reveal HTML when entity comes on screen
if (!isEntityVisible) {
isEntityVisible = true;
testElement.style.display = 'block';
}
} else if (isEntityVisible) {
// Hide HTML when entity goes off screen or loses its position.
isEntityVisible = false;
testElement.style.display = 'none';
}
});