Not able to style water color

[stripathix]

I want to create a planet without any tile layer. The only thing I want is countries drawn as a vector which I am able to draw using selection.html example. But the globe itself is white in color. How can I change the color of the water of the cesium planet?

/**
 * @module examples.selection
 */
import olStyleStroke from 'ol/style/Stroke.js';
import olStyleFill from 'ol/style/Fill.js';
import olStyleStyle from 'ol/style/Style.js';
import OLCesium from 'olcs/OLCesium.js';
import olView from 'ol/View.js';
import olFormatGeoJSON from 'ol/format/GeoJSON.js';
import olSourceVector from 'ol/source/Vector.js';
import olLayerVector from 'ol/layer/Vector.js';
import olSourceOSM from 'ol/source/OSM.js';
import olLayerTile from 'ol/layer/Tile.js';
import olMap from 'ol/Map.js';

const raster = new olLayerTile({
  source: new olSourceOSM()
});

const vector = new olLayerVector({
  source: new olSourceVector({
    format: new olFormatGeoJSON(),
    url: 'data/geojson/geomap.geojson',

  }),
  style:new olStyleStyle({
    stroke: new olStyleStroke({
      color: 'white',
      width: 9
    }),
    fill: new olStyleFill({
      color: 'black'
    })
  })
});

const map = new olMap({
  layers: [vector],
  target: 'map3d',
  view: new olView({
    center: [0, 0],
    zoom: 2
  })
});

const ol3d = new OLCesium({map, target: 'map3d'});
ol3d.setEnabled(true);

It draws planet like below:

Styling of geojson countries is easy but how can i change style of water i.e. planet itself.

[stripathix]

Also lineDash has no effect on styling border.

[gberaudo]

Hi @stripathix, to change the background globe color you simply need to define it on the globe object: globe.baseColor = Cesium.Color.BLUE;.

For dashes, it is not supported yet in Cesium but could probably be easily added. See the olStyleToCesium function and PolylineDash from https://cesium.com/docs/cesiumjs-ref-doc/Material.html.

Would you be willing to contribute a PR for that?

[stripathix]

@gberaudo thanks :-). Yeah I will work on it.

Question: For globe.baseColor, from where does this globe comes from.

[gberaudo]

@stripathix, see here how to get the Cesium scene. From there it is just the Cesium API.

To get the globe: https://cesium.com/docs/cesiumjs-ref-doc/Scene.html?classFilter=scene#globe