GeometryVisualizer

GeometryVisualizer 是 CesiumJS 中的图形可视化工具，它可以呈现各种几何元素，如点、线、多边形、球体等。您可以使用 GeometryVisualizer 在地球上呈现从简单形状到复杂形状的多种几何元素。

创建 GeometryVisualizer 对象

使用以下语法创建 GeometryVisualizer 对象。

var viewer = new Cesium.Viewer("cesiumContainer");
var visualizer = new Cesium.GeometryVisualizer(viewer.scene.primitives);

在上面的语法中， "viewer" 是一个 Cesium 示例。我们使用 Viewer 构造函数创建它。然后，我们使用 Viewer 对象中的场景实例中的"primitives"数组创建 GeometryVisualizer 实例。

添加几何元素

使用以下语法向 GeometryVisualizer 实例添加几何元素。

var point = new Cesium.PointGraphics({
  color: Cesium.Color.YELLOW,
  pixelSize: 10
});

visualizer.add(point);

在上面的代码中，我们创建了一个名为"point"的点图形，并将其添加到 GeometryVisualizer 实例中。

可用的几何元素

GeometryVisualizer 支持以下几何元素。

Point

点由一个点位置、颜色和大小定义。 使用以下语法创建点。

var point = new Cesium.PointGraphics({
  color: Cesium.Color.YELLOW,
  pixelSize: 10
});

Polyline

Polyline 由若干点和线宽度定义。 使用以下语法创建 polyline。

var polyline = new Cesium.PolylineGraphics({
  positions: Cesium.Cartesian3.fromDegreesArrayHeights(
    [-75, 35, 0, -125, 35, 0]),
  width: 10,
  material: new Cesium.ColorMaterialProperty(Cesium.Color.YELLOW)
});

Polygon

Polygon 由若干点、线宽度和填充颜色定义。 使用以下语法创建多边形。

var polygon = new Cesium.PolygonGraphics({
  hierarchy: new Cesium.PolygonHierarchy(
    Cesium.Cartesian3.fromDegreesArrayHeights([-108.0, 42.0, 0.0,
                                               -100.0, 42.0, 0.0,
                                               -104.0, 40.0, 0.0])),
  material: Cesium.Color.BLUE.withAlpha(0.5),
  outline: true,
  outlineColor: Cesium.Color.BLACK
});

Model

模型由若干点、线和纹理图片定义。 使用以下语法创建模型。

var model = new Cesium.ModelGraphics({
  uri: "./Models/CesiumBalloon/CesiumBalloon.glb",
  minimumPixelSize: 128,
  maximumScale: 20000,
  color: Cesium.Color.YELLOW
});

Box

Box 由若干点、线和高度定义。 使用以下语法创建盒子。

var box = new Cesium.BoxGraphics({
  dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
  material: Cesium.Color.RED
});

Ellipse

Ellipse 由中心点、半径和填充颜色定义。

var ellipse = new Cesium.EllipseGraphics({
    semiMinorAxis : 200000.0,
    semiMajorAxis : 300000.0,
    material : Cesium.Color.RED,
});

Circle

Circle 由中心点、半径和填充颜色定义。

var circle = new Cesium.CircleGraphics({
    radius : 200000.0,
    material : Cesium.Color.GREEN,
});

总结

在本文中，您已经学习了如何使用 GeometryVisualizer 将点、线、多边形等几何元素添加到 CesiumJS 地球上。 Cesium 开发人员可以使用这些知识，开发出它们的项目。