Hi,
I'm loading a bunch of billboards via Cesium.GeoJsonDataSource. When clicking the billboard, I'm showing an absolute positioned div on top of the billboard. I do this using wgs84ToWindowCoordinates.
What I'm trying to do now is to have the div follow the billboard when panning and zooming, however, I'm not getting the results I'm expecting when subscribing to the scene.preRender event to get the position. The first log I'm getting gives me a selected entity with position coordinates. But from the second one, I seem to be logging the billboard, and I can't seem to get coordinates from that.
Can anyone point me in the right direction on how to get the correct coordinates for the selected entity/billboard in the preRender event?
Thanks in advance!
I'll add my code below:
function sourdoughMap() {
if (!$('.page-library-map').length) {
return;
}
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url : 'XXXX',
credit : 'Mapbox',
tilingScheme : new Cesium.WebMercatorTilingScheme(),
maximumLevel : 20
})
});
var dataSource = new Cesium.GeoJsonDataSource();
var promise = dataSource.load('/profiles/did/themes/didtheme/json/geodata.json');
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
entity.point = undefined;
entity.billboard = new Cesium.BillboardGraphics({
image: new Cesium.ConstantProperty("/profiles/did/themes/didtheme/images/sourdough/icon-perfect.svg"),
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 0.5, 1.5e7, 0.15),
width: 56,
height: 56
});
};
var scene = viewer.scene;
scene.preRender.addEventListener(function(scene, time) {
if(viewer.selectedEntity) {
console.log(viewer.selectedEntity.options);
}
})
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(event) {
var pickedObject = scene.pick(event.position);
if(Cesium.defined(pickedObject)) {
var pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, pickedObject.primitive.position);
if (\('\#cesiumContainer \.infobox'\)\.length\) \{
('#cesiumContainer .infobox').fadeOut(250, function() {
\(this\)\.remove\(\);
('#cesiumContainer').append('<div class="infobox"><div class="balloonshadow"></div><div class="title">Name of the sourdough</div><div class="badges-wrapper"><div class="badge-perfect achieved"></div><div class="badge-featured"></div><div class="badge-library"></div></div><div class="explore"><a class="button">Explore</a></div></div>');
\('\.infobox'\)\.css\(\{left: Math\.round\(pos\.x\), top: Math\.round\(pos\.y\)\}\);
\}\);
\} else \{
('#cesiumContainer').append('<div class="infobox"><div class="balloonshadow"></div><div class="title">Name of the sourdough</div><div class="badges-wrapper"><div class="badge-perfect achieved"></div><div class="badge-featured"></div><div class="badge-library"></div></div><div class="explore"><a class="button">Explore</a></div></div>');
$('.infobox').css({left: Math.round(pos.x), top: Math.round(pos.y)});
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
}
