wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
qd-changjing/public/static/Build/Documentation/Billboard.html

2610 lines
86 KiB
HTML
Raw Permalink Normal View History

first commit
2022-07-05 16:56:29 +08:00
<!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>Billboard - 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>
Billboard
<div class="titleCenterer"></div>
</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<div class="nameContainer">
<h4 class="name" id="Billboard">
<a href="#Billboard" class="doc-link"></a>
new Cesium.Billboard<span class="signature">()</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L55">Scene/Billboard.js 55</a>
</div>
</h4>
</div>
<div class="description">
A viewport-aligned image positioned in the 3D scene, that is created
and rendered using a <a href="BillboardCollection.html"><code>BillboardCollection</code></a>. A billboard is created and its initial
properties are set by calling <a href="BillboardCollection.html#add"><code>BillboardCollection#add</code></a>.
<br /><br />
<div align='center'>
<img src='Images/Billboard.png' width='400' height='300' /><br />
Example billboards
</div>
</div>
<h5>Performance:</h5>
<p class="description">Reading a property, e.g., <a href="Billboard.html#show"><code>Billboard#show</code></a>, is constant time.
Assigning to a property is constant time but results in
CPU to GPU traffic when <a href="BillboardCollection.html#update"><code>BillboardCollection#update</code></a> is called. The per-billboard traffic is
the same regardless of how many properties were updated. If most billboards in a collection need to be
updated, it may be more efficient to clear the collection with <a href="BillboardCollection.html#removeAll"><code>BillboardCollection#removeAll</code></a>
and add new billboards instead of modifying each one.</p>
<h5>Throws:</h5>
<ul>
<li>
<div class="param-desc">
<span class="param-type"><a href="DeveloperError.html">DeveloperError</a></span>
: scaleByDistance.far must be greater than scaleByDistance.near
</div>
</li>
<li>
<div class="param-desc">
<span class="param-type"><a href="DeveloperError.html">DeveloperError</a></span>
: translucencyByDistance.far must be greater than translucencyByDistance.near
</div>
</li>
<li>
<div class="param-desc">
<span class="param-type"><a href="DeveloperError.html">DeveloperError</a></span>
: pixelOffsetScaleByDistance.far must be greater than pixelOffsetScaleByDistance.near
</div>
</li>
<li>
<div class="param-desc">
<span class="param-type"><a href="DeveloperError.html">DeveloperError</a></span>
: distanceDisplayCondition.far must be greater than distanceDisplayCondition.near
</div>
</li>
</ul>
<dl class="details">
<h5>Demo:</h5>
<ul class="see-list">
<li><a href="https://sandcastle.cesium.com/index.html?src=Billboards.html">Cesium Sandcastle Billboard Demo</a></li>
</ul>
<h5>See:</h5>
<ul class="see-list">
<li><a href="BillboardCollection.html">BillboardCollection</a></li>
<li><a href="BillboardCollection.html#add">BillboardCollection#add</a></li>
<li><a href="Label.html">Label</a></li>
</ul>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<div class="nameContainer">
<h4 class="name" id="alignedAxis">
<a href="#alignedAxis" class="doc-link"></a>
alignedAxis<span class="type-signature"> : <a href="Cartesian3.html">Cartesian3</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L710">Scene/Billboard.js 710</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the aligned axis in world space. The aligned axis is the unit vector that the billboard up vector points towards.
The default is the zero vector, which means the billboard is aligned to the screen up vector.
</div>
<dl class="details">
<h5>Examples:</h5>
<pre><code class="language-javascript">// Example 1.
// Have the billboard up vector point north
billboard.alignedAxis = Cesium.Cartesian3.UNIT_Z;</code></pre>
<pre><code class="language-javascript">// Example 2.
// Have the billboard point east.
billboard.alignedAxis = Cesium.Cartesian3.UNIT_Z;
billboard.rotation = -Cesium.Math.PI_OVER_TWO;</code></pre>
<pre><code class="language-javascript">// Example 3.
// Reset the aligned axis
billboard.alignedAxis = Cesium.Cartesian3.ZERO;</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="color">
<a href="#color" class="doc-link"></a>
color<span class="type-signature"> : <a href="Color.html">Color</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L651">Scene/Billboard.js 651</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the color that is multiplied with the billboard's texture. This has two common use cases. First,
the same white texture may be used by many different billboards, each with a different color, to create
colored billboards. Second, the color's alpha component can be used to make the billboard translucent as shown below.
An alpha of <code>0.0</code> makes the billboard transparent, and <code>1.0</code> makes the billboard opaque.
<br /><br />
<div align='center'>
<table border='0' cellpadding='5'><tr>
<td align='center'><code>default</code><br/><img src='Images/Billboard.setColor.Alpha255.png' width='250' height='188' /></td>
<td align='center'><code>alpha : 0.5</code><br/><img src='Images/Billboard.setColor.Alpha127.png' width='250' height='188' /></td>
</tr></table>
</div>
<br />
The red, green, blue, and alpha values are indicated by <code>value</code>'s <code>red</code>, <code>green</code>,
<code>blue</code>, and <code>alpha</code> properties as shown in Example 1. These components range from <code>0.0</code>
(no intensity) to <code>1.0</code> (full intensity).
</div>
<dl class="details">
<h5>Examples:</h5>
<pre><code class="language-javascript">// Example 1. Assign yellow.
b.color = Cesium.Color.YELLOW;</code></pre>
<pre><code class="language-javascript">// Example 2. Make a billboard 50% translucent.
b.color = new Cesium.Color(1.0, 1.0, 1.0, 0.5);</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="disableDepthTestDistance">
<a href="#disableDepthTestDistance" class="doc-link"></a>
disableDepthTestDistance<span class="type-signature"> : Number</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L832">Scene/Billboard.js 832</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
When set to zero, the depth test is always applied. When set to Number.POSITIVE_INFINITY, the depth test is never applied.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="distanceDisplayCondition">
<a href="#distanceDisplayCondition" class="doc-link"></a>
distanceDisplayCondition<span class="type-signature"> : <a href="DistanceDisplayCondition.html">DistanceDisplayCondition</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L799">Scene/Billboard.js 799</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the condition specifying at what distance from the camera that this billboard will be displayed.
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">undefined</code>
</dl>
<div class="nameContainer">
<h4 class="name" id="eyeOffset">
<a href="#eyeOffset" class="doc-link"></a>
eyeOffset<span class="type-signature"> : <a href="Cartesian3.html">Cartesian3</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L517">Scene/Billboard.js 517</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the 3D Cartesian offset applied to this billboard in eye coordinates. Eye coordinates is a left-handed
coordinate system, where <code>x</code> points towards the viewer's right, <code>y</code> points up, and
<code>z</code> points into the screen. Eye coordinates use the same scale as world and model coordinates,
which is typically meters.
<br /><br />
An eye offset is commonly used to arrange multiple billboards or objects at the same position, e.g., to
arrange a billboard above its corresponding 3D model.
<br /><br />
Below, the billboard is positioned at the center of the Earth but an eye offset makes it always
appear on top of the Earth regardless of the viewer's or Earth's orientation.
<br /><br />
<div align='center'>
<table border='0' cellpadding='5'><tr>
<td align='center'><img src='Images/Billboard.setEyeOffset.one.png' width='250' height='188' /></td>
<td align='center'><img src='Images/Billboard.setEyeOffset.two.png' width='250' height='188' /></td>
</tr></table>
<code>b.eyeOffset = new Cartesian3(0.0, 8000000.0, 0.0);</code><br /><br />
</div>
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="height">
<a href="#height" class="doc-link"></a>
height<span class="type-signature"> : Number</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L754">Scene/Billboard.js 754</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets a height for the billboard. If undefined, the image height will be used.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="heightReference">
<a href="#heightReference" class="doc-link"></a>
heightReference<span class="type-signature"> : <a href="global.html#HeightReference">HeightReference</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L299">Scene/Billboard.js 299</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the height reference of this billboard.
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">HeightReference.NONE</code>
</dl>
<div class="nameContainer">
<h4 class="name" id="horizontalOrigin">
<a href="#horizontalOrigin" class="doc-link"></a>
horizontalOrigin<span class="type-signature"> : <a href="global.html#HorizontalOrigin">HorizontalOrigin</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L548">Scene/Billboard.js 548</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the horizontal origin of this billboard, which determines if the billboard is
to the left, center, or right of its anchor position.
<br /><br />
<div align='center'>
<img src='Images/Billboard.setHorizontalOrigin.png' width='648' height='196' /><br />
</div>
</div>
<dl class="details">
<h5>Example:</h5>
<pre><code class="language-javascript">// Use a bottom, left origin
b.horizontalOrigin = Cesium.HorizontalOrigin.LEFT;
b.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="id">
<a href="#id" class="doc-link"></a>
id<span class="type-signature"> : Object</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L859">Scene/Billboard.js 859</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the user-defined object returned when the billboard is picked.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="image">
<a href="#image" class="doc-link"></a>
image<span class="type-signature"> : String</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L917">Scene/Billboard.js 917</a>
</div>
</h4>
</div>
<div class="description">
<p>
Gets or sets the image to be used for this billboard. If a texture has already been created for the
given image, the existing texture is used.
</p>
<p>
This property can be set to a loaded Image, a URL which will be loaded as an Image automatically,
a canvas, or another billboard's image property (from the same billboard collection).
</p>
</div>
<dl class="details">
<h5>Example:</h5>
<pre><code class="language-javascript">// load an image from a URL
b.image = 'some/image/url.png';
// assuming b1 and b2 are billboards in the same billboard collection,
// use the same image for both billboards.
b2.image = b1.image;</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="pixelOffset">
<a href="#pixelOffset" class="doc-link"></a>
pixelOffset<span class="type-signature"> : <a href="Cartesian2.html">Cartesian2</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L333">Scene/Billboard.js 333</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the pixel offset in screen space from the origin of this billboard. This is commonly used
to align multiple billboards and labels at the same position, e.g., an image and text. The
screen space origin is the top, left corner of the canvas; <code>x</code> increases from
left to right, and <code>y</code> increases from top to bottom.
<br /><br />
<div align='center'>
<table border='0' cellpadding='5'><tr>
<td align='center'><code>default</code><br/><img src='Images/Billboard.setPixelOffset.default.png' width='250' height='188' /></td>
<td align='center'><code>b.pixeloffset = new Cartesian2(50, 25);</code><br/><img src='Images/Billboard.setPixelOffset.x50y-25.png' width='250' height='188' /></td>
</tr></table>
The billboard's origin is indicated by the yellow point.
</div>
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="pixelOffsetScaleByDistance">
<a href="#pixelOffsetScaleByDistance" class="doc-link"></a>
pixelOffsetScaleByDistance<span class="type-signature"> : <a href="NearFarScalar.html">NearFarScalar</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L468">Scene/Billboard.js 468</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets near and far pixel offset scaling properties of a Billboard based on the billboard's distance from the camera.
A billboard's pixel offset will be scaled between the <a href="NearFarScalar.html#nearValue"><code>NearFarScalar#nearValue</code></a> and
<a href="NearFarScalar.html#farValue"><code>NearFarScalar#farValue</code></a> while the camera distance falls within the lower and upper bounds
of the specified <a href="NearFarScalar.html#near"><code>NearFarScalar#near</code></a> and <a href="NearFarScalar.html#far"><code>NearFarScalar#far</code></a>.
Outside of these ranges the billboard's pixel offset scale remains clamped to the nearest bound. If undefined,
pixelOffsetScaleByDistance will be disabled.
</div>
<dl class="details">
<h5>Examples:</h5>
<pre><code class="language-javascript">// Example 1.
// Set a billboard's pixel offset scale to 0.0 when the
// camera is 1500 meters from the billboard and scale pixel offset to 10.0 pixels
// in the y direction the camera distance approaches 8.0e6 meters.
b.pixelOffset = new Cesium.Cartesian2(0.0, 1.0);
b.pixelOffsetScaleByDistance = new Cesium.NearFarScalar(1.5e2, 0.0, 8.0e6, 10.0);</code></pre>
<pre><code class="language-javascript">// Example 2.
// disable pixel offset by distance
b.pixelOffsetScaleByDistance = undefined;</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="position">
<a href="#position" class="doc-link"></a>
position<span class="type-signature"> : <a href="Cartesian3.html">Cartesian3</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L274">Scene/Billboard.js 274</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the Cartesian position of this billboard.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="ready">
<a href="#ready" class="doc-link"></a>
<span class="type-signature attribute-readonly">readonly</span> ready<span class="type-signature"> : Boolean</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L952">Scene/Billboard.js 952</a>
</div>
</h4>
</div>
<div class="description">
When <code>true</code>, this billboard is ready to render, i.e., the image
has been downloaded and the WebGL resources are created.
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">false</code>
</dl>
<div class="nameContainer">
<h4 class="name" id="rotation">
<a href="#rotation" class="doc-link"></a>
rotation<span class="type-signature"> : Number</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L673">Scene/Billboard.js 673</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the rotation angle in radians.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="scale">
<a href="#scale" class="doc-link"></a>
scale<span class="type-signature"> : Number</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L608">Scene/Billboard.js 608</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the uniform scale that is multiplied with the billboard's image size in pixels.
A scale of <code>1.0</code> does not change the size of the billboard; a scale greater than
<code>1.0</code> enlarges the billboard; a positive scale less than <code>1.0</code> shrinks
the billboard.
<br /><br />
<div align='center'>
<img src='Images/Billboard.setScale.png' width='400' height='300' /><br/>
From left to right in the above image, the scales are <code>0.5</code>, <code>1.0</code>,
and <code>2.0</code>.
</div>
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="scaleByDistance">
<a href="#scaleByDistance" class="doc-link"></a>
scaleByDistance<span class="type-signature"> : <a href="NearFarScalar.html">NearFarScalar</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L372">Scene/Billboard.js 372</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets near and far scaling properties of a Billboard based on the billboard's distance from the camera.
A billboard's scale will interpolate between the <a href="NearFarScalar.html#nearValue"><code>NearFarScalar#nearValue</code></a> and
<a href="NearFarScalar.html#farValue"><code>NearFarScalar#farValue</code></a> while the camera distance falls within the lower and upper bounds
of the specified <a href="NearFarScalar.html#near"><code>NearFarScalar#near</code></a> and <a href="NearFarScalar.html#far"><code>NearFarScalar#far</code></a>.
Outside of these ranges the billboard's scale remains clamped to the nearest bound. If undefined,
scaleByDistance will be disabled.
</div>
<dl class="details">
<h5>Examples:</h5>
<pre><code class="language-javascript">// Example 1.
// Set a billboard's scaleByDistance to scale by 1.5 when the
// camera is 1500 meters from the billboard and disappear as
// the camera distance approaches 8.0e6 meters.
b.scaleByDistance = new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0);</code></pre>
<pre><code class="language-javascript">// Example 2.
// disable scaling by distance
b.scaleByDistance = undefined;</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="show">
<a href="#show" class="doc-link"></a>
show<span class="type-signature"> : Boolean</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L253">Scene/Billboard.js 253</a>
</div>
</h4>
</div>
<div class="description">
Determines if this billboard will be shown. Use this to hide or show a billboard, instead
of removing it and re-adding it to the collection.
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">true</code>
</dl>
<div class="nameContainer">
<h4 class="name" id="sizeInMeters">
<a href="#sizeInMeters" class="doc-link"></a>
sizeInMeters<span class="type-signature"> : Boolean</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L778">Scene/Billboard.js 778</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets if the billboard size is in meters or pixels. <code>true</code> to size the billboard in meters;
otherwise, the size is in pixels.
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">false</code>
</dl>
<div class="nameContainer">
<h4 class="name" id="translucencyByDistance">
<a href="#translucencyByDistance" class="doc-link"></a>
translucencyByDistance<span class="type-signature"> : <a href="NearFarScalar.html">NearFarScalar</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L418">Scene/Billboard.js 418</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets near and far translucency properties of a Billboard based on the billboard's distance from the camera.
A billboard's translucency will interpolate between the <a href="NearFarScalar.html#nearValue"><code>NearFarScalar#nearValue</code></a> and
<a href="NearFarScalar.html#farValue"><code>NearFarScalar#farValue</code></a> while the camera distance falls within the lower and upper bounds
of the specified <a href="NearFarScalar.html#near"><code>NearFarScalar#near</code></a> and <a href="NearFarScalar.html#far"><code>NearFarScalar#far</code></a>.
Outside of these ranges the billboard's translucency remains clamped to the nearest bound. If undefined,
translucencyByDistance will be disabled.
</div>
<dl class="details">
<h5>Examples:</h5>
<pre><code class="language-javascript">// Example 1.
// Set a billboard's translucency to 1.0 when the
// camera is 1500 meters from the billboard and disappear as
// the camera distance approaches 8.0e6 meters.
b.translucencyByDistance = new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.0);</code></pre>
<pre><code class="language-javascript">// Example 2.
// disable translucency by distance
b.translucencyByDistance = undefined;</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="verticalOrigin">
<a href="#verticalOrigin" class="doc-link"></a>
verticalOrigin<span class="type-signature"> : <a href="global.html#VerticalOrigin">VerticalOrigin</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L578">Scene/Billboard.js 578</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the vertical origin of this billboard, which determines if the billboard is
to the above, below, or at the center of its anchor position.
<br /><br />
<div align='center'>
<img src='Images/Billboard.setVerticalOrigin.png' width='695' height='175' /><br />
</div>
</div>
<dl class="details">
<h5>Example:</h5>
<pre><code class="language-javascript">// Use a bottom, left origin
b.horizontalOrigin = Cesium.HorizontalOrigin.LEFT;
b.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="width">
<a href="#width" class="doc-link"></a>
width<span class="type-signature"> : Number</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L732">Scene/Billboard.js 732</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets a width for the billboard. If undefined, the image width will be used.
</div>
<dl class="details">
</dl>
<h3 class="subsection-title">Methods</h3>
<div class="nameContainer">
<h4 class="name" id="computeScreenSpacePosition">
<a href="#computeScreenSpacePosition" class="doc-link"></a>
computeScreenSpacePosition<span class="signature">(scene, <span class="optional">result</span>)</span> &rarr; <span class="type-signature returnType"><a href="Cartesian2.html">Cartesian2</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L1381">Scene/Billboard.js 1381</a>
</div>
</h4>
</div>
<div class="description">
Computes the screen-space position of the billboard's origin, taking into account eye and pixel offsets.
The screen space origin is the top, left corner of the canvas; <code>x</code> increases from
left to right, and <code>y</code> increases from top to bottom.
</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>scene</code></td>
<td class="type">
<span class="param-type"><a href="Scene.html">Scene</a></span>
</td>
<td class="description last">
The scene.</td>
</tr>
<tr>
<td class="name"><code>result</code></td>
<td class="type">
<span class="param-type"><a href="Cartesian2.html">Cartesian2</a></span>
</td>
<td class="description last">
<span class="optional">optional</span>
The object onto which to store the result.</td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="param-desc">
The screen-space position of the billboard.
</div>
<h5>Throws:</h5>
<ul>
<li>
<div class="param-desc">
<span class="param-type"><a href="DeveloperError.html">DeveloperError</a></span>
: Billboard must be in a collection.
</div>
</li>
</ul>
<dl class="details">
<h5>Example:</h5>
<pre><code class="language-javascript">console.log(b.computeScreenSpacePosition(scene).toString());</code></pre>
<h5>See:</h5>
<ul class="see-list">
<li><a href="Billboard.html#eyeOffset">Billboard#eyeOffset</a></li>
<li><a href="Billboard.html#pixelOffset">Billboard#pixelOffset</a></li>
</ul>
</dl>
<div class="nameContainer">
<h4 class="name" id="equals">
<a href="#equals" class="doc-link"></a>
equals<span class="signature">(other)</span> &rarr; <span class="type-signature returnType">Boolean</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L1484">Scene/Billboard.js 1484</a>
</div>
</h4>
</div>
<div class="description">
Determines if this billboard equals another billboard. Billboards are equal if all their properties
are equal. Billboards in different collections can be equal.
</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>other</code></td>
<td class="type">
<span class="param-type"><a href="Billboard.html">Billboard</a></span>
</td>
<td class="description last">
The billboard to compare for equality.</td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="param-desc">
<code>true</code> if the billboards are equal; otherwise, <code>false</code>.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="setImage">
<a href="#setImage" class="doc-link"></a>
setImage<span class="signature">(id, image)</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L1221">Scene/Billboard.js 1221</a>
</div>
</h4>
</div>
<div class="description">
<p>
Sets the image to be used for this billboard. If a texture has already been created for the
given id, the existing texture is used.
</p>
<p>
This function is useful for dynamically creating textures that are shared across many billboards.
Only the first billboard will actually call the function and create the texture, while subsequent
billboards created with the same id will simply re-use the existing texture.
</p>
<p>
To load an image from a URL, setting the <a href="Billboard.html#image"><code>Billboard#image</code></a> property is more convenient.
</p>
</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>id</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">
The id of the image. This can be any string that uniquely identifies the image.</td>
</tr>
<tr>
<td class="name"><code>image</code></td>
<td class="type">
<span class="param-type">HTMLImageElement</span>
|
<span class="param-type">HTMLCanvasElement</span>
|
<span class="param-type">String</span>
|
<span class="param-type"><a href="Resource.html">Resource</a></span>
|
<span class="param-type"><a href="Billboard.html#.CreateImageCallback">Billboard.CreateImageCallback</a></span>
</td>
<td class="description last">
The image to load. This parameter
can either be a loaded Image or Canvas, a URL which will be loaded as an Image automatically,
or a function which will be called to create the image if it hasn't been loaded already.</td>
</tr>
</tbody>
</table>
<dl class="details">
<h5>Example:</h5>
<pre><code class="language-javascript">// create a billboard image dynamically
function drawImage(id) {
// create and draw an image using a canvas
const canvas = document.createElement('canvas');
const context2D = canvas.getContext('2d');
// ... draw image
return canvas;
}
// drawImage will be called to create the texture
b.setImage('myImage', drawImage);
// subsequent billboards created in the same collection using the same id will use the existing
// texture, without the need to create the canvas or draw the image
b2.setImage('myImage', drawImage);</code></pre>
</dl>
<div class="nameContainer">
<h4 class="name" id="setImageSubRegion">
<a href="#setImageSubRegion" class="doc-link"></a>
setImageSubRegion<span class="signature">(id, subRegion)</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L1254">Scene/Billboard.js 1254</a>
</div>
</h4>
</div>
<div class="description">
Uses a sub-region of the image with the given id as the image for this billboard,
measured in pixels from the bottom-left.
</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>id</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">
The id of the image to use.</td>
</tr>
<tr>
<td class="name"><code>subRegion</code></td>
<td class="type">
<span class="param-type"><a href="BoundingRectangle.html">BoundingRectangle</a></span>
</td>
<td class="description last">
The sub-region of the image.</td>
</tr>
</tbody>
</table>
<h5>Throws:</h5>
<ul>
<li>
<div class="param-desc">
<span class="param-type"><a href="RuntimeError.html">RuntimeError</a></span>
: image with id must be in the atlas
</div>
</li>
</ul>
<dl class="details">
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<div class="nameContainer">
<h4 class="name" id=".CreateImageCallback">
<a href="#.CreateImageCallback" class="doc-link"></a>
Cesium.Billboard.CreateImageCallback<span class="signature">(id)</span> &rarr; <span class="type-signature returnType">HTMLImageElement|HTMLCanvasElement|Promise.&lt;(HTMLImageElement|HTMLCanvasElement)></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/Billboard.js#L1536">Scene/Billboard.js 1536</a>
</div>
</h4>
</div>
<div class="description">
A function that creates an image.
</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>id</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">
The identifier of the image to load.</td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="param-desc">
The image, or a promise that will resolve to an image.
</div>
<dl class="details">
</dl>
</article>
</section>
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</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="ArcGISTiledElevationTerrainProvider"><a href="ArcGISTiledElevationTerrainProvider.html">ArcGISTiledElevationTerrainProvider</a></li><li data-name="ArcType"><a href="global.html#ArcType">ArcType</a></li><li data-name="AssociativeArray"><a href="AssociativeArray.html">AssociativeArray</a></li><li data-name="Axis"><a href="global.html#Axis">Axis</a></li><li data-name="AxisAlignedBoundingBox"><a href="AxisAlignedBoundingBox.html">AxisAlignedBoundingBox</a></li><li data-name="backFaceCulling"><a href="global.html#backFaceCulling">backFaceCulling</a></li><li data-name="barycentricCoordinates"><a href="global.html#barycentricCoordinates">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="global.html#binarySearch">binarySearch</a></li><li data-name="binarySearchComparator"><a href="global.html#binarySearchComparator">binarySearchComparator</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="global.html#BingMapsStyle">BingMapsStyle</a></li><li data-name="BlendEquation"><a href="global.html#BlendEquation">BlendEquation</a></li><li data-name="BlendFunction"><a href="global.html#BlendFunction">BlendFunction</a></li><li data-name="BlendingState"><a href="BlendingState.html">BlendingState</a></li><li data-name="BlendOption"><a href="global.html#BlendOption">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="boundingSphere"><a href="global.html#boundingSphere">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="buildModuleUrl"><a href="global.html#buildModuleUrl">buildModuleUrl</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="global.html#CameraEventType">CameraEventType</a></li><li data-name="cancelAnimationFrame"><a href="global.html#cancelAnimationFrame">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="CartographicGeocoderServic
</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>