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

作者站长头像
站长
· 阅读数 20

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

回复
1个回答
avatar
test
2024-07-02
// 创建 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,
  },
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容