Search code examples
cesiumjs

Why can't I control the strokeWidth when using Cesium's GeoJsonDataSource?

Using Cesium Sandcastle, if I have:

HTML body & css

<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

JavaScript Code:

const osm = new Cesium.OpenStreetMapImageryProvider({
  url : 'https://a.tile.openstreetmap.org/'
});

const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(osm),
  baseLayerPicker: false,
  geocoder: false,
  creditViewport: null,
});

const geometry = {
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "geometries": [          
          {
            "coordinates": [[
              [-120, 30],
              [-120, 45],
              [-90, 45],
              [-90, 30],
              [-120, 30]
            ]],
            "type": "Polygon"
          }
        ],
        "type": "GeometryCollection"
      },
      "properties": {
        "name": "stroke"
      },
      "type": "Feature"
    },
  ]
}

const source = new Cesium.GeoJsonDataSource('stroke')

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)
})

This produces an image which looks like:

result image

The documentation states for strokeWidth:

The default width of polylines and polygon outlines.

I have a polygon. There is nothing else that should be effecting strokeWidth. Why is the polygon outline so thin?

Solution

  • Are you on Windows by chance?

    According to this post it looks like you're not the only one facing this problem. It's not an issue with Cesium at all, the problem lies with WebGL.

    Even Cesium's own demo sandcastle code doesn't render border width correctly for me.

    Cesium Sandcastle