前端 - vue3+cesium ，请问如何在cesium里面绘制点和轨迹线？

Question

通过后端返回的多个经纬度，进行绘制多个点以及绘制由多个点组成的轨迹线

Answer 1

// 创建 Cesium.Viewer 实例
const viewer = new Cesium.Viewer('cesiumContainer');

// 后端返回的经纬度数据
const positions = [
  { lon: 116.39, lat: 39.9 },
  { lon: 117.39, lat: 40.9 },
  // ... 更多的点
];

// 添加点
positions.forEach((position, index) => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(position.lon, position.lat),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
    },
    label: {
      text: `点${index + 1}`,
      font: '14pt monospace',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineWidth: 2,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, -9),
    },
  });
});

// 添加轨迹线
viewer.entities.add({
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray(positions.flatMap(pos => [pos.lon, pos.lat])),
    width: 2,
    material: Cesium.Color.RED,
  },
});