cesium-examples/map/3d/static/Cesium/Build/Documentation/BaseLayerPicker.html

775 lines
56 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BaseLayerPicker - Cesium Documentation</title>
<!--[if lt IE 9]>
<script src="javascript/html5.js"></script>
<![endif]-->
<link href="styles/jsdoc-default.css" rel="stylesheet">
<link href="styles/prism.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1 class="page-title">
<a href="index.html"><img src="Images/CesiumLogo.png" class="cesiumLogo"></a>
BaseLayerPicker
<div class="titleCenterer"></div>
</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<div class="nameContainer">
<h4 class="name" id="BaseLayerPicker">
<a href="#BaseLayerPicker" class="doc-link"></a>
new Cesium.BaseLayerPicker<span class="signature">(container, options)</span>
<div class="source-link rightLinks">
<a href="https://github.com/AnalyticalGraphicsInc/cesium/blob/1.58/Source/Widgets/BaseLayerPicker/BaseLayerPicker.js#L103">Widgets/BaseLayerPicker/BaseLayerPicker.js 103</a>
</div>
</h4>
</div>
<div class="description">
<span style="display: block; text-align: center;"> <img src="Images/BaseLayerPicker.png" width="264" height="287" alt="" /> <br />BaseLayerPicker with its drop-panel open. </span> <br /><br /> The BaseLayerPicker is a single button widget that displays a panel of available imagery and terrain providers. When imagery is selected, the corresponding imagery layer is created and inserted as the base layer of the imagery collection; removing the existing base. When terrain is selected, it replaces the current terrain provider. Each item in the available providers list contains a name, a representative icon, and a tooltip to display more information when hovered. The list is initially empty, and must be configured before use, as illustrated in the below example.
</div>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>container</code></td>
<td class="type">
<span class="param-type">Element</span>
|
<span class="param-type">String</span>
</td>
<td class="description last">
The parent HTML container node or ID for this widget.</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">
Object with the following properties:
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>globe</code></td>
<td class="type">
<span class="param-type"><a href="Globe.html">Globe</a></span>
</td>
<td class="default">
</td>
<td class="description last">
The Globe to use.</td>
</tr>
<tr>
<td class="name"><code>imageryProviderViewModels</code></td>
<td class="type">
<span class="param-type">Array.&lt;<a href="ProviderViewModel.html">ProviderViewModel</a>></span>
</td>
<td class="default">
<code class="language-javascript">[]</code>
</td>
<td class="description last">
<span class="optional">optional</span>
The array of ProviderViewModel instances to use for imagery.</td>
</tr>
<tr>
<td class="name"><code>selectedImageryProviderViewModel</code></td>
<td class="type">
<span class="param-type"><a href="ProviderViewModel.html">ProviderViewModel</a></span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
The view model for the current base imagery layer, if not supplied the first available imagery layer is used.</td>
</tr>
<tr>
<td class="name"><code>terrainProviderViewModels</code></td>
<td class="type">
<span class="param-type">Array.&lt;<a href="ProviderViewModel.html">ProviderViewModel</a>></span>
</td>
<td class="default">
<code class="language-javascript">[]</code>
</td>
<td class="description last">
<span class="optional">optional</span>
The array of ProviderViewModel instances to use for terrain.</td>
</tr>
<tr>
<td class="name"><code>selectedTerrainProviderViewModel</code></td>
<td class="type">
<span class="param-type"><a href="ProviderViewModel.html">ProviderViewModel</a></span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
The view model for the current base terrain layer, if not supplied the first available terrain layer is used.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h5>Throws:</h5>
<ul>
<li>
<div class="param-desc">
<span class="param-type"><a href="DeveloperError.html">DeveloperError</a></span>
: Element with id "container" does not exist in the document.
</div>
</li>
</ul>
<dl class="details">
<h5>Example:</h5>
<pre><code class="language-javascript">// In HTML head, include a link to the BaseLayerPicker.css stylesheet, // and in the body, include: &lt;div id="baseLayerPickerContainer" // style="position:absolute;top:24px;right:24px;width:38px;height:38px;">&lt;/div> //Create the list of available providers we would like the user to select from. //This example uses 3, OpenStreetMap, The Black Marble, and a single, non-streaming world image. var imageryViewModels = []; imageryViewModels.push(new Cesium.ProviderViewModel({ name : 'Open\u00adStreet\u00adMap', iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'), tooltip : 'OpenStreetMap (OSM) is a collaborative project to create a free editable \ map of the world.\nhttp://www.openstreetmap.org', creationFunction : function() { return Cesium.createOpenStreetMapImageryProvider({ url : 'https://a.tile.openstreetmap.org/' }); } })); imageryViewModels.push(new Cesium.ProviderViewModel({ name : 'Earth at Night', iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blackMarble.png'), tooltip : 'The lights of cities and villages trace the outlines of civilization \ in this global view of the Earth at night as seen by NASA/NOAA\'s Suomi NPP satellite.', creationFunction : function() { return new Cesium.IonImageryProvider({ assetId: 3812 }); } })); imageryViewModels.push(new Cesium.ProviderViewModel({ name : 'Natural Earth\u00a0II', iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'), tooltip : 'Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/', creationFunction : function() { return Cesium.createTileMapServiceImageryProvider({ url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') }); } })); //Create a CesiumWidget without imagery, if you haven't already done so. var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer', { imageryProvider: false }); //Finally, create the baseLayerPicker widget using our view models. var layers = cesiumWidget.imageryLayers; var baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', { globe : cesiumWidget.scene.globe, imageryProviderViewModels : imageryViewModels });</code></pre>
<h5>See:</h5>
<ul class="see-list">
<li><a href="TerrainProvider.html">TerrainProvider</a></li>
<li><a href="ImageryProvider.html">ImageryProvider</a></li>
<li><a href="ImageryLayerCollection.html">ImageryLayerCollection</a></li>
</ul>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<div class="nameContainer">
<h4 class="name" id="container">
<a href="#container" class="doc-link"></a>
container<span class="type-signature"> : Element</span>
<div class="source-link rightLinks">
<a href="https://github.com/AnalyticalGraphicsInc/cesium/blob/1.58/Source/Widgets/BaseLayerPicker/BaseLayerPicker.js#L254">Widgets/BaseLayerPicker/BaseLayerPicker.js 254</a>
</div>
</h4>
</div>
<div class="description">
Gets the parent container.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="viewModel">
<a href="#viewModel" class="doc-link"></a>
viewModel<span class="type-signature"> : <a href="BaseLayerPickerViewModel.html">BaseLayerPickerViewModel</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/AnalyticalGraphicsInc/cesium/blob/1.58/Source/Widgets/BaseLayerPicker/BaseLayerPicker.js#L266">Widgets/BaseLayerPicker/BaseLayerPicker.js 266</a>
</div>
</h4>
</div>
<div class="description">
Gets the view model.
</div>
<dl class="details">
</dl>
<h3 class="subsection-title">Methods</h3>
<div class="nameContainer">
<h4 class="name" id="destroy">
<a href="#destroy" class="doc-link"></a>
destroy<span class="signature">()</span>
<div class="source-link rightLinks">
<a href="https://github.com/AnalyticalGraphicsInc/cesium/blob/1.58/Source/Widgets/BaseLayerPicker/BaseLayerPicker.js#L284">Widgets/BaseLayerPicker/BaseLayerPicker.js 284</a>
</div>
</h4>
</div>
<div class="description">
Destroys the widget. Should be called if permanently removing the widget from layout.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="isDestroyed">
<a href="#isDestroyed" class="doc-link"></a>
isDestroyed<span class="signature">()</span> &rarr; <span class="type-signature returnType">Boolean</span>
<div class="source-link rightLinks">
<a href="https://github.com/AnalyticalGraphicsInc/cesium/blob/1.58/Source/Widgets/BaseLayerPicker/BaseLayerPicker.js#L276">Widgets/BaseLayerPicker/BaseLayerPicker.js 276</a>
</div>
</h4>
</div>
<h5>Returns:</h5>
<div class="param-desc">
true if the object has been destroyed, false otherwise.
</div>
<dl class="details">
</dl>
</article>
</section>
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a>
</footer>
</div>
<div class="nav">
<div class="menu">
<input type="text" class="classFilter" id="ClassFilter" placeholder="Search">
<ul id="ClassList"><li data-name="Animation"><a href="Animation.html">Animation</a></li><li data-name="AnimationViewModel"><a href="AnimationViewModel.html">AnimationViewModel</a></li><li data-name="Appearance"><a href="Appearance.html">Appearance</a></li><li data-name="ArcGisMapServerImageryProvider"><a href="ArcGisMapServerImageryProvider.html">ArcGisMapServerImageryProvider</a></li><li data-name="ArcType"><a href="ArcType.html">ArcType</a></li><li data-name="AssociativeArray"><a href="AssociativeArray.html">AssociativeArray</a></li><li data-name="AxisAlignedBoundingBox"><a href="AxisAlignedBoundingBox.html">AxisAlignedBoundingBox</a></li><li data-name="barycentricCoordinates"><a href="barycentricCoordinates.html">barycentricCoordinates</a></li><li data-name="BaseLayerPicker"><a href="BaseLayerPicker.html">BaseLayerPicker</a></li><li data-name="BaseLayerPickerViewModel"><a href="BaseLayerPickerViewModel.html">BaseLayerPickerViewModel</a></li><li data-name="Billboard"><a href="Billboard.html">Billboard</a></li><li data-name="BillboardCollection"><a href="BillboardCollection.html">BillboardCollection</a></li><li data-name="BillboardGraphics"><a href="BillboardGraphics.html">BillboardGraphics</a></li><li data-name="BillboardVisualizer"><a href="BillboardVisualizer.html">BillboardVisualizer</a></li><li data-name="binarySearch"><a href="binarySearch.html">binarySearch</a></li><li data-name="BingMapsApi"><a href="BingMapsApi.html">BingMapsApi</a></li><li data-name="BingMapsGeocoderService"><a href="BingMapsGeocoderService.html">BingMapsGeocoderService</a></li><li data-name="BingMapsImageryProvider"><a href="BingMapsImageryProvider.html">BingMapsImageryProvider</a></li><li data-name="BingMapsStyle"><a href="BingMapsStyle.html">BingMapsStyle</a></li><li data-name="BlendEquation"><a href="BlendEquation.html">BlendEquation</a></li><li data-name="BlendFunction"><a href="BlendFunction.html">BlendFunction</a></li><li data-name="BlendingState"><a href="BlendingState.html">BlendingState</a></li><li data-name="BlendOption"><a href="BlendOption.html">BlendOption</a></li><li data-name="BoundingRectangle"><a href="BoundingRectangle.html">BoundingRectangle</a></li><li data-name="BoundingSphere"><a href="BoundingSphere.html">BoundingSphere</a></li><li data-name="BoxEmitter"><a href="BoxEmitter.html">BoxEmitter</a></li><li data-name="BoxGeometry"><a href="BoxGeometry.html">BoxGeometry</a></li><li data-name="BoxGeometryUpdater"><a href="BoxGeometryUpdater.html">BoxGeometryUpdater</a></li><li data-name="BoxGraphics"><a href="BoxGraphics.html">BoxGraphics</a></li><li data-name="BoxOutlineGeometry"><a href="BoxOutlineGeometry.html">BoxOutlineGeometry</a></li><li data-name="CallbackProperty"><a href="CallbackProperty.html">CallbackProperty</a></li><li data-name="Camera"><a href="Camera.html">Camera</a></li><li data-name="CameraEventAggregator"><a href="CameraEventAggregator.html">CameraEventAggregator</a></li><li data-name="CameraEventType"><a href="CameraEventType.html">CameraEventType</a></li><li data-name="cancelAnimationFrame"><a href="cancelAnimationFrame.html">cancelAnimationFrame</a></li><li data-name="Cartesian2"><a href="Cartesian2.html">Cartesian2</a></li><li data-name="Cartesian3"><a href="Cartesian3.html">Cartesian3</a></li><li data-name="Cartesian4"><a href="Cartesian4.html">Cartesian4</a></li><li data-name="Cartographic"><a href="Cartographic.html">Cartographic</a></li><li data-name="CartographicGeocoderService"><a href="CartographicGeocoderService.html">CartographicGeocoderService</a></li><li data-name="CatmullRomSpline"><a href="CatmullRomSpline.html">CatmullRomSpline</a></li><li data-name="Cesium3DTile"><a href="Cesium3DTile.html">Cesium3DTile</a></li><li data-name="Cesium3DTileColorBlendMode"><a href="Cesium3DTileColorBlendMode.html">Cesium3DTileColorBlendMode</a></li><li data-name="Cesium3DTileContent"><a href="Cesium3DTileContent.html">Cesium3DTileContent</a></li><li data-name="Cesium3DTileFeature"><a href="Cesium3DTileFeature.html">Cesium3DTileFeature</a></li><li data-name="Cesium3DTilePointFeature"><a href="Cesium3
</div>
</div>
<script>
if (window.frameElement) {
document.body.className = 'embedded';
var ele = document.createElement('a');
ele.className = 'popout';
ele.target = '_blank';
ele.href = window.location.href;
ele.title = 'Pop out';
document.getElementById('main').appendChild(ele);
}
// Set targets on external links. Sandcastle and GitHub shouldn't be embedded in any iframe.
Array.prototype.forEach.call(document.getElementsByTagName('a'), function(a) {
if (/^https?:/i.test(a.getAttribute('href'))) {
a.target='_blank';
}
});
</script>
<script src="javascript/prism.js"></script>
<script src="javascript/cesiumDoc.js"></script>
</body>
</html>