Based on the concepts introduced in the previous sections, a 3D web client has been developed. It is implemented on top of the WebGL-based Cesium Virtual Globe to make full use of the hardware acceleration and provides cross-platform functionalities like displaying 3D graphic contents on the web (cf. Chaturvedi et al. 2015, Yao et al. 2016). While developing the 3D web client, various extensions have been made to the Cesium Virtual Globe in order to facilitate users to view and explore 3D city models conveniently (cf. Figure
Technische Universität München Lehrstuhl für Geoinformatik KML Layer MicrosoftSpreadsheet Provider << Interface >> ThematicDataProvider <<abstract>> VisualizationModelLayer WebMap3D 3D-Tiles Layer GoogleSpreadsheet Provider Grid-based Tiled Layer * * thematicData dataLayer <<interface>> DataLayer
Core API ImageryDataLayer<<abstract>>
<<interface>>
93). The major one among those extensions is that the high-performance visualization of large pre-styled 3D visualization models which can be formatted in KML, KMZ, or glTF formats and structured with different tiling schema e.g. 3D-Tiles or a simple grid-based structure. In addition, the rich interaction with the city models is also supported e.g. highlighting of 3D objects on mouseover and mouseclick, hiding and showing of the selected 3D objects as well as the exploration from different view perspectives using third-party mapping services like Microsoft Bing Maps with oblique view, Google Streetview, and a combined version using Dual Maps (cf. Figure 87). Moreover, the 3D web client implements the Cloud-based Google spreadsheet and fusion table as the online spreadsheet to store the thematic information coupling with the 3D visualization models and allows for querying the thematic data of every city object when it has been selected. In the past four years, this 3D web application has been successfully employed in many research projects and the core source code are managed using the Git version control system and can be freely obtained from the online Git-repository1. In the year 2015, this 3D web client won the first price in the 'Best Students Contribution' of the 'Web3D city modelling competition'2 at the annual ACM SIGGRAPH Web3D Conference.
Figure 93: System architecture of the developed 3D web client
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. In the 3D web client, a variety kinds of base layers can be visualized along with the 3D visualization models all of which can be conveniently managed via a common interface. Per default, Cesium comes with a number of selectable imagery layers provided by different mapping services, such as Bing Maps, OpenStreetMap and ESRI Maps etc. It is also possible to add additional imagery layer by using an OGC compliant Web Map Service (WMS) which
1https://github.com/3dcitydb/3dcitydb-web-map 2https://www.ogc.org/blog/2274
Technische Universität München Lehrstuhl für Geoinformatik
1
Systemarchitektur der 3D-Web-GIS Anwendung
21.07.2016 WebGL-basierte 3D-Visualisierung von Stadtmodellen durch die Erweiterung von
Cesium 4 Imagery Server Database Terrain Server Database Database Export Export
Visualization model Online Spreadsheet
Export Export
logical link
User Interface
Virtual Globe Visualization Engine (Cesium) Map Layer Control Object handling e.g. Highlighting 3D Web Client Attribute Display and Query Response
Request Request Response
Response Request Response Request … many more Features Interaction
Interaction Interaction Interaction
Tiling Manager Attribute Display and Query Map Layer Control Object handling e.g. Highlighting Tiling Manager
can easily be deployed using a number of open-source or commercial software tools like GeoServer, Deegree, and ArcGIS Server etc. Concerning the digital terrain model, Cesium Virtual Globe provides per default two available terrain layers. The first one is the so-called WGS84 Ellipsoid which approximates the Earth’s surface using a smooth ellipsoid surface with a constant height value of 0. The other one is the so-called STK World Terrain using a worldwide 3D elevation data with an average grid resolution of 30 meters which is sufficient in many use cases. For specific application cases, high-resolution Digital Terrain Models might be required which can be stored and managed using spatial database, converted to a specific terrain format i.e. heightmap or quantized-mesh, and uploaded to a web server for the data access over Internet.
The user interface of the web client is created using the ExtJS JavaScript-based web framework which is freely provided by Sencha the under GPL3 open source license (cf. Sencha 2017). It provides a large number of GUI widget components such as grid table, popup window, Tab container, as well as tree-structured panel etc. which allow web developer to build an extensive web application with the support of rich user interactions. With the help of these outstanding features provided by ExtJS, the 3D web client has been designed very similar to most traditional GIS viewer applications to facilitate users to interact with working data and to manipulate the relevant operating functionalities for completing certain tasks conveniently. In addition, the main widgets of the web client were assembled component-wise and can therefore be easily customized to hide or disable some certain UI components for creating a lightweight version with concise user interface.
Figure 94: User interface and the relevant GUI components of the 3D web client
In the middle of the GUI (cf. Figure 94), a 3D viewer is embedded which is a standard Cesium widget that allows users to navigate the Earth view 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 which offers the
1
5
4
2
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. It is also possible to switch the 3D view mode to 2D, which may result in a better rendering performance since all 3D objects will be automatically simplified and projected on the 2D map. Using the Map Control component [2], an arbitrary number of data layers can be added into the 3D web client and a name can be assigned to each added layer by the user. Once the 3D visualization models have been loaded and rendered on the 3D map, the loaded layer names will be listed in the Layer List panel [3] which allows users to interactively control the visibility of the loaded data layers or remove selected layers from the 3D web client.
Multiple 3D objects can be selected and highlighted on the map and the corresponding object IDs can be listed in the Object Selection panel [4]. When clicking on a single object, the thematic information will be queried from the linked online spreadsheets and the returned attribute information will displayed as key-value pairs in a tabular form in the table panel [5]. In order to distinguish which attributes are provided by which online spreadsheet, the table panel can be dynamically partitioned into several blocks each of which is painted with a distinguishable background color. Per default, the background of the attribute GMLID is coloured with grey color and the other blocks of the individual online spreadsheets can be flexibly configured by the users. To support this, a table manager component is available whose UI is shown in Figure 95.
Figure 95: Table manager for dynamically adding multiple online spreadsheet to a data layer
Using this table manager, users are able to select their preferred background colors for the linked online spreadsheet and also to link additional online spreadsheets with the respective 3D visualization model. The display sequence of the respective panel blocks holding the attributes can be reallocated by clicking on the Up (▲), and Down (▼) buttons of the
individual table. The remove (×) button allows users to remove an already existing item to disconnect an online spreadsheet from the respective 3D visualization model.
To ease the work with the 3D web client, the configuration information including the added data layers and their associated online spreadsheets can be stored in the Cloud by using an online spreadsheet called configuration spreadsheet. This spreadsheet has a fixed structure with a set of predefined columns and the relevant ones are shown in Figure 96. The first column with the name LAYERID holds the identifiers of the data layers and will be used by the 3D web client for indexing the data layers. Thus, these IDs must be unique in the scope of a configuration spreadsheet and can be assigned using the universally unique identifier (UUID). The layer names, which will be listed in the 3D web client, are stored in the column NAME. For each layer, the URL of the respective 3D visualization model can be found in the URL column, whereas the URLs of the linked online spreadsheets are stored in the column
Thematic Data URL and separated with semicolons. With the help of a such configuration
spreadsheet, an application workspace created by a user can be permanently stored, shared, cloned, and recovered via the Cloud. In addition, the URL of a configuration spreadsheet can be easily encoded as a key-value pair string to be attached to the 3D web client link, which can be stored as a browser bookmark or sent to project partners to facilitate the collaborative work (cf. Kolbe et al. 2003).
Figure 96: Idea of using a configuration spreadsheet for storing and loading linked 3D visualization models and online spreadsheets
The typical operation process of using the configuration spreadsheet in the 3D web client is summarized in the UML sequence diagram shown in Figure 96. When the 3D client is launched by the user, an AJAX request to the configuration spreadsheet is performed to return a response containing the layer information. Subsequently, the 3D web client iterates through
LAYERID NAME URL THEMATIC DATA URL
UUID_1… Roads https://... {https://...; https://...;…}
UUID_2… Buildings https://... {https://...; https://...;…}
UUID_3… Waters https://... {https://...; https://...;…}
… … … …
3D Web Client ConfigurationSpreadsheet 3D Visualization Model
Launch 3D web client
AJAX request to fetch config info
Response AJAX request to fetch 3D Models
Response loop
[for each layer]
Save Workspace
AJAX request to update the config spreadsheet
all the layer items and loads the respective 3D visualization models one by one. While operating the 3D web client, the user may add some new layers, remove certain existing layers, or enrich a layer by linking with additional online spreadsheets storing domain- specific information. After confirming the changes, the user can save the workspace to the Cloud by sending an AJAX update request to update the original configuration spreadsheet or create a new one.
The access to the configuration as well as the thematic data stored in the online spreadsheets can be easily controlled by taking fully advantage of the Cloud technology. Once an online spreadsheet has been created by a user, it can be shared with other users who may have either read-only or full access with write privilege to the spreadsheet. This allows multiple users to complete complex collaborative work by categorizing them into different user groups with different access rights. For example (cf. Figure 97), an application administrator creates a configuration file associated with two online spreadsheets storing the thematic information. Since the administrator is the owner of all the online spreadsheets, he can assign the write access to the user “data manager” who have full access to the thematic data spreadsheet but only read access to the configuration spreadsheet. The public users are only assigned with read access to the online spreadsheets allowing them to launch the web client and to query thematic information provided by the data manger. In this way, all the content information are properly secured among multiple users.
Figure 97: Collaborative work using the 3D web client based on Cloud-based online spreadsheets (cf. Herreruela et al. 2012)