cesium polygon添加边界线不起作用
时间: 2023-08-19 20:09:04 浏览: 324
你好!对于Cesium中的多边形添加边界线的问题,通常情况下,多边形的边界线是默认显示的,不需要额外的配置。但是,如果你发现边界线没有显示出来,可以尝试以下几个解决方法:
1. 检查多边形的坐标是否正确:确保你传递给多边形的坐标是正确的,并且按照正确的顺序连接起来。如果坐标不正确,可能会导致多边形无法正确显示边界线。
2. 确定边界线的样式:使用Cesium的多边形实例的`material`属性来设置边界线的样式。你可以使用`ColorMaterialProperty`来设置边界线的颜色,例如:`polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED)`。
3. 检查视图设置:如果你发现边界线在特定视图中无法显示,可能是因为视图设置不正确。确保你的相机位置和视角都能够看到多边形,并且没有被其他物体遮挡。
希望这些解决方法能够帮助你解决问题!如果还有其他问题,请随时提问。
相关问题
cesium polygon 轮廓
### 绘制 Cesium 多边形轮廓线
在 Cesium 中绘制多边形轮廓线可以通过 `PolygonGraphics` 对象中的属性进行配置。尽管存在一些局限性,比如 `outlineWidth` 属性可能不会按预期工作[^3],仍然有多种方式可以实现这一目标。
#### 使用默认轮廓功能
最简单的方法是利用内置的 `outline` 和 `outlineColor` 属性来显示多边形边界:
```javascript
viewer.entities.add({
polygon : {
hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([
-72.0, 40.0,
-70.0, 40.0,
-70.0, 38.0,
-72.0, 38.0
])),
material : Cesium.Color.TRANSPARENT,
outline : true,
outlineColor : Cesium.Color.RED
}
});
```
此代码片段展示了如何创建一个透明填充颜色并带有红色边缘线条的矩形区域。
然而,如果对于更粗的轮廓需求,则需要采取其他策略因为标准 API 不支持自定义宽度设置。
#### 替代方案:通过 WallPrimitive 实现加宽效果
为了克服上述限制,一种常见的做法是在多边形周围构建墙体 (`Wall`) 来模拟较厚的边界线。这种方法涉及额外计算顶点坐标以形成围绕原始几何图形的一圈墙结构。
以下是基于该思路的一个简化例子:
```javascript
function createThickOutline(viewer, positions, color, width) {
const cartesians = Cesium.Cartesian3.fromDegreesArray(positions);
// 创建两个平行于地面的高度层,间隔为指定宽度
let topPositions = [];
let bottomPositions = [];
for (let i = 0; i < cartesians.length; ++i) {
topPositions.push(cartesians[i]);
bottomPositions.unshift(Cesium.Cartographic.toCartesian(
Cesium.Cartographic.fromCartesian(cartesians[i]),
viewer.scene.globe.ellipsoid));
}
var wallInstance = new Cesium.GeometryInstance({
geometry : new Cesium.WallGeometry({
positions : [...topPositions,...bottomPositions],
minimumHeights : Array(topPositions.length).fill(width / 2),
maximumHeights : Array(bottomPositions.length).fill(-width / 2)
}),
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(color)
}
});
return new Cesium.Primitive({
geometryInstances : wallInstance,
appearance : new Cesium.PerInstanceColorAppearance()
});
}
// 应用实例化函数
var thickLine = createThickOutline(viewer, [
-72.0, 40.0,
-70.0, 40.0,
-70.0, 38.0,
-72.0, 38.0],
Cesium.Color.BLUE.withAlpha(0.5),
1000);
viewer.scene.primitives.add(thickLine);
```
这段脚本实现了给定位置集合上的蓝色半透明带状物作为增宽后的“轮廓”,其中最后一个参数控制着虚拟‘墙壁’之间的距离从而影响视觉上线条厚度。
cesium 都江堰的边界线只要外框
### 使用 Cesium 获取并绘制都江堰边界的外框坐标
在 WebGIS 应用程序中,特别是使用 Cesium 进行开发时,获取特定地理区域的边界信息是一项常见需求。为了实现这一目标,在 JavaScript 或 TypeScript 编写的前端应用里可以利用 Cesium 提供的功能来加载 GeoJSON 数据源,并基于这些数据创建实体或图层。
对于像都江堰这样的具体地点,如果已经拥有了其多边形形状文件(例如GeoJSON),可以直接通过解析该几何结构得到包围盒(Bounding Box),进而计算出所需的外接矩形四个角点的位置信息[^1]。
下面是一个简单的例子展示如何操作:
```javascript
// 假设 geojson 是包含了都江堰地区范围定义的对象
const dataSource = new Cesium.GeoJsonDataSource();
await dataSource.load(geojson);
let entities = dataSource.entities.values;
if (entities.length === 0) {
console.error('No entity found');
}
for (let i = 0; i < entities.length; ++i) {
let polygonEntity = entities[i];
if (!polygonEntity.polygon) continue;
const boundingSphere = Cesium.BoundingSphere.fromVertices(
Cesium.PolygonPipeline.computeSubdivision(polygonEntity.polygon.hierarchy.getValue().positions, 8)
);
// 获得最小外包球体后转换成矩形区域
var rectangle = Cesium.BoundingRectangle.fromPoints(boundingSphere.center);
}
```
上述代码片段展示了怎样从 `GeoJsonDataSource` 加载的数据集中提取一个多边形实体,并据此构建一个包围它的球体(`BoundingSphere`)。接着将此球体转为矩形(`BoundingRectangle`)表示形式以便于后续处理[^2]。
值得注意的是,实际项目中的地理要素可能更加复杂,因此建议开发者们根据实际情况调整算法逻辑;另外考虑到性能因素,当涉及到大量图形对象时应考虑优化策略以提高渲染效率[^3]。
阅读全文
相关推荐















