cesium 画多边形轮廓
时间: 2025-01-10 11:43:55 浏览: 116
### 绘制多边形轮廓线
在 Cesium 中绘制多边形轮廓线可以通过 `PolygonGraphics` 和 `MaterialProperty` 来实现。通过设置 `outline` 属性为 `true` 并指定 `outlineColor` 可以创建具有明显边缘的多边形。
下面是一个完整的 JavaScript 函数用于实现实时绘制带轮廓的多边形:
```javascript
function drawOutlinedPolygon(viewer) {
var activePositions;
var polygon;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(click) {
var cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
if (Cesium.defined(cartesian)) {
if (!Cesium.defined(activePositions)) {
activePositions = [cartesian];
polygon = viewer.entities.add({
name : '可编辑多边形',
polygon : {
hierarchy : new Cesium.CallbackProperty(function() {
return new Cesium.PolygonHierarchy(new Cesium.Cartesian3.fromArray(activePositions));
}, false),
material : Cesium.Color.BLUE.withAlpha(0.5), // 填充颜色
outline : true,
outlineColor : Cesium.Color.BLACK // 轮廓颜色
}
});
} else {
activePositions.push(cartesian);
}
viewer.flyTo(polygon);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
```
此函数会在每次点击地图时向多边形添加新的顶点,直到用户停止交互为止[^3]。为了确保良好的用户体验,在实际应用中可能还需要加入结束绘图逻辑以及清除功能。
阅读全文
相关推荐















