Class: CesiumWidgetView

CesiumWidgetView()

An interactive 2D and/or 3D map/globe rendered using CesiumJS. This view comprises the globe without any of the UI elements like the scalebar, layer list, etc.

Screenshot

Constructor

new CesiumWidgetView()

Since:
  • 2.18.0
Source:

Extends

  • Backbone.View

Members

className :string

The HTML classes to use for this view's element. Note that the first child element added to this view by cesium will have the class "cesium-widget".
Type:
  • string
Source:

highlightBorderColor :Cesium.Color

The border color to use on vector features that a user clicks. See https://cesium.com/learn/cesiumjs/ref-doc/Color.html?classFilter=color
Type:
  • Cesium.Color
Source:

mapAssetRenderFunctions :Array.<Object>

An array of objects the match a Map Asset's type property to the function in this view that adds and renders that asset on the map, given the Map Asset model. Each object in the array has two properties: 'types' and 'renderFunction'.
Type:
  • Array.<Object>
Properties:
Name Type Description
types Array.<string> The list of types that can be added to the map given the renderFunction
renderFunction string The name of the function in the view that will add the asset to the map and render it, when passed the cesiumModel attribute from the MapAsset model
Source:

model :Map

The model that this view uses
Type:
Source:

requestRender

Because the Cesium widget is configured to use explicit rendering (see https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/), we need to tell Cesium when to render a new frame if it's not one of the cases handle automatically. This function tells the Cesium scene to render, but is limited by the underscore.js debounce function to only happen a maximum of once every 50 ms (see https://underscorejs.org/#debounce).
Source:

template :Underscore.template

The primary HTML template for this view
Type:
  • Underscore.template
Source:

type :string

The type of View this is
Type:
  • string
Source:

Methods

add3DTileset(cesiumModel)

Renders a 3D tileset in the map.
Parameters:
Name Type Description
cesiumModel Cesium.Cesium3DTileset The Cesium 3D tileset model that contains the information about the 3D tiles to render in the map
Source:

addAsset(mapAsset)

Finds the function that is configured for the given asset model type in the CesiumWidgetView#mapAssetRenderFunctions array, then renders the asset in the map. If there is a problem rendering the asset (e.g. it is an unsupported type that is not configured in the mapAssetRenderFunctions), then sets the AssetModel's status to error.
Parameters:
Name Type Description
mapAsset MapAsset A MapAsset layer to render in the map, such as a Cesium3DTileset or a CesiumImagery model.
Source:

addGeohashes()

Renders a CesiumGeohash map asset on the map
Source:

addImagery(cesiumModel)

Renders imagery in the Map.
Parameters:
Name Type Description
cesiumModel Cesium.ImageryLayer The Cesium imagery model to render
Source:

addVectorData(cesiumModel)

Renders vector data (excluding 3D tilesets) in the Map.
Parameters:
Name Type Description
cesiumModel Cesium.GeoJsonDataSource The Cesium data source model to render on the map
Source:

completeFlight(target, options)

This function is called by CesiumWidgetView#postRender; it should only be called once the target has been fully rendered in the scene. This function gets the bounding sphere, if required, and moves the scene to encompass the full extent of the target.
Parameters:
Name Type Description
target MapAsset | Cesium.BoundingSphere | Object | Feature The target asset, bounding sphere, or location to change the camera focus to. If target is a MapAsset, then the bounding sphere from that asset will be used for the target destination. If target is an Object, it may contain any of the properties that are supported by the Cesium camera flyTo options, see https://cesium.com/learn/cesiumjs/ref-doc/Camera.html#flyTo. If the target is a Feature, then it must be a Feature of a CesiumVectorData layer (currently Cesium3DTileFeatures are not supported). The target can otherwise be a Cesium BoundingSphere, see https://cesium.com/learn/cesiumjs/ref-doc/BoundingSphere.html
options object For targets that are a bounding sphere or asset, options to pass to Cesium Camera.flyToBoundingSphere(). See https://cesium.com/learn/cesiumjs/ref-doc/Camera.html#flyToBoundingSphere.
Source:

findEdges() → {Array.<Cesium.Cartesian3>}

Find four points that exist on the globe that are closest to the top-center, bottom-center, right-middle, and left-middle points of the screen. Note that these are not necessarily the northern, southern, eastern, and western -most points, since the map may be oriented in any direction (e.g. facing the north pole).
Source:
Returns:
Returns an object with the top, bottom, left, and right points of the globe.
Type
Array.<Cesium.Cartesian3>

findMidpoint(p1, p2) → {Cesium.Cartesian3|null}

Given two Cartesian3 points, compute the midpoint.
Parameters:
Name Type Description
p1 Cesium.Cartesian3 The first point
p2 Cesium.Cartesian3 The second point
Source:
Returns:
The midpoint or null if p1 or p2 is not defined.
Type
Cesium.Cartesian3 | null

findPointOnGlobe(startCoordinates, endCoordinates) → {Cesium.Cartesian3|null}

Find a coordinate that exists on the surface of the globe between two Cartesian points. The points do not need to be withing the bounds of the globe/map (i.e. they can be points in the sky). Uses the Bresenham Algorithm to traverse pixels from the first coordinate to the second, until it finds a valid coordinate.
Parameters:
Name Type Description
startCoordinates Cesium.Cartesian2 The coordinates to start searching, in pixels
endCoordinates Cesium.Cartesian2 The coordinates to stop searching, in pixels
Source:
See:
Returns:
Returns the x, y, z coordinates of the first real point, or null if a valid point was not found.
Type
Cesium.Cartesian3 | null

flyHome()

Navigate to the homePosition that's set on the Map.
Source:

