OpenLayers - Cesium integration library. Create your map using OpenLayers, and visualize it on a globe with Cesium. See live examples.
Since version 2.0, the code is entirely based on ES6 modules and syntax.
It requires OpenLayers 5.x.
A convenient ES6 package olcs
is available on npm.
Switch smoothly between 2D and 3D and synchronize:
- Map context (bounding box and zoom level);
- Raster data sources;
- Vector data sources in 2D and 3D;
- Map selection (selected items);
- Animated transitions between map and globe view.
The library is configurable and extensible and allows:
- Lazy or eager loading of Cesium
- Limiting Cesium resource consumption (idle detection)
For synchronization of maps in projections other than EPSG:4326 and EPSG:3857, see #562 branch.
There are several ways to use OL-Cesium in your application.
npm i --save olcs
Then import the parts you need. Example:
import OLCesium from 'olcs/OLCesium.js';
const ol3d = new OLCesium({map: ol2dMap}); // ol2dMap is the ol.Map instance
ol3d.setEnabled(true);
For Cesium integration see ol-cesium-webpack-example
based on the official Cesium With Webpack
example.
- build the library in dist/olcs.js:
npm i --save olcs
npm run build-library
-
get the CSS from css/olcs.css;
-
if needed build a full OL5 build;
-
use as follow:
const ol3d = new olcs.OLCesium({map: ol2dMap}); // ol2dMap is the ol.Map instance
ol3d.setEnabled(true);
In addition, see the old fashioned example.
See the examples.
If you are new to Cesium, you should also check the Cesium tutorials.
This is useful for contributing to Ol-Cesium, because it loads the source files instead of a minified build:
$ make serve
will make the distribution examples available at http://localhost:3000/examples
Passing the parameter ?mode=dev
to an example will load the debug version of
Cesium instead of the minified one. This is helpful when something breaks inside
Cesium. In distribution mode, an unminified version of OpenLayers and Ol-Cesium is
also loaded.
-
OpenLayers unmanaged layers are not discoverable and as a consequence not supported. Plain layers should be used instead or the synchronization managed manually. See openlayers#350.
-
OpenLayers interactions are not supported in 3d. See openlayers#655.
See RELEASE.md.