diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..c95a5540 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,16 @@ +/demos/ +/examples/ +/node_modules/ + +/.git +/.gitignore + +/build.xml +/CHANGES.md +/DEV_2.0.0.md +/LICENSE +/package-lock.json +/README.md +/RELEASES.md +/server.js +/tsconfig.json diff --git a/.github/workflows/docker-build-push-edge.yml b/.github/workflows/docker-build-push-edge.yml new file mode 100644 index 00000000..69f4f1db --- /dev/null +++ b/.github/workflows/docker-build-push-edge.yml @@ -0,0 +1,95 @@ +name: docker-build-push-edge + +on: + workflow_dispatch: + push: + branches: + - feature/docker + pull_request: + +env: + IMAGE_NAME: 3dcitydb-web-map-client + PLATFORMS: linux/amd64,linux/arm64 + +jobs: + build-push: + runs-on: ubuntu-latest + + steps: + - + name: Parse short sha + uses: benjlevesque/short-sha@v3.0 + id: short-sha + - + name: set lower case owner name + run: | + echo "OWNER_LC=${OWNER,,}" >>${GITHUB_ENV} + env: + OWNER: '${{ github.repository_owner }}' + - + name: Checkout repo + uses: actions/checkout@v4 + - + name: Docker login Dockerhub + id: docker_login + uses: docker/login-action@v3 + with: + username: ${{ secrets.DOCKERHUB_USERNAME }} + password: ${{ secrets.DOCKERHUB_PASSWORD }} + - + name: Login to GitHub Container Registry + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + - + name: Set up QEMU + uses: docker/setup-qemu-action@v3 + with: + platforms: ${{ env.PLATFORMS }} + - + name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + with: + platforms: ${{ env.PLATFORMS }} + - + name: Extract metadata (tags, labels) for docker image + id: meta + uses: docker/metadata-action@v5 + env: + DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index + with: + images: | + ${{ env.OWNER_LC }}/${{ env.IMAGE_NAME }} + ghcr.io/${{ env.OWNER_LC }}/${{ env.IMAGE_NAME }} + flavor: | + latest=false + tags: | + type=edge,branch=feature/docker + labels: | + maintainer=Bruno Willenborg + maintainer.email=b.willenborg(at)tum.de + maintainer.organization=Chair of Geoinformatics, Technical University of Munich (TUM) + org.opencontainers.image.authors=Bruno Willenborg + org.opencontainers.image.vendor=3DCityDB Steering Committee + org.opencontainers.image.title=3D City Database Web Map Client + org.opencontainers.image.description=The 3DCityDB-Web-Map-Client is a web-based front-end for high-performance 3D visualization and interactive exploration of arbitrarily large semantic 3D city models and other geospatial data. + org.opencontainers.image.url=https://github.com/3dcitydb/3dcitydb-web-map + org.opencontainers.image.documentation=https://3dcitydb-docs.readthedocs.io/en/latest/webmap/index.html + org.opencontainers.image.source=https://github.com/3dcitydb/3dcitydb-web-map + - + name: Build and publish + uses: docker/build-push-action@v6 + id: docker_build + with: + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + platforms: ${{ env.PLATFORMS }} + annotations: ${{ steps.meta.outputs.annotations }} + provenance: false + sbom: false + - + name: Image digest + run: echo ${{ steps.docker_build.outputs.digest }} diff --git a/.github/workflows/docker-build-push-release.yml b/.github/workflows/docker-build-push-release.yml new file mode 100644 index 00000000..96614f54 --- /dev/null +++ b/.github/workflows/docker-build-push-release.yml @@ -0,0 +1,92 @@ +name: docker-build-push-release + +on: + workflow_dispatch: + release: + types: [published, edited] +env: + IMAGE_NAME: 3dcitydb-web-map-client + PLATFORMS: linux/amd64,linux/arm64 + +jobs: + build-push: + runs-on: ubuntu-latest + + steps: + - + name: Get release version without v + id: release_version + uses: battila7/get-version-action@v2 + - + name: set lower case owner name + run: | + echo "OWNER_LC=${OWNER,,}" >>${GITHUB_ENV} + env: + OWNER: '${{ github.repository_owner }}' + - + name: Checkout repo + uses: actions/checkout@v4 + - + name: Docker login Dockerhub + id: docker_login + uses: docker/login-action@v3 + with: + username: ${{ secrets.DOCKERHUB_USERNAME }} + password: ${{ secrets.DOCKERHUB_PASSWORD }} + - + name: Login to GitHub Container Registry + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + - + name: Set up QEMU + uses: docker/setup-qemu-action@v3 + with: + platforms: ${{ env.PLATFORMS }} + - + name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + with: + platforms: ${{ env.PLATFORMS }} + - + name: Extract metadata (tags, labels) for docker image + id: meta + uses: docker/metadata-action@v5 + env: + DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index + with: + images: | + ${{ env.OWNER_LC }}/${{ env.IMAGE_NAME }} + ghcr.io/${{ env.OWNER_LC }}/${{ env.IMAGE_NAME }} + flavor: | + latest=${{ !github.event.release.prerelease }} + tags: | + type=semver,pattern={{version}} + labels: | + maintainer=Bruno Willenborg + maintainer.email=b.willenborg(at)tum.de + maintainer.organization=Chair of Geoinformatics, Technical University of Munich (TUM) + org.opencontainers.image.authors=Bruno Willenborg + org.opencontainers.image.vendor=3DCityDB Steering Committee + org.opencontainers.image.title=3D City Database Web Map Client + org.opencontainers.image.description=The 3DCityDB-Web-Map-Client is a web-based front-end for high-performance 3D visualization and interactive exploration of arbitrarily large semantic 3D city models and other geospatial data. + org.opencontainers.image.url=https://github.com/3dcitydb/3dcitydb-web-map + org.opencontainers.image.documentation=https://3dcitydb-docs.readthedocs.io/en/latest/webmap/index.html + org.opencontainers.image.source=https://github.com/3dcitydb/3dcitydb-web-map + - + name: Build and publish + uses: docker/build-push-action@v6 + id: docker_build + with: + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + platforms: ${{ env.PLATFORMS }} + annotations: ${{ steps.meta.outputs.annotations }} + provenance: false + sbom: false + - + name: Image digest + run: echo ${{ steps.docker_build.outputs.digest }} diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..12be9707 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,22 @@ +ARG BASEIMAGE_TAG='21-bookworm-slim' +FROM "node:${BASEIMAGE_TAG}" + +RUN set -ex \ + mkdir -p /var/www/data + +WORKDIR /var/www + +COPY /3dwebclient ./3dwebclient +COPY /js ./js +COPY /theme ./theme +COPY /ThirdParty ./ThirdParty +COPY /docker/package.json /docker/server.js /docker/html/ ./ + +RUN set -ex && \ + npm install --omit=dev && \ + npm cache clean --force && \ + chown -R node:node . + +USER node +EXPOSE 8000 +CMD [ "node", "server.js", "--public"] diff --git a/README.md b/README.md index a3f3b267..d69db10b 100644 --- a/README.md +++ b/README.md @@ -1,74 +1,73 @@ -3DCityDB-Web-Map-Client -================================== +# 3DCityDB-Web-Map-Client -News -------- -#### Version [v2.0.0](https://github.com/3dcitydb/3dcitydb-web-map/releases/tag/v2.0.0) released! +## News -The 3DCityDB Web Map Client now supports the visualization of various exchange formats: **COLLADA/KML/glTF**, **CZML**, **GeoJSON**, **Cesium 3D Tiles** and **Indexed 3D Scene Layers (I3S)**. +__Version [v2.0.0](https://github.com/3dcitydb/3dcitydb-web-map/releases/tag/v2.0.0) released!__ -The latest release now supports displaying thematic data stored from data sources such as **Google Spreadsheets** (using Google Sheets API v4), **PostgreSQL** (using PostgREST API) and **OGC Feature API**. Additionally, existing thematic data **embedded** within the visualization datasets is also supported. +The 3DCityDB Web Map Client now supports the visualization of various exchange formats: __COLLADA/KML/glTF__, __CZML__, __GeoJSON__, __Cesium 3D Tiles__ and __Indexed 3D Scene Layers (I3S)__. + +The latest release now supports displaying thematic data stored from data sources such as __Google Spreadsheets__ (using Google Sheets API v4), __PostgreSQL__ (using PostgREST API) and __OGC Feature API__. Additionally, existing thematic data __embedded__ within the visualization datasets is also supported. See [release announcements](RELEASES.md) and [change logs](CHANGES.md) for the complete list of changes made in this version, as well as in previous ones. -Introduction -------- -The **3DCityDB-Web-Map-Client** is a web-based front-end for high-performance 3D visualization and interactive exploration of **arbitrarily large semantic 3D city models** and other geospatial data. The web client utilizes the [Cesium Virtual Globe](https://cesium.com/) as its 3D geo-visualization engine based on HTML5 and Web Graphics Library (WebGL) to provide hardware acceleration and cross-platform functionalities like displaying 3D graphic contents on web browsers without the needs of additional plugins. - -The key features and functionalities of the 3DCityDB-Web-Map-Client is summarized as follows: - -* Support for efficient displaying, caching, prefetching, dynamic loading and unloading of large pre-styled 3D visualization models in the form of **tiled KML/glTF datasets exported from the 3DCityDB** using the Importer/Exporter -* Intuitive user interface for adding and removing **arbitrary number of data layers** for 3D visualization (KML/glTF, GeoJSON, Cesium 3D Tiles, I3S), together with WMS/WMTS imagery layer, and Cesium digital terrain model -* Support for linking the 3D visualization models (KML/glTF, GeoJSON, Cesium 3D Tiles, I3S) with **external thematic data sources**, such as **Google Spreadsheets** and **PostgreSQL/PostgREST**, allowing for querying the thematic data of every 3D object -* Support for displaying the existing **thematic data embedded** within the visualization datasets, such as KML, GeoJSON, Cesium 3D Tiles and I3S -* Support for rich interaction with 3D visualization models, for example, **highlighting** of 3D objects on mouseover and mouseclick as well as **hiding** and **showing** of multiple selected 3D objects -* Support for exploring a 3D object of interest from **different view perspectives** using third-party mapping services like **Microsoft Bing Maps** with oblique view, **Google Streetview**, and a combined version (**DualMaps**) -* Support for on-the-fly activating and deactivating **shadow visualization** of 3D objects and Cesium digital terrain models -* Support for collaborative creation and sharing of the workspace of the 3DCityDB-Web-Map-Client by means of **generating a scene link** including information about the current camera perspective, activation status of the shadow visualization, parameters of the current loaded data layers, etc. This link can be easily shared or bookmarked, and can be reopened in a browser on different machines -* Support for **mobile devices** (smartphones, tablets, etc.) with live tracking of geolocation and orientation -* Packaged as a [**Docker image**](https://hub.docker.com/r/tumgis/3dcitydb-web-map/tags?page=1&ordering=last_updated) for fast and convenient deployment - -Architecture -------- +## Introduction + +The __3DCityDB-Web-Map-Client__ is a web-based front-end for high-performance 3D visualization and interactive exploration of __arbitrarily large semantic 3D city models__ and other geospatial data. The web client utilizes the [Cesium Virtual Globe](https://cesium.com/) as its 3D geo-visualization engine based on HTML5 and Web Graphics Library (WebGL) to provide hardware acceleration and cross-platform functionalities like displaying 3D graphic contents on web browsers without the needs of additional plugins. + +The key features and functionalities of the 3DCityDB-Web-Map-Client is summarized as follows: + +* Support for efficient displaying, caching, prefetching, dynamic loading and unloading of large pre-styled 3D visualization models in the form of __tiled KML/glTF datasets exported from the 3DCityDB__ using the Importer/Exporter +* Intuitive user interface for adding and removing __arbitrary number of data layers__ for 3D visualization (KML/glTF, GeoJSON, Cesium 3D Tiles, I3S), together with WMS/WMTS imagery layer, and Cesium digital terrain model +* Support for linking the 3D visualization models (KML/glTF, GeoJSON, Cesium 3D Tiles, I3S) with __external thematic data sources__, such as __Google Spreadsheets__ and __PostgreSQL/PostgREST__, allowing for querying the thematic data of every 3D object +* Support for displaying the existing __thematic data embedded__ within the visualization datasets, such as KML, GeoJSON, Cesium 3D Tiles and I3S +* Support for rich interaction with 3D visualization models, for example, __highlighting__ of 3D objects on mouseover and mouseclick as well as __hiding__ and __showing__ of multiple selected 3D objects +* Support for exploring a 3D object of interest from __different view perspectives__ using third-party mapping services like __Microsoft Bing Maps__ with oblique view, __Google Streetview__, and a combined version (__DualMaps__) +* Support for on-the-fly activating and deactivating __shadow visualization__ of 3D objects and Cesium digital terrain models +* Support for collaborative creation and sharing of the workspace of the 3DCityDB-Web-Map-Client by means of __generating a scene link__ including information about the current camera perspective, activation status of the shadow visualization, parameters of the current loaded data layers, etc. This link can be easily shared or bookmarked, and can be reopened in a browser on different machines +* Support for __mobile devices__ (smartphones, tablets, etc.) with live tracking of geolocation and orientation +* Packaged as a [__Docker image__](https://hub.docker.com/r/tumgis/3dcitydb-web-map/tags?page=1&ordering=last_updated) for fast and convenient deployment + +## Architecture +

