Cesium态势标绘专题-多边形（标绘+编辑）

**Cesium态势标绘专题-多边形**

在Cesium中，多边形是指由多个点组成的图形。通过使用Cesium的多边形功能，我们可以创建复杂的图形，并对其进行编辑和标绘。

### 一、创建多边形要创建一个多边形，我们需要定义它的顶点坐标。下面是一个简单的例子，创建一个三角形：

javascript// 定义多边形的顶点坐标const vertices = [
 Cesium.Cartesian3.fromDegrees(116.3974,39.9092), // 点A Cesium.Cartesian3.fromDegrees(116.4036,39.9135), // 点B Cesium.Cartesian3.fromDegrees(116.3918,39.9057) // 点C];

// 创建多边形实例const polygon = new Cesium.Polygon({
 hierarchy: new Cesium.PolygonHierarchy(vertices),
 material: new Cesium.ColorMaterialProperty(new Cesium.Color(1,0,0,1)) // 红色填充});

在上面的代码中，我们首先定义了多边形的顶点坐标，然后创建一个`Polygon`实例，传入顶点坐标和材质。

### 二、编辑多边形要对多边形进行编辑，我们可以使用Cesium提供的API来添加或删除顶点。下面是一个示例：

javascript// 编辑多边形polygon.hierarchy.addVertex(new Cesium.Cartesian3.fromDegrees(116.4056,39.9155)); // 添加新顶点// 删除顶点polygon.hierarchy.removeVertex(polygon.hierarchy.vertices[0]); // 删除第一个顶点

在上面的代码中，我们使用`addVertex()`方法添加了一个新的顶点，然后使用`removeVertex()`方法删除了第一个顶点。

### 三、标绘多边形要对多边形进行标绘，我们可以使用Cesium提供的API来创建文本实例。下面是一个示例：

javascript// 创建文本实例const text = new Cesium.Text({
 font: '12px sans-serif',
 outlineWidth:2,
 outlineColor: Cesium.Color.WHITE.withAlpha(0.8),
 scale:1.5,
 pixelOffset: new Cesium.Cartesian3(-10, -20),
 style: Cesium.TextStyle.FILL,
 text: '多边形'
});

// 添加文本实例到场景scene.primitives.add(text);

在上面的代码中，我们使用`Text`类创建了一个文本实例，然后添加到了场景中。

### 四、总结通过以上的示例，我们可以看出Cesium提供了丰富的API来支持多边形的创建、编辑和标绘。我们可以根据具体需求灵活地使用这些API来实现复杂的图形效果。

**参考代码**

javascript// 定义多边形的顶点坐标const vertices = [
 Cesium.Cartesian3.fromDegrees(116.3974,39.9092), // 点A Cesium.Cartesian3.fromDegrees(116.4036,39.9135), // 点B Cesium.Cartesian3.fromDegrees(116.3918,39.9057) // 点C];

// 创建多边形实例const polygon = new Cesium.Polygon({
 hierarchy: new Cesium.PolygonHierarchy(vertices),
 material: new Cesium.ColorMaterialProperty(new Cesium.Color(1,0,0,1)) // 红色填充});

// 编辑多边形polygon.hierarchy.addVertex(new Cesium.Cartesian3.fromDegrees(116.4056,39.9155)); // 添加新顶点// 删除顶点polygon.hierarchy.removeVertex(polygon.hierarchy.vertices[0]); // 删除第一个顶点// 创建文本实例const text = new Cesium.Text({
 font: '12px sans-serif',
 outlineWidth:2,
 outlineColor: Cesium.Color.WHITE.withAlpha(0.8),
 scale:1.5,
 pixelOffset: new Cesium.Cartesian3(-10, -20),
 style: Cesium.TextStyle.FILL,
 text: '多边形'
});

// 添加文本实例到场景scene.primitives.add(text);

**注释**

* `Cesium.Polygon`类用于创建多边形实例。
* `Cesium.PolygonHierarchy`类用于管理多边形的顶点坐标。
* `Cesium.ColorMaterialProperty`类用于设置多边形的填充颜色。
* `Cesium.Text`类用于创建文本实例。
* `scene.primitives.add()`方法用于添加文本实例到场景。