Hi @Luke_McKinstry,
Find attached the images with the overlayed path. Expected behavioure would be like in the Sandcastle example ( Callback Position Property - Cesium Sandcastle)
In the picture with the side view the path is before the 3D model, Thats a known issue and can be ignored.
Next is the source code. Data samples are received via websocket and then attached to the path.
<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup lang="ts">
import { useWebSocket } from "@vueuse/core";
import { Cartesian3, Ion, Math as CesiumMath, Viewer } from "cesium";
import * as Cesium from "cesium";
import { onMounted, watchEffect } from "vue";
import { Position } from "../models/Position.ts";
const emit = defineEmits<{
created: [viewer: Viewer];
}>();
onMounted(async () => {
Ion.defaultAccessToken =
"";
// Set the Default View that is being moved to when the "Home" Button is clicked
let extent = Cesium.Rectangle.fromDegrees(-8, 45, 29, 57);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer("cesiumContainer", {
shouldAnimate: true,
animation: false,
timeline: false,
sceneMode: Cesium.SceneMode.SCENE2D,
mapProjection: new Cesium.WebMercatorProjection(),
baseLayer: new Cesium.ImageryLayer(
new Cesium.OpenStreetMapImageryProvider({
url: import.meta.env.VITE_OSM,
}),
),
});
Cesium.CesiumTerrainProvider.fromUrl(
import.meta.env.VITE_TERRAIN_PROVIDER,
).then((terrainProvider) => (viewer.terrainProvider = terrainProvider));
viewer.camera.flyTo({
destination: Cartesian3.fromDegrees(XX.XX, XX.XX, XXX),
orientation: {
heading: CesiumMath.toRadians(0.0),
pitch: CesiumMath.toRadians(-15.0),
},
});
type DronePosition = {
heading: number;
drone_id: string;
position: Position;
};
type Message = {
drone_position: undefined | DronePosition;
};
const { status, data, send, open, close } = useWebSocket<string>(
import.meta.env.VITE_DATA,
);
watchEffect(() => {
if (data.value !== null) {
const messages = JSON.parse(data.value) as Message[];
for (let i = 0; i < messages.length; i++) {
const message = messages[i];
let id = "";
let location = new Position(0.0, 0.0, 0.0);
let heading = 0.0;
if (message.drone_position !== undefined) {
const position = message.drone_position;
id = position.drone_id;
location = position.position;
heading = position.heading;
}
const entity = viewer.entities.getOrCreateEntity(id);
entity.path = new Cesium.PathGraphics({
show: true,
resolution: 1,
leadTime: 0,
trailTime: 1200,
material:
new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.3,
color: Cesium.Color.RED,
}),
width: 10,
})
if (entity.properties === undefined) {
entity.properties = new Cesium.PropertyBag();
}
const cartesian = Cartesian3.fromDegrees(
location.longitude,
location.latitude,
location.altitude,
);
if (!(entity.position instanceof Cesium.SampledPositionProperty)) {
const posProp = new Cesium.SampledPositionProperty();
const time = Cesium.JulianDate.now();
Cesium.JulianDate.addSeconds(time, 1, time);
posProp.addSample(time, cartesian);
entity.position = new Cesium.SampledPositionProperty();
} else {
const time = Cesium.JulianDate.now();
Cesium.JulianDate.addSeconds(time, 1, time);
entity.position.addSample(time, cartesian);
}
// set 3D model of entity
if (entity.model === undefined) {
entity.model = new Cesium.ModelGraphics({
uri: "./CesiumDrone.glb",
minimumPixelSize: 128,
maximumScale: 20000,
scale: 0.05,
});
}
let heading_correct;
if (heading > 0.0) {
heading_correct = (heading % 360) + 90;
} else {
heading_correct = heading + 360 + 90;
}
const heading_rad = Cesium.Math.toRadians(heading_correct);
const pitch = 0;
const roll = 0;
const hpr = new Cesium.HeadingPitchRoll(heading_rad, pitch, roll);
const orientation = new Cesium.ConstantProperty(
Cesium.Transforms.headingPitchRollQuaternion(cartesian, hpr)
);
entity.orientation = orientation;
}
}
});
emit("created", viewer);
});
</script>
<style>
@import "../../public/static/Cesium/Widgets/widgets.css";
</style>```
Thank
