npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ol-cesium

v2.17.0

Published

OpenLayers Cesium integration library

Downloads

1,450

Readme

OpenLayers - Cesium integration library. Create your map using OpenLayers, and visualize it on a globe with Cesium. See live examples.

ES6 modules

Since version 2.0, the code is entirely based on ES6 modules and syntax. It requires OpenLayers 6.x. A convenient ES6 package olcs is available on npm.

Features

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 you need 2 datasets, see the customProj example.

Integration in your application

There are several ways to integrate OL-Cesium in your application. In all cases OpenLayers and Cesium are peer-dependencies of OL-Cesium, your application need to depend on a compatible version of OpenLayers and of Cesium. Note that Cesium is accessed through the global window.Cesium object. OpenLayers is accessed through ES6 imports.

As an ES6 library (recommended method)

npm i --save olcs

Then import the parts you need. Example:

import OLCesium from 'olcs/OLCesium';
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.

As an old-fashioned independent library (need update)

  • build the library in dist/olcs.js:
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.

As an UMD library (Angular, ...)

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>

Going further

See the examples.

Use properties to control specific aspects of OL-Cesium integration, see the PROPERTIES.MD.

If you are new to Cesium, you should also check the Cesium tutorials.

Running the examples in debug mode

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

Running the unminified version of Cesium

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.

Limitations

  • 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.

Release process

See RELEASE.md.