flyTo(target, options)

Move the camera position and zoom to the specified target entity or position on the map, using a nice animation. This function starts the flying/zooming action by setting a zoomTarget and zoomOptions on the view and requesting the scene to render. The actual zooming is done by CesiumWidgetView#completeFlight after the scene has finished rendering.
Parameters:
Name Type Description
target MapAsset | Cesium.BoundingSphere | Object | Feature The target asset, bounding sphere, or location to change the camera focus to. If target is a MapAsset, then the bounding sphere from that asset will be used for the target destination. If target is an Object, it may contain any of the properties that are supported by the Cesium camera flyTo options, see https://cesium.com/learn/cesiumjs/ref-doc/Camera.html#flyTo. If the target is a Feature, then it must be a Feature of a CesiumVectorData layer (currently Cesium3DTileFeatures are not supported). The target can otherwise be a Cesium BoundingSphere, see https://cesium.com/learn/cesiumjs/ref-doc/BoundingSphere.html
options object For targets that are a bounding sphere or asset, options to pass to Cesium Camera.flyToBoundingSphere(). See https://cesium.com/learn/cesiumjs/ref-doc/Camera.html#flyToBoundingSphere.
Source:

getCameraPosition() → {MapConfig#CameraPosition}

Get the current positioning of the camera in the view.
Source:
Returns:
Returns an object with the longitude, latitude, height, heading, pitch, and roll in the same format that the Map model uses for the homePosition (see Map#defaults)
Type
MapConfig#CameraPosition

getDegreesFromCartesian(cartesian)

Get longitude and latitude degrees from a cartesian point.
Parameters:
Name Type Description
cartesian Cesium.Cartesian3 The point to get degrees for
Source:
Returns:
Returns an object with the longitude and latitude in degrees, as well as the height in meters

initialize(optionsopt)

Executed when a new CesiumWidgetView is created
Parameters:
Name Type Attributes Description
options Object <optional>
A literal object with options to pass to the view
Source:

initializePicking()

Set up the Cesium scene and set listeners and behavior that enable users to click on vector features on the map to view more information about them.
Source:

pixelToMeters() → {number|boolean}

Finds the geodesic distance (in meters) between two points that are 1 pixel apart at the bottom, center of the Cesium canvas. Adapted from TerriaJS. See https://github.com/TerriaJS/terriajs/blob/main/lib/ReactViews/Map/Legend/DistanceLegend.jsx
Source:
Returns:
Returns the distance on the globe, in meters, that is equivalent to 1 pixel on the screen at the center bottom point of the current scene. Returns false if there was a problem getting the measurement.
Type
number | boolean

postRender()

Functions called after each time the scene renders. If a zoom target has been set by the CesiumWidgetView#flyTo function, then calls the functions that calculates the bounding sphere and zooms to it (which required to visual elements to be rendered first.)
Source:

render() → {CesiumWidgetView}

Renders this view
Source:
Returns:
Returns the rendered view element
Type
CesiumWidgetView

setMouseMoveListeners()

Set a Cesium event handler for when the mouse moves. If the scale bar is enabled, then a updates the Map model's current position attribute whenever the mouse moves. If showFeatureInfo is enabled, then changes the cursor to a pointer when it hovers over a feature.
Source:

showImageryGrid(coloropt, tilingSchemeopt)

Display a box around every rendered tile in the tiling scheme, and draw a label inside it indicating the X, Y, Level indices of the tile. This is mostly useful for debugging terrain and imagery rendering problems. This function should be called after the other imagery layers have been added to the map, e.g. at the end of the render function.
Parameters:
Name Type Attributes Default Description
color string <optional>
'#ffffff' The color of the grid outline and labels. Must be a CSS color string, beginning with a #.
tilingScheme 'GeographicTilingScheme' | 'WebMercatorTilingScheme' <optional>
'GeographicTilingScheme' The tiling scheme to use. Defaults to GeographicTilingScheme.
Source:

sortImagery()

Arranges the imagery that is rendered the Map according to the order that the imagery is arranged in the layers collection.
Since:
  • 2.21.0
Source:

updateCurrentScale()

Update the map model's currentScale attribute, which is used for the scale bar. Finds the distance between two pixels at the *bottom center* of the screen.
Source:

updateDataSourceDisplay()

Runs on every Cesium clock tick. Updates the display of the CesiumVectorData models in the scene. Similar to Cesium.DataSourceDisplay.update function, in that it runs update() on each DataSource and each DataSource's visualizer, except that it also updates each CesiumVectorData model's 'displayReady' attribute. (Sets to true when the asset is ready to be rendered in the map, false otherwise). Also re-renders the scene when the displayReady attribute changes.
Source:

updateSelectedFeatures(features)

Given a feature from a vector layer (e.g. a Cesium3DTileFeature), gets any properties that are associated with that feature, the MapAsset model that contains the feature, and the ID that Cesium uses to identify it, and updates the Features collection that is set on the Map's `selectedFeatures` attribute with a new Feature model. NOTE: This currently only works with 3D tile features.
Parameters:
Name Type Description
features Array.<Cesium.Cesium3DTileFeature> An array of Cesium3DTileFeatures to select
Source:

updateTerrain(cesiumModel)

Renders peaks and valleys in the 3D version of the map, given a terrain model. If a terrain model has already been set on the map, this will replace it.
Parameters:
Name Type Description
cesiumModel Cesium.TerrainProvider a Cesium Terrain Provider model to use for the map
Source:

updateViewExtent()

Update the 'currentViewExtent' attribute in the Map model with the north, south, east, and west-most lat/long that define a bounding box around the currently visible area of the map.
Source: