cesium 如何用Primitive来实现绘制实时显示的大量轨迹线和轨迹点?
let polylineEntity = null;
let entityList = [];
let positionsArray = [];
function pointPolyline(positions, labelText) {
const cartesian3Array = [];
positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]);
// 移除之前的实体点
for (const entity of entityList) {
viewer.entities.remove(entity);
}
entityList = [];
for (const position of positions) {
let entityIndex = entityList.length;
const cartesian3 = Cesium.Cartesian3.fromDegrees(
position.longitude,
position.latitude,
0.02
);
const pointLabel = new Cesium.Entity({
position: cartesian3,
point: {
pixelSize: 10,
color: Cesium.Color.BLUE,
show: checkedPoint.value,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 1,
},
label: {
text: labelText,
font: '14pt monospace',
show: new Cesium.CallbackProperty(() => {
return entityIndex === entityList.length - 1;
}, false),
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -9),
fillColor: Cesium.Color.WHITE,//标签的文本填充颜色。
outlineColor: Cesium.Color.WHITE,//标签的文本轮廓颜色。
},
});
entityList.push(pointLabel);
viewer.entities.add(pointLabel);
cartesian3Array.push(cartesian3);
}
// 更新轨迹线位置
if (polylineEntity) {
polylineEntity.polyline.positions = new Cesium.CallbackProperty(() => {
return Cesium.Cartesian3.fromDegreesArray(positionsArray);
}, false);
polylineEntity.polyline.show = checkedLines.value;
} else {
// 创建新的轨迹线
polylineEntity = viewer.entities.add({
polyline: {
positions: new Cesium.CallbackProperty(() => {
return Cesium.Cartesian3.fromDegreesArray(positionsArray);
}, false),
width: 15,
// show: checkedLines.value,
material: Cesium.Color.RED,
},
});
}
}
大佬们,请问如何根据后台返回的数据,通过new Cesium.Primitive()进行绘制?
回复
1个回答

test
2024-06-28
const positions = [
{
"pos_lat": 30.57401621295078,
"pos_lon": 104.22444664497841,
},
{
"pos_lat": 30.57401693673619,
"pos_lon": 104.22444659579061,
},
// ...
];
const cartesianPositions = positions.map(pos => {
return Cesium.Cartesian3.fromDegrees(pos.longitude, pos.latitude);
});
const polylineGeometry = new Cesium.PolylineGeometry({
positions: cartesianPositions,
width: 15.0,
vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT
});
const geometryInstance = new Cesium.GeometryInstance({
geometry: polylineGeometry,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
}
});
const polylinePrimitive = new Cesium.Primitive({
geometryInstances: geometryInstance,
appearance: new Cesium.PolylineColorAppearance()
});
viewer.scene.primitives.add(polylinePrimitive);
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容