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

 

问题描述:

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


 

第 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,
  },
});

将oneArr 按照 twoArr 的顺序进行排序,而且两个数组可能一样长,也可能不一样长,twoArr 是基于oneArr选中的数据,oneArr 是接口返回的数据, ...