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:
The library is configurable and extensible and allows:
For synchronization of maps in projections other than EPSG:4326 and EPSG:3857 you need 2 datasets, see the customProj example.
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);
In addition, you need to expose the Cesium library as window.Cesium
.
For this, simply add the Cesium script to your html:
<script type="text/javascript" src="..your_path../Cesium.js"></script>
For Cesium integration with Webpack, see ol-cesium-webpack-example.
npm i --save olcs
npm run build-library
get the CSS and JS from the full build at https://openlayers.org/download/
use as follow:
const ol3d = new olcs.OLCesium({map: ol2dMap}); // ol2dMap is the ol.Map instance
ol3d.setEnabled(true);
For the remaining steps, see the old fashioned example. Notably, you need the Cesium library.
npm i --save ol-cesium
The UMD-specific build is located here: node_modules/ol-cesium/dist/olcesium.umd.js
Then import the parts you need. Example:
import OLCesium from 'ol-cesium';
const ol3d = new OLCesium({map: ol2dMap}); // ol2dMap is the ol.Map instance
ol3d.setEnabled(true);
In addition, you need to expose the Cesium library as window.Cesium
.
For this, simply add the Cesium script to your html:
<script type="text/javascript" src="..your_path../Cesium.js"></script>
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 of the synchronization managed manually. See https://github.com/openlayers/ol-cesium/issues/350.
OpenLayers interactions are not supported in 3d. See https://github.com/openlayers/ol-cesium/issues/655.
See RELEASE.md.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。