ol-cesium
Version:
OpenLayers Cesium integration library
276 lines • 15.5 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ol-cesium</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">ol-cesium</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-only-exported" />
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<li>
<a href="globals.html">Globals</a>
</li>
</ul>
<h1> ol-cesium</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<p>OpenLayers - Cesium integration library. Create your map using <a href="https://openlayers.org/">OpenLayers</a>, and visualize it on a globe with <a href="https://cesiumjs.org">Cesium</a>.
See <a href="https://openlayers.org/ol-cesium/examples/">live examples</a>.</p>
<h2 id="es6-modules">ES6 modules</h2>
<p>Since version 2.0, the code is entirely based on ES6 modules and syntax.
It requires OpenLayers 5.x.
A convenient ES6 package <code>olcs</code> is available on npm.</p>
<h2 id="features">Features</h2>
<p>Switch smoothly between 2D and 3D and synchronize:</p>
<ul>
<li>Map context (bounding box and zoom level);</li>
<li>Raster data sources;</li>
<li>Vector data sources in 2D and 3D;</li>
<li>Map selection (selected items);</li>
<li>Animated transitions between map and globe view.</li>
</ul>
<p>The library is configurable and extensible and allows:</p>
<ul>
<li>Lazy or eager loading of Cesium</li>
<li>Limiting Cesium resource consumption (idle detection)</li>
</ul>
<p>For synchronization of maps in projections other than EPSG:4326 and EPSG:3857, see <a href="https://github.com/openlayers/ol-cesium/pull/562">#562</a> branch.</p>
<h2 id="integration-in-your-application">Integration in your application</h2>
<p>There are several ways to use OL-Cesium in your application.</p>
<h3 id="as-an-es6-library-recommended-method-">As an ES6 library (recommended method)</h3>
<pre><code class="language-bash">npm i --save olcs</code></pre>
<p>Then import the parts you need. Example:</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> OLCesium <span class="hljs-keyword">from</span> <span class="hljs-string">'olcs/OLCesium.js'</span>;
<span class="hljs-keyword">const</span> ol3d = <span class="hljs-keyword">new</span> OLCesium({<span class="hljs-attr">map</span>: ol2dMap}); <span class="hljs-comment">// ol2dMap is the ol.Map instance</span>
ol3d.setEnabled(<span class="hljs-literal">true</span>);</code></pre>
<p>For Cesium integration see <a href="https://github.com/gberaudo/ol-cesium-webpack-example">ol-cesium-webpack-example</a>
based on the official <code>Cesium With Webpack</code> example.</p>
<h3 id="as-an-old-fashioned-independant-library">As an old-fashioned independant library</h3>
<ul>
<li><p>build the library in dist/olcs.js:</p>
<pre><code class="language-bash">npm i --save olcs
npm run build-library</code></pre>
</li>
<li><p>get the CSS from css/olcs.css;</p>
</li>
<li><p>if needed build a <a href="https://github.com/geoblocks/legacylib/tree/master/ol5">full OL5 build</a>;</p>
</li>
<li><p>use as follow:</p>
<pre><code class="language-js"><span class="hljs-keyword">const</span> ol3d = <span class="hljs-keyword">new</span> olcs.OLCesium({<span class="hljs-attr">map</span>: ol2dMap}); <span class="hljs-comment">// ol2dMap is the ol.Map instance</span>
ol3d.setEnabled(<span class="hljs-literal">true</span>);</code></pre>
</li>
</ul>
<p>In addition, see the <a href="https://openlayers.org/ol-cesium/examples/oldfashioned.html">old fashioned example</a>.</p>
<h3 id="as-an-umd-library-angular-">As an UMD library (Angular, ...)</h3>
<pre><code class="language-bash">npm i --save ol-cesium</code></pre>
<p>The UMD-specific build is located here: <code>node_modules/ol-cesium/dist/olcesium.umd.js</code> </p>
<p>Then import the parts you need. Example:</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> OLCesium <span class="hljs-keyword">from</span> <span class="hljs-string">'olcs/OLCesium.js'</span>;
<span class="hljs-keyword">const</span> ol3d = <span class="hljs-keyword">new</span> OLCesium({<span class="hljs-attr">map</span>: ol2dMap}); <span class="hljs-comment">// ol2dMap is the ol.Map instance</span>
ol3d.setEnabled(<span class="hljs-literal">true</span>);</code></pre>
<h2 id="going-further">Going further</h2>
<p>See the <a href="https://openlayers.org/ol-cesium/examples/">examples</a>.</p>
<p>If you are new to Cesium, you should also check the <a href="https://cesiumjs.org/tutorials">Cesium tutorials</a>.</p>
<h2 id="running-the-examples-in-debug-mode">Running the examples in debug mode</h2>
<p>This is useful for contributing to Ol-Cesium, because it loads the
source files instead of a minified build:</p>
<pre><code><span class="hljs-variable">$ </span>make serve</code></pre><p>will make the distribution examples available at <a href="http://localhost:3000/examples">http://localhost:3000/examples</a></p>
<h2 id="running-the-unminified-version-of-cesium">Running the unminified version of Cesium</h2>
<p>Passing the parameter <code>?mode=dev</code> 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.</p>
<h2 id="limitations">Limitations</h2>
<ul>
<li><p>OpenLayers unmanaged layers are not discoverable and as a consequence not
supported. Plain layers should be used instead or the synchronization managed
manually. See <a href="https://github.com/openlayers/ol-cesium/issues/350">https://github.com/openlayers/ol-cesium/issues/350</a>.</p>
</li>
<li><p>OpenLayers interactions are not supported in 3d. See <a href="https://github.com/openlayers/ol-cesium/issues/655">https://github.com/openlayers/ol-cesium/issues/655</a>.</p>
</li>
</ul>
<h2 id="release-process">Release process</h2>
<p>See <a href="https://github.com/openlayers/ol-cesium/blob/master/RELEASE.md">RELEASE.md</a>.</p>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="globals.html"><em>Globals</em></a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_index_library_.html">"index.library"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_abstractsynchronizer_.html">"olcs/<wbr>Abstract<wbr>Synchronizer"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_autorenderloop_.html">"olcs/<wbr>Auto<wbr>Render<wbr>Loop"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_camera_.html">"olcs/<wbr>Camera"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_featureconverter_.html">"olcs/<wbr>Feature<wbr>Converter"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_olcesium_.html">"olcs/OLCesium"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_overlaysynchronizer_.html">"olcs/<wbr>Overlay<wbr>Synchronizer"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_rastersynchronizer_.html">"olcs/<wbr>Raster<wbr>Synchronizer"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_synchronizedoverlay_.html">"olcs/<wbr>Synchronized<wbr>Overlay"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_vectorsynchronizer_.html">"olcs/<wbr>Vector<wbr>Synchronizer"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_contrib_lazyloader_.html">"olcs/contrib/<wbr>Lazy<wbr>Loader"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_contrib_manager_.html">"olcs/contrib/<wbr>Manager"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_core_.html">"olcs/core"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_core_olimageryprovider_.html">"olcs/core/OLImagery<wbr>Provider"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_core_vectorlayercounterpart_.html">"olcs/core/<wbr>Vector<wbr>Layer<wbr>Counterpart"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_math_.html">"olcs/math"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_olcs_util_.html">"olcs/util"</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="http://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script>
</body>
</html>