-License -------- +## License + The 3DCityDb-Web-Map-Client is licensed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). See the `LICENSE` file for more details. -Latest release --------------- +## Latest release + All releases are available from the [releases section](https://github.com/3dcitydb/3dcitydb-web-map/releases). -This project is also available in Docker, see [repository](https://github.com/tum-gis/3dcitydb-web-map-docker) +This project is also available in Docker, see [repository](https://github.com/tum-gis/3dcitydb-web-map-docker) and [images](https://hub.docker.com/r/tumgis/3dcitydb-web-map/tags?page=1&ordering=last_updated). -For convenient use, there is an official [web link](https://www.3dcitydb.org/3dcitydb-web-map/2.0.0/3dwebclient/index.html) available for the current version that can be called to directly run the 3DCityDb-Web-Map-Client on your web browser. **All past and future versions** of the web client are hosted on our server using their own version numbers, so that they will remain accessible and available at any given time. +For convenient use, there is an official [web link](https://www.3dcitydb.org/3dcitydb-web-map/2.0.0/3dwebclient/index.html) available for the current version that can be called to directly run the 3DCityDb-Web-Map-Client on your web browser. __All past and future versions__ of the web client are hosted on our server using their own version numbers, so that they will remain accessible and available at any given time. -System requirements -------------------- -The hardware on which the 3DCityDB-Web-Map-Client will be run must have a graphics card installed that supports WebGL. In addition, the web browser in use must also provide appropriate WebGL support. +## System requirements + +The hardware on which the 3DCityDB-Web-Map-Client will be run must have a graphics card installed that supports WebGL. In addition, the web browser in use must also provide appropriate WebGL support. You can visit the following website to check whether your web browser supports WebGL or not: [http://get.webgl.org/](http://get.webgl.org) -The 3DCityDB-Web-Map-Client has been successfully tested on (but is not limited to) the following web browsers under different desktop operating systems like Microsoft Windows, Linux, Apple Mac OS X, and even on mobile operating systems like Android and iOS. -* Apple Safari +The 3DCityDB-Web-Map-Client has been successfully tested on (but is not limited to) the following web browsers under different desktop operating systems like Microsoft Windows, Linux, Apple Mac OS X, and even on mobile operating systems like Android and iOS. + +* Apple Safari * Mozilla Firefox * Google Chrome -* Opera +* Opera For best performance, it is recommended to use Google Chrome. -Documentation -------------- +## Documentation + A complete and comprehensive documentation on the 3DCityDB-Web-Map-Client is installed with the 3DCityDB Importer/Exporter and is also available [online](https://www.3dcitydb.org/3dcitydb/documentation/). -Contributing ------------- +## Contributing The source codes of this project are available on [GitHub](https://github.com/3dcitydb/3dcitydb-web-map). All releases can be found [here](https://github.com/3dcitydb/3dcitydb-web-map/releases). @@ -78,21 +77,20 @@ The platform GitHub is also used for collaborating: * To contribute code for fixing issues, please create a pull request with the issue id. * To propose a new feature, please also create a GitHub issue and open a discussion. -Developers ------------------------------------ +## Developers -The 3DCityDB-Web-Map-Client has been developed by: +The 3DCityDB-Web-Map-Client has been developed by: * Son H. Nguyen, Kanishk Chaturvedi, and Thomas H. Kolbe
[Chair of Geoinformatics, Technical University of Munich](https://www.asg.ed.tum.de/en/gis) and with the support from the following cooperation partners: -* Zhihang Yao, Jannes Bolling, Lucas van Walstijn, and Claus Nagel +* Zhihang Yao, Jannes Bolling, Lucas van Walstijn, and Claus Nagel
[Virtual City Systems, Berlin](https://vc.systems) -Demos ------------------------------------ +## Demos + [Demo 1: Visualization of different LoD3 CityGML top-level features (TINRelief, Building, Bridge, Tunnel, WaterBody, Vegetation, CityFurniture, Transportation etc.) in glTF format](https://www.3dcitydb.org/3dcitydb-web-map/1.8.0/3dwebclient/index.html?title=Railway_Scene_LoD3_Demo&shadows=false&terrainShadows=0&latitude=52.327365948439194&longitude=13.030088863339616&height=217.81657370715422&heading=25.207012266729155&pitch=-29.116822621630785&roll=0.09098022034414832&layer_0=url%3Dhttps%253A%252F%252Fwww.3dcitydb.net%252F3dcitydb%252Ffileadmin%252Fmydata%252FRailway_Scene_LoD3%252FRailway_Scene_LoD3_collada_MasterJSON.json%26name%3DRailway_Scene_LoD3%26layerDataType%3DCOLLADA%252FKML%252FglTF%26gltfVersion%3D1.0%26active%3Dtrue%26spreadsheetUrl%3D%26cityobjectsJsonUrl%3D%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D50%26maxCountOfVisibleTiles%3D200&splashWindow=url%3Dsplash%252FSplashWindow.html%26showOnStart%3Dtrue)

@@ -123,76 +121,90 @@ Demos

-# Mobile Support Extension +## Mobile Support Extension -## New features +### New features -The current 3DCityDB-Web-Map-Client is equipped with an extension that provides better support for mobile devices. -The extension comes with a built-in mobile detector, which can automatically detect and adjust the client's behaviors accordingly to whether the 3DCityDB-Web-Map-Client is operating on a mobile device. +The current 3DCityDB-Web-Map-Client is equipped with an extension that provides better support for mobile devices. +The extension comes with a built-in mobile detector, which can automatically detect and adjust the client's behaviors accordingly to whether the 3DCityDB-Web-Map-Client is operating on a mobile device. Some of the most important mobile features enabled by this extension are listed as follows: - -* **A more lightweight graphical user interface:** -In order to make the best use of the limited screen real-estate available on mobile devices, some elements are removed or hidden from the web client, -such as credit texts and logos, as well as some of Cesium's built-in navigation controls that can easily be manipulated using touch gestures. + +* __A more lightweight graphical user interface:__ +In order to make the best use of the limited screen real-estate available on mobile devices, some elements are removed or hidden from the web client, +such as credit texts and logos, as well as some of Cesium's built-in navigation controls that can easily be manipulated using touch gestures. +

- +

-* **Visual adjustments:** - * The main toolbox now scales to fit to the screen size. In case of excess lines/length, the toolbox becomes scrollable (see picture below). -

+* __Visual adjustments:__ + + * The main toolbox now scales to fit to the screen size. In case of excess lines/length, the toolbox becomes scrollable (see picture below). + +

-

+

- * The infobox displayed when a city object (e.g. building) is clicked is now displayed in fullscreen with scrollable contents, as illustrated below. -

+ * The infobox displayed when a city object (e.g. building) is clicked is now displayed in fullscreen with scrollable contents, as illustrated below. + +

-

+

+ + * The loading icon is now shown as a horizontal bar at the bottom of the screen (highlighted by the green box in the picture below). - * The loading icon is now shown as a horizontal bar at the bottom of the screen (highlighted by the green box in the picture below). -

+

-

+

-* Most importantly: **The introduction of a GPS button** (located on the top right corner in the view toolbar) providing new functionalities involving user's current location and orientation. Namely: - * GPS "snapshot": shows the user's current position and orientation, -

+* Most importantly: __The introduction of a GPS button__ (located on the top right corner in the view toolbar) providing new functionalities involving user's current location and orientation. Namely: + + * GPS "snapshot": shows the user's current position and orientation, + +

-

+

+ + * Real-time Compass Tracking: periodically shows the user's current orientation with fixed location, - * Real-time Compass Tracking: periodically shows the user's current orientation with fixed location, -

+

-

+

- * Real-time Compass Tracking + Position or the "First-person View" mode: periodically shows the user's current orientation and position. -

+ + * Real-time Compass Tracking + Position or the "First-person View" mode: periodically shows the user's current orientation and position. + +

-

+

- * Disable real-time tracking: the camera will then ascend to a higher altitude of the current location. -

+ * Disable real-time tracking: the camera will then ascend to a higher altitude of the current location. + +

-

+

-## Demos +### Demos To test the mobile extension, simply click on one of the following two URLs: + * [Demo first-person view](https://www.3dcitydb.org/3dcitydb-web-map/2.0.0/3dwebclient/index.html?title=3DCityDB-Web-Map-Client&shadows=false&terrainShadows=0&latitude=48.14841421296063&longitude=11.567992899981077&height=288.04731096361564&heading=328.7476197616151&pitch=-79.22129067410182&roll=359.4611498135091&layer_0=url%3Dhttps%253A%252F%252Fwww.3dcitydb.org%252F3dcitydb%252Ffileadmin%252Fmydata%252FTUM_Buildings%252FTUM_Buildings_glTF%252FTUM_Buildings_glTF_MasterJSON.json%26name%3DMUC%26layerDataType%3DCOLLADA%252FKML%252FglTF%26gltfVersion%3D0.8%26active%3Dtrue%26spreadsheetUrl%3Dhttps%253A%252F%252Ffusiontables.google.com%252Fdata%253Fdocid%253D1KE3odY92wmpwdyUs6osYhNPgRtI9W3GOQyuyHfp3%2523rows%253Aid%253D1%26cityobjectsJsonUrl%3D%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D200%26maxCountOfVisibleTiles%3D200&splashWindow=url%3Dsplash%252FSplashWindow.html%26showOnStart%3Dtrue) + * [Demo debug-mode view](https://www.3dcitydb.org/3dcitydb-web-map/2.0.0/3dwebclient/index.html?title=3DCityDB-Web-Map-Client&shadows=false&terrainShadows=0&latitude=48.14841421296063&longitude=11.567992899981077&height=288.04731096361564&heading=328.7476197616151&pitch=-79.22129067410182&roll=359.4611498135091&layer_0=url%3Dhttps%253A%252F%252Fwww.3dcitydb.org%252F3dcitydb%252Ffileadmin%252Fmydata%252FTUM_Buildings%252FTUM_Buildings_glTF%252FTUM_Buildings_glTF_MasterJSON.json%26name%3DMUC%26layerDataType%3DCOLLADA%252FKML%252FglTF%26gltfVersion%3D0.8%26active%3Dtrue%26spreadsheetUrl%3Dhttps%253A%252F%252Ffusiontables.google.com%252Fdata%253Fdocid%253D1KE3odY92wmpwdyUs6osYhNPgRtI9W3GOQyuyHfp3%2523rows%253Aid%253D1%26cityobjectsJsonUrl%3D%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D200%26maxCountOfVisibleTiles%3D200&splashWindow=url%3Dsplash%252FSplashWindow.html%26showOnStart%3Dtrue&viewMode=debug). -## Notes +### Notes -The mobile extension makes use of the Geolocation API and the DeviceOrientation API in HTML5. -The Geolocation API only functions via HTTPS since Google Chrome 50. Therefore, make sure the client is called from an HTTPS page or your own localhost. +The mobile extension makes use of the Geolocation API and the DeviceOrientation API in HTML5. +The Geolocation API only functions via HTTPS since Google Chrome 50. Therefore, make sure the client is called from an HTTPS page or your own localhost. Additional important notes: * Test the client on devices equipped with GPS. * If the Geolocation API asks for permission to retrieve your current location, select "Allow". -More information ----------------- +## Docker + +## More information The 3DCityDB-Web-Map-Client is a part of the [3DCityDB Software Suite](https://www.3dcitydb.org) for managing and working with large semantic 3D city models in CityGML. However, the web client can also be used as a separate stand-alone component. @@ -200,8 +212,8 @@ The 3DCityDB-Web-Map-Client is a part of the [3DCityDB Software Suite](https://w ## Acknowledgement -The development of these methods and implementations were supported -and partially funded by the company [CADFEM](https://www.cadfem.net) -within a dedicated collaboration project in the context of the -[Leonhard Obermeyer Center (LOC)](https://www.ed.tum.de/loc) +The development of these methods and implementations were supported +and partially funded by the company [CADFEM](https://www.cadfem.net) +within a dedicated collaboration project in the context of the +[Leonhard Obermeyer Center (LOC)](https://www.ed.tum.de/loc) at the [Technical University of Munich (TUM)](https://www.tum.de). diff --git a/docker/html/CityDBonDocker-big.png b/docker/html/CityDBonDocker-big.png new file mode 100644 index 00000000..0fe19a83 Binary files /dev/null and b/docker/html/CityDBonDocker-big.png differ diff --git a/docker/html/TUM_Logo_blau_rgb_s.svg b/docker/html/TUM_Logo_blau_rgb_s.svg new file mode 100644 index 00000000..2b3f9fe7 --- /dev/null +++ b/docker/html/TUM_Logo_blau_rgb_s.svg @@ -0,0 +1,12 @@ + + + + 2015_Logo_TUM_RGB + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/docker/html/index.html b/docker/html/index.html new file mode 100644 index 00000000..150443c8 --- /dev/null +++ b/docker/html/index.html @@ -0,0 +1,139 @@ + + + + 3DCityDB Web-Map-Client Docker + + + + + +

3DCityDB Web-Map-Client Docker

+
+ + + +
+

+ Welcome to the 3D City Database (3DCityDB) Web-Map-Client Docker Image! +

+

+ To start the 3D Web-Map-Client or browse you + data directory use the buttons below. +

+

+ Use the data directory listing to copy the required URLs for setting up a + Web-Map-Client project using your Browser's "Right click" → + "Copy link address" feature.
+ How to add data for usage within the 3DCityDB Web-Map-Client to the data + directory is described + here. +

+

+ If you require assistance using the 3DCityDB Web-Map-Client please take a + look at the comprehensive documentation available at the official + 3DCityDB Homepage + or take a look at the + learning material. The documentation for the + 3DCityDB Web-Map-Client Docker Image is available on + GitHub. + Various 3DCityDB Web-Map-Client online demos are available + here. +

+
+ +
+ + diff --git a/docker/package.json b/docker/package.json new file mode 100644 index 00000000..3b922e9e --- /dev/null +++ b/docker/package.json @@ -0,0 +1,21 @@ +{ + "name": "3d-city-db-web-map-client-docker", + "version": "1.0.0", + "description": "Modified version of the 3DCityDB Web-Map-Client supporting directory listings.", + "homepage": "https://3dcitydb.org/", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/tum-gis/3dcitydb-web-map-docker" + }, + "dependencies": { + "compression": "1.7.x", + "express": "~4.21.x", + "request": "2.88.2", + "serve-index-next": "1.10.x", + "yargs": "17.7.2" + }, + "engines": { + "node": ">=21.x.x" + } +} diff --git a/docker/server.js b/docker/server.js new file mode 100644 index 00000000..a0049e72 --- /dev/null +++ b/docker/server.js @@ -0,0 +1,202 @@ +/* + * 3DCityDB-Web-Map + * http://www.3dcitydb.org/ + * + * Copyright 2015 - 2017 + * Chair of Geoinformatics + * Technical University of Munich, Germany + * https://www.gis.bgu.tum.de/ + * + * The 3DCityDB-Web-Map is jointly developed with the following + * cooperation partners: + * + * virtualcitySYSTEMS GmbH, Berlin + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * A simple JavaScript based HTTP server forked from the cesium-starter-app project at https://github.com/pjcozzi/cesium-starter-app. + **/ + +(function() { + "use strict"; + /*global console,require,__dirname,process*/ + /*jshint es3:false*/ + + var express = require('express'); + var compression = require('compression'); + var url = require('url'); + var request = require('request'); + var serveIndex = require('serve-index-next'); + + var yargs = require('yargs').options({ + 'port' : { + 'default' : 8000, + 'description' : 'Port to listen on.' + }, + 'public' : { + 'type' : 'boolean', + 'description' : 'Run a public server that listens on all interfaces.' + }, + 'upstream-proxy' : { + 'description' : 'A standard proxy server that will be used to retrieve data. Specify a URL including port, e.g. "http://proxy:8000".' + }, + 'bypass-upstream-proxy-hosts' : { + 'description' : 'A comma separated list of hosts that will bypass the specified upstream_proxy, e.g. "lanhost1,lanhost2"' + }, + 'help' : { + 'alias' : 'h', + 'type' : 'boolean', + 'description' : 'Show this help.' + } + }); + var argv = yargs.argv; + + if (argv.help) { + return yargs.showHelp(); + } + + // eventually this mime type configuration will need to change + // https://github.com/visionmedia/send/commit/d2cb54658ce65948b0ed6e5fb5de69d022bef941 + var mime = express.static.mime; + mime.define({ + 'application/json' : ['czml', 'json', 'geojson', 'topojson'], + 'model/vnd.gltf+json' : ['gltf'], + 'model/vnd.gltf.binary' : ['bgltf'], + 'text/plain' : ['glsl'] + }); + + var app = express(); + app.use(compression()); + app.use(express.static(__dirname)); + app.use('/data', express.static('data'), serveIndex('data', {'icons': true, 'view': 'details'})); + + app.use('/examples', express.static('examples'), serveIndex('examples', {'icons': true, 'view': 'details'})); + + + function getRemoteUrlFromParam(req) { + var remoteUrl = req.params[0]; + if (remoteUrl) { + // add http:// to the URL if no protocol is present + if (!/^https?:\/\//.test(remoteUrl)) { + remoteUrl = 'http://' + remoteUrl; + } + remoteUrl = url.parse(remoteUrl); + // copy query string + remoteUrl.search = url.parse(req.url).search; + } + return remoteUrl; + } + + var dontProxyHeaderRegex = /^(?:Host|Proxy-Connection|Connection|Keep-Alive|Transfer-Encoding|TE|Trailer|Proxy-Authorization|Proxy-Authenticate|Upgrade)$/i; + + function filterHeaders(req, headers) { + var result = {}; + // filter out headers that are listed in the regex above + Object.keys(headers).forEach(function(name) { + if (!dontProxyHeaderRegex.test(name)) { + result[name] = headers[name]; + } + }); + return result; + } + + var upstreamProxy = argv['upstream-proxy']; + var bypassUpstreamProxyHosts = {}; + if (argv['bypass-upstream-proxy-hosts']) { + argv['bypass-upstream-proxy-hosts'].split(',').forEach(function(host) { + bypassUpstreamProxyHosts[host.toLowerCase()] = true; + }); + } + + app.get('/proxy/*', function(req, res, next) { + // look for request like http://localhost:8080/proxy/http://example.com/file?query=1 + var remoteUrl = getRemoteUrlFromParam(req); + if (!remoteUrl) { + // look for request like http://localhost:8080/proxy/?http%3A%2F%2Fexample.com%2Ffile%3Fquery%3D1 + remoteUrl = Object.keys(req.query)[0]; + if (remoteUrl) { + remoteUrl = url.parse(remoteUrl); + } + } + + if (!remoteUrl) { + return res.status(400).send('No url specified.'); + } + + if (!remoteUrl.protocol) { + remoteUrl.protocol = 'http:'; + } + + var proxy; + if (upstreamProxy && !(remoteUrl.host in bypassUpstreamProxyHosts)) { + proxy = upstreamProxy; + } + + // encoding : null means "body" passed to the callback will be raw bytes + + request.get({ + url : url.format(remoteUrl), + headers : filterHeaders(req, req.headers), + encoding : null, + proxy : proxy + }, function(error, response, body) { + var code = 500; + + if (response) { + code = response.statusCode; + res.header(filterHeaders(req, response.headers)); + } + + res.status(code).send(body); + }); + }); + + var server = app.listen(argv.port, argv.public ? undefined : 'localhost', function() { + console.log('Cesium development server running publicly. Connect to localhost:%d/', server.address().port); + }); + + server.on('error', function (e) { + if (e.code === 'EADDRINUSE') { + console.log('Error: Port %d is already in use, select a different port.', argv.port); + console.log('Example: node server.js --port %d', argv.port + 1); + } else if (e.code === 'EACCES') { + console.log('Error: This process does not have permission to listen on port %d.', argv.port); + if (argv.port < 1024) { + console.log('Try a port number higher than 1024.'); + } + } + console.log(e); + process.exit(1); + }); + + server.on('close', function() { + console.log('Cesium development server stopped.'); + }); + + var isFirstSig = true; + process.on('SIGINT', function() { + if (isFirstSig) { + console.log('Cesium development server shutting down.'); + server.close(function() { + process.exit(0); + }); + isFirstSig = false; + } else { + console.log('Cesium development server force kill.'); + process.exit(1); + } + }); + +})();