6.3. Feature overview
Basically, the 3D web client has been developed by extending and
customizing the so-called Cesium Viewer
which is a composite widget
shipped with Cesium and provides overall functionalities of a 3D globe
such as camera control, rendering geometries and materials, animation
etc. In addition, the Cesium Viewer
contains a number of especially
attractive widgets and plugins providing functionalities like querying
of geocoding service, switching between different viewing modes (2D,
2.5D, and 3D view), and handling imagery and terrain layers, which are
commonly useful for a variety of GIS applications. In addition, starting
from version 1.6.0, the web client provides better support for mobile
devices, such as a more compact GUI layout as well as the ability to
interact with the web map in first-person view based on the user’s
location in real-time. All these functionalities along with the enhanced
features and functionalities developed for the 3D web client are
explained in more detail below.
The 3D Globe
[1] is a base Cesium widget that allows the user to
navigate through the Earth map by panning, moving, tilting, and rotating
the camera perspective using a mouse or touchscreen. In addition, the
camera perspective can also be controlled by means of the Navigation
Component
[2] which is an open source
Cesium plugin and offers the
same navigation possibilities that can be achieved with mouse or
touchscreen. It consists of a group of widgets, namely a Navigator
widget for controlling the camera perspective, a North Arrows
widget for
orienting the Earth map towards the north, and a Scale Bar for
estimating the distance between two points on the ground.
The Cesium Viewer
provides an especially useful built-in Toolkit
[3]
containing the widgets like Geocoder
, HomeButton
, GeolocationButton
,
BaseLayerPicker
, and NavigationHelpButton
. The view panel of Geocoder
can be expanded by clicking on the button to display an input
filed into which the user can enter either an explicit position value in
the form of “[longitude], [latitude]” or an address name to search
a particular location. After pressing the “Enter” key on the keyboard or
clicking on the button , the Geocoding process will be
performed using the Bing Maps Locations API according to the entered
location information. Once the target location has been found, the Earth
map will be automatically adjusted to the returned location and zoomed
to the bounding box with the best fit with the camera perspective. For
example, if you want to search the position (longitude = 11.56786,
Latitude = 48.14900) where the Technical University of Munich is, the
input field of the Geocoder
can be filled with the text value of
“11.56786, 48.14900” and the result should look like the following
figure.
The HomeButton
helps the user to quickly reset the camera
perspective to the default status (cf. Fig. 6.2). In addition, the
GeolocationButton
provides some geolocation-based features
such as flying to the user’s current location on the 3D map and
displaying the first-person view in real-time on mobile devices, which
is explained in more details in Section 6.8.
In most GIS applications, the term base layer (or basemap) is generally considered as a background layer on the map using, for example, satellite imagery and terrain model, to help people to quickly identify the locations and orientations from a certain camera perspective. Per default, Cesium comes with a number of selectable imagery layers provided by different mapping services, such as Bing Maps, OpenStreetMap, ESRI Maps etc. In addition, a terrain layer so-called STK World Terrainis available for showing worldwide 3D elevation data with an average grid resolution of 30 meters.
Note
Due to changes in Cesium Terms of Service as well as the introduction of the new commercial Cesium ion platform starting from September 1 st 2018, the STK World Terrain layer is replaced by the Cesium World Terrain hosted by Cesium ion (https://cesium.com/content/cesium-world-terrain).
All these base layers (imagery and terrain layers) can be controlled by the
BaseLayerPicker
widget (cf. the following figure) which has a view panel
for listing all the available base layers represented by their names and
respective icons and allows the user to select the desired one. For
example, when an icon representing the OpenStreetMap is selected, a new
instance of the OpenStreetMap imagery layer will be created to replace
the imagery layer that is currently in use. Similarly, the terrain layer
can be independently selected and added to the Earth map to overlap with
the selected imagery layer.
The last widget contained within the Cesium Toolkit
[3] (cf. Fig. 6.3)
is the so-called NavigationHelpButton
for showing brief instructions on
how to navigate the Earth map with mouse (typically for desktop and
laptop PCs) and touchscreen (typically for smart phones and tablet PCs).
By clicking on the button, the corresponding view panel (cf.
the following figure) will be shown on the upper-right corner of the 3D
web client.
The next widget is the so-called CreditContainer
[4] (cf. Fig. 6.3)
which displays a collection of credits with respect to the software and
data providers that have been involved in the development and use of the
3D web client. These credits mainly include the mapping services
(depending on the selected base layer, e.g. Bing Maps), the 3D
geo-visualization engine (Cesium Virtual Globe), and the development
provider of the 3D web client (3DCityDB), which are all represented with
their icons, descriptions, and hyperlinks referencing to their
respective homepages.
The majority of the functionalities specially provided by the 3D web
client are controlled by the Toolbox
widget [5] (cf. Fig. 6.3) which
is an extended module based on the Cesium Viewer
for integrating and
controlling the user-provided data in different formats, namely KML/glTF
modes, thematic data (online spreadsheet), Web Map Service (WMS) data,
and digital terrain model (DTM) on the one hand. On the other hand, the
user interaction with 3D city models can also be aided by this Toolbox
widget which allows, for example, deselecting, shadowing, hiding and
showing 3D objects, as well as exploring them from different view
perspectives using third-party mapping services like Microsoft Bing Maps
with oblique view, Google Streetview, and a combined version (DualMaps).
Note
Starting from September 2018, a Cesium ion API key or a Bing Maps API
key is required in order to provide access to the Cesium World Terrain
as well as the Bing Maps Services. These can be given as the parameter
ionToken=<your_ion_token>
and bingToken=<your_bing_token>
in
the client’s URL. If no valid token is present, Open Street Map shall
be selected as the default imagery and Nominatim shall be activated as
the default geocoder. For more information, please refer to:
The visualization of the 3D city model with large data size often result
in significant performance issue in most 3D web applications. In order
to overcome this troublesome issue, a tiling strategy has been
implemented within the 3D web client to support for efficient displaying
of large pre-styled 3D visualization models in the form of tiled
datasets exported from the 3DCityDB by using the KML/COLLADA/glTF
Exporter. This tiling strategy utilizes the multi-threading capabilities
of HTML5, so that the time-costly operations such as parsing of multiple
3D objects can be delegated to a background thread running in parallel.
At the same time, for data layer, another thread monitors the
interactions with the virtual camera and takes care of determining which
the data tiles should be loaded and unloaded according to their current
visibility and the display size on the screen. Moreover, this tiling
strategy supports caching mechanism allowing the data tiles loaded from
an earlier computation to be temporarily stored in a cache, from which
the data tiles can be loaded and rendered much faster than reloading
them again from the remote server. Of course, a larger number of cached
data tiles will consume more memory and may cause a memory overflow of
the web browser. In order to avoid this, the 3D web client provides a
so-called Status Indicator
widget [6] (cf. Fig. 6.3) which can display
the real-time status of the amount of showed and cached data tiles and
can be used to help the user to conveniently monitor and control the
memory consumed by the 3D web client.
While streaming the tiled 3D visualization models, each data tile requires at least an asynchronous HTTP (Hypertext Transfer Protocol) request (AJAX) to fetch the corresponding KML/glTF files from the remote data server. This server must support CORS (Cross-Origin Resource Sharing) to get around the cross-domain restrictions.
Note
Alternatively, the open specification Cesium 3D Tiles can also be employed to stream massive heterogeneous 3D geospatial datasets. This is supported in 3DCityDB Web Map Client version 1.6.0 or later.