From GIS to CAD: 3D Site Download

Architects, urban planners, and civil engineers often require accurate and accessible 3D context to visualize and design new projects within existing urban environments. A new open-source showcase app built with the ArcGIS Maps SDK for JavaScript, called the City Download Portal, enables you to do exactly that. By drawing an extent, you can download selected buildings and terrain as one single 3D model. Open the file – for example in Blender, Rhino or SketchUp – to import GIS context into your favorite modeling software.

Want to try it out before diving into the details of 3D formats and georeferencing? Here is the link to the live showcase app: https://esri.github.io/city-download-portal/

The 3D Object Layer

Uploading and manipulating 3D models on the web is enabled by a layer type called 3D object layer. It can be created through ArcGIS Pro or directly in ArcGIS Online and ArcGIS Enterprise. My colleague Nikola Marincic has an excellent article on the creation and usage of this layer.

A 3D object layer consists of a 3D object scene layer and a 3D object feature layer. The scene layer facilitates efficient display and loading, while the associated feature layer stores the data for editing and querying. This 3D functionality is integrated within the SceneLayer class, allowing you to use SceneLayer.queryFeatures() to retrieve results directly from the associated feature layer. This means you can run spatial or attribute-based queries that return the 3D geometry, the same way you’re used to with point, line, and polygon features.

Manipulating 3D models such as buildings directly in the browser requires having the 3D geometry in an interoperable format. For web applications, the common format is GLB – also known as binary glTF. Here’s the awesome part: our team at the Esri R&D Center Zurich made 3D data manipulation and access available as a public API. This means you can use the JavaScript Maps SDK to implement custom workflows and applications using your 3D data, ultimately empowering authoritative data providers to increase interoperability and accessibility of their 3D system of record.

3D Geometry Workflow

In our City Download Portal we leverage these new possibilities in the following way:

• Query 3D Building Features: Utilize the SceneLayer.queryFeatures method to select and retrieve Mesh geometries for specific buildings.
• Create Terrain Geometry: Generate a detailed Mesh geometry for the terrain from elevation data using meshUtils.createFromElevation.
• Merge Features into a Single Mesh: Create a single 3D model using meshUtils.merge.
• Convert to Cartesian Coordinates: Establish a real-world reference point as the local model origin using meshUtils.convertVertexSpace.
• Export and Download: Convert the Mesh geometry to binary glTF (GLB) with Mesh.toBinaryGLTF for download.

In this workflow, the Mesh geometry class represents GLB models in the JavaScript Maps SDK and provides conversion methods between the two. Queries are based on extents defined by the user and performed directly on the SceneLayer. While textures are ignored in this example, individual features or parts of the exported model can be colored to enhance visualization.

Generally, this client-side approach allows for the integration of additional layers – like vegetation, street furniture, or infrastructure – into your 3D models. The possibilities are as vast as your imagination – or the web-browser’s memory, eventually.

Interoperability and Georeferencing

Because we are moving 3D data between a GIS and 3D modeling software, maintaining consistency in coordinate systems and origins across tools is crucial. By keeping a fixed reference point and orientation, newly modeled 3D data will align perfectly when re-imported back into ArcGIS. While this is outside the scope of our new City Download Portal showcase, it can be achieved with a 3D object layer in Scene Viewer or any other JavaScript Maps SDK powered editing app for that matter.

While some 3D formats store georeferencing metadata directly, others – like glTF – require manual referencing. The JavaScript Maps SDK provides tooltips with exact coordinate data, ensuring accuracy during manual input. Excitingly, support for file-based georeferencing is on the horizon in upcoming JavaScript Maps SDK releases, further simplifying the integration process across different platforms.

Conclusion

Accessing your 3D data in the browser is now possible and opens up a whole range of opportunities to build custom workflows. The City Download Portal is one example showing what’s possible. You can fork and redeploy a version in your own GitHub organization, or simply replace the web scene ID in the URL to use it with your own data. The app will utilize any 3D object layer you have in your scene.

While client-side processing offers flexibility, it’s essential to monitor memory usage. For larger datasets, consider shifting the 3D data manipulation to a server-side implementation.

The City Download Portal is open source and publicly available:

• Live App
• Source Code

We would like to thank the cities of St. Gallen and Vigo for providing their 3D buildings as open data for this demo application.