使用Cesium的GeoJsonDataSource时无法控制strokeWidth的原因

数据老陈

2026-7-24

问题原因

你设置的strokeWidth:20是屏幕像素单位，但你的多边形覆盖了跨30经度、15纬度的超大区域，当相机处于默认全局视角时，整个多边形在屏幕上的占比极小，20像素的轮廓线相对于多边形的屏幕尺寸就会显得非常细。

另外，Cesium的GeoJsonDataSource加载多边形后，轮廓线宽度是固定像素值，不会随相机缩放自动调整视觉比例——相机拉得越远，线条看起来就越窄。

解决办法

1. 聚焦到多边形区域

在加载完成后添加相机缩放代码，让镜头拉近到多边形，20像素的轮廓就能正常显示：

source.load(geometry, {
    stroke: new Cesium.Color(1, 1, 0, 1),
    fill: new Cesium.Color(1, 0, 0, .1),
    strokeWidth: 20,
}).then( (result) => {
  viewer.dataSources.add(source);
  // 让相机聚焦到加载的数据源
  viewer.zoomTo(source);
})

2. 改用实体方式创建多边形（更灵活控制轮廓）

如果需要在不同缩放级别保持轮廓的视觉宽度，可以直接创建实体，通过outlineWidth设置，还能结合动态逻辑调整：

viewer.entities.add({
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -120, 30,
      -120, 45,
      -90, 45,
      -90, 30,
      -120, 30
    ]),
    material: new Cesium.Color(1, 0, 0, 0.1),
    outline: true,
    outlineColor: new Cesium.Color(1, 1, 0, 1),
    outlineWidth: 20,
  }
});
// 聚焦到实体
viewer.zoomTo(viewer.entities);