GlobeView (Experimental)

This class is experimental, which means it does not provide the compatibility and stability that one would typically expect from other View classes. Use with caution and report any issues that you find on GitHub.

The GlobeView class is a subclass of View. This view projects the earth into a 3D globe.

It's recommended that you read the Views and Projections guide before using this class.

Limitations

The goal of GlobeView is to provide a generic solution to rendering and navigating data in the 3D space.

• No high-precision rendering at high zoom levels (> 12). Features at the city-block scale may not be rendered accurately.
• Only supports 'lnglat' (the default value of the coordinateSystem prop).
• Known rendering issues when using multiple views mixing GlobeView and MapView, or switching between the two.
• Support for TileLayer and MVTLayer is experimental.
• These layers currently do not work in this view:
  • Aggregation layers: HeatmapLayer, ContourLayer
  • TerrainLayer
• MaskExtension is not supported in this view.

When GeoJson paths and polygons are rendered with this view, the straight lines and flat surfaces are warped to the surface of the globe. Note that the warped edges still correspond to straight lines in the Mercator projection. To draw lines along the shortest distance on the globe, use the GreatCircleLayer.

Constructor

import {_GlobeView as GlobeView} from '@deck.gl/core';
const view = new GlobeView({id, ...});

GlobeView takes the same parameters as the View superclass constructor, plus the following:

resolution (number, optional) {#resolution}

The resolution at which to turn flat features into 3D meshes, in degrees. Smaller numbers will generate more detailed mesh. Default 10.

nearZMultiplier (number, optional) {#nearzmultiplier}

Scaler for the near plane, 1 unit equals to the height of the viewport. Default to 0.1. Overwrites the near parameter.

farZMultiplier (number, optional) {#farzmultiplier}

Scaler for the far plane, 1 unit equals to the distance from the camera to the edge of the screen. Default to 2. Overwrites the far parameter.

parameters (object, optional) {#parameters}

GlobeView enables back-face culling by default with parameters: {cullMode: 'back'}. To override this behavior, supply the desired GPU parameters to the constructor:

new GlobeView({
  parameters: {cullMode: 'none'}
});

View State

To render, GlobeView needs to be used together with a viewState with the following parameters:

• longitude (number) - longitude at the viewport center
• latitude (number) - latitude at the viewport center
• zoom (number) - zoom level
• bearing (number, optional) - bearing angle in degrees. Default 0 (north up).
• pitch (number, optional) - pitch angle in degrees. 0 looks straight down at the earth. Default 0.
• maxZoom (number, optional) - max zoom level. Default 20.
• minZoom (number, optional) - min zoom level. Default 0.
• maxPitch (number, optional) - max pitch angle. Default 60.
• minPitch (number, optional) - min pitch angle. Default 0.

The globe behaves like a physical ball. Dragging and pointer-anchored zoom rotate the full camera frame, so an initial bearing of 0 does not lock north up: bearing evolves naturally as the camera crosses a pole. This avoids orientation discontinuities and keeps interaction consistent across latitudes. Use zoomAround: 'center' to zoom without steering the camera frame.

To limit how far the camera can travel, set the shared controller maxBounds option. For example, maxBounds: [[-180, -85], [180, 85]] keeps the viewport center between ±85° latitude.

Controller

By default, GlobeView uses the GlobeController to handle interactivity. To enable the controller, use:

const view = new GlobeView({id: 'globe', controller: true});

Visit the GlobeController documentation for a full list of supported options.

Remarks

Occlusion

In the MapView, it is often sufficient to provide a solid background color where there is no geometry. In the GlobeView, the user can "see through" to the other side of the earth. There are two ways to fix this:

• Render a polygon that represents the surface of the earth:

new SolidPolygonLayer({
  id: 'background',
  data: [
    [[-180, 90], [0, 90], [180, 90], [180, -90], [0, -90], [-180, -90]]
  ],
  getPolygon: d => d,
  stroked: false,
  filled: true,
  getFillColor: [40, 40, 40]
})

• Discard all surfaces that face away from the camera by passing the following prop to Deck:

parameters: {
  cull: true
}

Source

modules/core/src/views/globe-view.ts