Check out the Live Demos for the Zurich example on the website of the Open Source Geospatial Laboratory at ETH Zurich: Demo
This project has been developed in the course of the Cartography Lab at ETH Zurich with the aim to compare two well-known 3D Mapping APIs with each other. This was done by implementing the same application with both APIs in the most similar way possible. The applications show the settlement development of the city of Zurich from 1850-2030 implemented in two different Virtual Globes for comparison purposes:
- ArcGIS API for JavaScript (V 4.5)
- Cesium.js (V 1.37)
The 3D Web Apps feature 3D building blocks and an animated timeline that will trigger to show and hide buildings based on the selected year. The Cesium application additionally has a height-dependent animation of the buildings of the selected year (growing out of the ground).
For the ArcGIS API for JavaScript application, the 3D data layers have been published as Scene Layer Packages (.slpk) to ArcGIS Online according to the i3s OGC Standard.
The Cesium application uses 3D-Tiles to display the 3D data which is an open specification for streaming massive heterogeneous 3D geospatial datasets.
The following code for both API samples can be used to build your own 3D settlement development animation. Please follow the steps below to build an application with your own dataset:
- Fork and clone (or download) this repo.
- Create the node_modules folder by prompting in folder "arcgis":
$ npm install
- Publish your own dataset with 3D buildings and a year attribute to ArcGIS Online.
- Retrieve the Service URL of your published data set.
- In the repo, move to folder "arcgis" and adjust the code in js/app.js on all TODOs:
- add your Service URL
- add the name of the year attribute
- change the view.goTo property so your application zooms to your city/dataset
- Done!
- Fork and clone (or download) this repo.
- Create the node_modules folder by prompting in folder "cesium":
$ npm install
- Convert your own dataset with 3D buildings and a year attribute as 3D Tiles (e.g. with FME).
- Move your dataset to folder cesium/3d-tiles.
- In the repo, move to folder cesium/js and adjust the code in app.js on all TODOs:
- add the name of your 3d-tiles
- change the name of the year attribute
- change the camera.flyTo property so your application zooms to your city/dataset
- Done!
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.