Real Time Tracking in React

CesiumJS
1

Hi, I am working on a Cesium project that requires real time tracking. I have tried a lot of things based on the real time flight tracker, but i still can’t see my entities on the position the camera goes. The corresponding parts of the code:
useEffect(() => {
let currentTime = JulianDate.fromDate(new Date());
let clock = new Clock({
startTime: currentTime,
currentTime: currentTime,
multiplier: 1,
clockStep: ClockStep.SYSTEM_CLOCK,
});
if (divRef.current) {
const mapView = new Viewer(divRef.current, {
shouldAnimate: true,
clockViewModel: new ClockViewModel(clock),
automaticallyTrackDataSourceClocks: false,
});
addEntities(mapView, selectedData.track);
if (!runOnce.current) {
setStartingPoint(mapView);
runOnce.current = true;
} else {
mapView.camera.setView({
destination: Cartesian3.fromDegrees(long, lat, 500),
});
}
if (needRunner) {
const hike = hikeData.find((h) => {
if (h.id === selectedData.track) return h;
});
const startTime = fuseTodayToTime(selectedData.time);
livePosition.addSample(
JulianDate.fromDate(startTime),
Cartesian3.fromDegrees(long, lat, 0)
);
const endTime = fuseTodayToTime(hike!.end + “:00”);
if (needTracking) {
if (mapView.entities.getById(“runnerPlay”) !== undefined) {
mapView.entities.removeById(“runnerPlay”);
}
if (mapView.entities.getById(“label”) !== undefined) {
mapView.entities.removeById(“label”);
}
runner = startRunner(
mapView,
long,
lat,
headed,
needRunner,
livePosition
);
mapView.entities.add({
position: livePosition,
id: “label”,
label: {
text: new CallbackProperty(
() => calculateTimeLeft(endTime),
false
),
style: LabelStyle.FILL,
fillColor: Color.CORAL,
},
show: needRunner,
});
mapView.flyTo(runner);
}
} else {
setStartingPoint(mapView);
}
if (selectedData.time !== “”) {
setNeedRunner(true);
}
return () => {
mapView.destroy();
};
}
}, [needRunner, needTracking]);
useEffect(() => {
if (needRunner && needTracking && navigator.geolocation) {
watchid = navigator.geolocation.watchPosition(
(position) => {
JulianDate.addSeconds(JulianDate.now(), 5, date);
livePosition.addSample(
date,
new Cartesian3(
position.coords.longitude,
position.coords.latitude,
10
)
);
runner!.position = livePosition;
time = setTimeout(() => {
if (
position.coords.longitude == 20.53 &&
position.coords.latitude == 47.93
) {
alert(No gps signal! :(");
}
}, 20000);
},
() => {},
{ enableHighAccuracy: true, maximumAge: 250, timeout: 4000 }
);
}
if (runner !== undefined) {
runner.position = livePosition;
}

return () => {
  navigator.geolocation.clearWatch(watchid);
  clearTimeout(time);
};

}, [needRunner, needTracking]);

2

Hi there,

If I understand correctly, the issue you are seeing is that entities are being added to the view, but the camera is not keeping up with the time dynamic updates. Is that correct?

If so, I would suggest setting Viewer.trackedEntity which will automatically have the camera follow an entity as it updates. For example:

mapView.trackedEntity = runner;

If that’s not the case, would you mind putting together a minimal code example using Sandcastle to demonstrate the issue?

3

The problem is not with the camera not tracking the entity. I give a SampledPositionProperty as position and the entity does not show up. I tried to reproduce it in the sandcastle the best as i could