Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not able to style water color #724

Open
stripathix opened this issue Nov 11, 2019 · 4 comments
Open

Not able to style water color #724

stripathix opened this issue Nov 11, 2019 · 4 comments

Comments

@stripathix
Copy link

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:
image

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

@stripathix
Copy link
Author

Also lineDash has no effect on styling border.

@gberaudo
Copy link
Member

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
Copy link
Author

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

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

@gberaudo
Copy link
Member

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants