Render polygons according to orientation and kilometers #11975

JerryHub-dev · 2024-05-10T02:41:26Z

What happened?

Render polygons according to orientation and mileage errors

Error message:
Error in v-on handler (Promise/async) "DeveloperError: radians is required

Reproduction steps

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CesiumJS Polygon Example</title>
  <style>
    @import url(https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css);
    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js"></script>
  <script>
    // 初始化 Cesium viewer
    const viewer = new Cesium.Viewer('cesiumContainer');

    // 假设您有一个包含方向和距离对象的数组
    const pathData = [
      { heading: 45, distance: 10 },
      { heading: 90, distance: 20 },
      { heading: 180, distance: 15 },
      { heading: 270, distance: 25 },
    ];

    // 定义初始位置
    const startPosition = Cesium.Cartesian3.fromDegrees(-112.0, 36.0);

    // 遍历路径数据并计算每个点的位置
    let position = startPosition;
    const positions = [position];
    for (const { heading, distance } of pathData) {
      position = Cesium.Cartesian3.fromDegrees(
        Cesium.Math.toDegrees(position.longitude) + distance * Math.cos(Cesium.Math.toRadians(heading)) / 111.32,
        Cesium.Math.toDegrees(position.latitude) + distance * Math.sin(Cesium.Math.toRadians(heading)) / 111.32
      );
      positions.push(position);
    }
    positions.push(startPosition); // 闭合多边形

    // 创建 PolygonHierarchy 实例
    const polygonHierarchy = new Cesium.PolygonHierarchy(positions);

    // 创建 PolygonOutlineGeometry 实例
    const polygonOutlineGeometry = new Cesium.PolygonOutlineGeometry({
      polygonHierarchy: polygonHierarchy,
      height: 0,
      ellipsoid: Cesium.Ellipsoid.WGS84
    });

    // 创建 PolygonGeometry 实例
    const polygonGeometry = Cesium.PolygonGeometry.createGeometry(new Cesium.PolygonGeometry({
      polygonHierarchy: polygonHierarchy,
      height: 0,
      vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
      ellipsoid: Cesium.Ellipsoid.WGS84
    }));

    // 创建 PolygonOutlinePrimitive 实例
    const polygonOutlinePrimitive = new Cesium.PrimitiveCollection();
    polygonOutlinePrimitive.add(new Cesium.GroundPrimitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: polygonOutlineGeometry,
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED),
        },
      }),
    }));

    // 创建 PolygonPrimitive 实例
    const polygonPrimitive = new Cesium.PrimitiveCollection();
    polygonPrimitive.add(new Cesium.GroundPrimitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.GroundPolylineGeometry({
          geometry: polygonGeometry
        }),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOW.withAlpha(0.5)),
        },
      }),
    }));

    // 将 PolygonOutlinePrimitive 和 PolygonPrimitive 添加到场景
    viewer.scene.primitives.add(polygonOutlinePrimitive);
    viewer.scene.primitives.add(polygonPrimitive);
  </script>
</body>
</html>

Sandcastle example

No response

Environment

Browser: Edge
CesiumJS Version: 1.79
Operating System: windows 11 (64)

syzdev · 2024-05-10T03:21:27Z

It seems that this code is generated by AI, so there may be more than one error. The reason for the error is the wrong variable type. The startPosition type is Cartesian3, and you need to use Cartographic to create the startPosition.

ggetz · 2024-05-10T13:11:55Z

Hi @JerryHub-dev,

The Polygon Sandcastle example may have a code sample relevant to your use case.

CesiumJS is a big project, so we use GitHub for feature requests and bug tracking exclusively. In the future, please take any questions to the Cesium Forum where there are members of the community and developers from the team who can help. Thanks!

JerryHub-dev added needs triage type - bug labels May 10, 2024

ggetz closed this as completed May 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Render polygons according to orientation and kilometers #11975

Render polygons according to orientation and kilometers #11975

JerryHub-dev commented May 10, 2024

syzdev commented May 10, 2024

ggetz commented May 10, 2024

Render polygons according to orientation and kilometers #11975

Render polygons according to orientation and kilometers #11975

Comments

JerryHub-dev commented May 10, 2024

What happened?

Reproduction steps

Sandcastle example

Environment

syzdev commented May 10, 2024

ggetz commented May 10, 2024