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.
The goal of GlobeView
is to provide a generic solution to rendering and navigating data in the 3D space.
In the initial release, this class mainly addresses the need to render an overview of the entire globe. The following limitations apply, as features are still under development:
pitch
or bearing
). The camera always points towards the center of the earth, with north up.COORDINATE_SYSTEM.LNGLAT
(default of the coordinateSystem
prop).GlobeView
and MapView
, or switching between the two.TileLayer
and MVTLayer
is experimental.HeatmapLayer
, ContourLayer
TerrainLayer
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.
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)The resolution at which to turn flat features into 3D meshes, in degrees. Smaller numbers will generate more detailed mesh. Default 10
.
To render, GlobeView
needs to be used together with a viewState
with the following parameters:
longitude
(Number) - longitude at the viewport centerlatitude
(Number) - latitude at the viewport centerzoom
(Number) - zoom levelmaxZoom
(Number, optional) - max zoom level. Default 20
.minZoom
(Number, optional) - min zoom level. Default 0
.Additional projection matrix arguments:
nearZMultiplier
(Number, optional) - Scaler for the near plane, 1 unit equals to the height of the viewport. Default to 0.1
.farZMultiplier
(Number, optional) - Scaler for the far plane, 1 unit equals to the distance from the camera to the edge of the screen. Default to 2
.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.
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:
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]
})
Deck
:parameters: {
cull: true
}