将HTML元素放在铯实体的位置上 [英] Place an HTML element on a Cesium Entity's position

问题描述

我需要基于铯实体的位置来定义html元素的位置。我已经使用了鼠标位置（ Cesium.Cartesian3.clone（movement.endPosition））作为测试，它可以在窗口坐标中使用。因此，我需要获取实体位置，将其转​​换为WGS84坐标，将其转换为窗口坐标，并将其用于 element.style.left = window_coord.x 和 element.style.top = window_coord.y 。

所以我得到了entity.position，x，y和z值正确。但是，当我想将它们转换为WGS84坐标时，出现了问题，我得到了纬度，经度和高度的NaN值。


这些是我尝试过的变体，都导致纬度，经度和高度的NaN：

I need to define the location of an html element based on the location of a Cesium entity. I've used the mouse position (Cesium.Cartesian3.clone(movement.endPosition)), which is in window coordinates, as a test and it works. So I need to get the entity position, transform it to the WGS84 coordinates, transform those to the window coordinates and use them for element.style.left = window_coord.x and element.style.top = window_coord.y.
So I get the entity.position and the x, y and z values are right. However when I want to convert them to WGS84 coordinates something goes wrong and I get NaN for lat, lon and height.

These are the variations I've tried, both result in NaN for lat, lon and height:

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坐标，但这将是一个愚蠢的解决方法。关于如何在不影响用户体验的情况下执行此操作的任何想法。

My other idea was manually calculating the WGS84 coordinates but this would be such a dumb workaround. Any ideas on how I could do this without influencing the user experience.

推荐答案

获取实体的位置必须使用 entity.position.getValue（clock.currentTime）函数，因为实体可以移动位置发生变化的对象。

Getting the entity's position must be done with the entity.position.getValue(clock.currentTime) function, because entities can be moving objects with changing positions.

跟随实体位置的HTML元素的演示。

// 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';
    }
});

这篇关于将HTML元素放在铯实体的位置上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！