FME 설명자료 How to Bring 2D Data into CesiumJS

2021. 3. 19.
How to Bring 2D Data into CesiumJS | Safe Software
Blog / About Data
How to Bring 2D Data into

CesiumJS
With CesiumJS, you can create a web visualization to
display your geospatial data in a browser—making it easy
to share your data with anyone, anywhere.
Dmitri Bagh
6 min read
Last Updated Published

August 13, 2018 August 13, 2018
With CesiumJS, you can create a web visualization to display your geospatial data in a browser
—making it easy to share your data with anyone, anywhere. Here are the steps I took to
prepare 2D building footprints for a 3D CesiumJS web visualization. Download the
workspace and play with the output below.
Source Data: 900 MB of Polygons

It is always fun to play with an interesting dataset. A recent publication of 125 Million building
Dark Mode Beta
footprints in the United States to the OpenStreetMap community is a perfect example of a
https://www.safe.com/blog/2018/08/bring-2d-data-cesiumjs/ 1/12
2021. 3. 19. How to Bring 2D Data into CesiumJS | Safe Software
dataset with which I would want to make something interesting. This is how I ended up with a
900 MB JSON file representing the buildings of Washington state.
A quick inspection of the footprints revealed there was no elevation information. Perfect! This
looks like a typical task for FME (and for myself) – bring in a few di erent datasets and combine
them into something new and exciting.
Converting 2D to 3D with FME

Step 1: Combine Footprints with Elevation Data
For elevation information, I went to the Washington Lidar Portal, a source of LiDAR and derived
products managed by the Washington Department of Natural Resources. I picked two counties,
Pierce and King, and downloaded the DSM and DTM for both—a pretty heavy 80 GB dataset
with over one hundred pairs of raster tiles.
Dark Mode Beta
From here, FME can take care of everything. As my first steps, I brought the JSON footprints
and rasters into the workspace, extracted building geometries with GeometryExtractor into an
attribute, and using RasterBandCombiner, merged all DSM and DTM into two-band rasters,
grouping them by tile names:
Dark Mode Beta
Step 2: Get Building Heights from Clipped

Rasters
The buildings served as clippers to the two-band rasters (Clipper with “Merge Attributes”
option checked so the building geometries will be transferred to rasters). The result is
hundreds of thousands of small rasters – one raster per building (and sometimes more in cases
when a building was stretching over the tile edges – I used RasterMosaicker to guarantee a
single raster per footprint).
Dark Mode Beta
With RasterBandMinMaxExtractor, I extracted the minimum and maximum values per each
band within each small raster – the lowest pixel value of the DTM band represents the ground,
and the highest value of the DSM band, the top of the roof. To be precise, the highest value is
not guaranteed to be the roof top – it might be a tall tree overhanging the building – but for our
purpose of a massive visualization, it is an acceptable deficiency.
Note DTM and DSM are raster products derived from LiDAR. This means when DEM datasets are
not available, it is possible to use LiDAR data instead – FME will clip the point clouds, and then,
with PointCloudStatisticsCalculator, we can find min and max values within the buildings.
Dark Mode Beta
Step 3: Extrude Footprints Based on Retrieved

Elevation Values
The final steps include replacing the raster geometry with the original footprint geometry, and
extruding this geometry to the di erence between max DSM and min DTM.
Sharing the Output in a Web Visualization

In the past, I have shared my output by publishing a few screenshots.
Dark Mode Beta
Today, I can easily share the full result with you thanks to modern web-based technologies. I
hope you enjoyed my three.js experiments before, and now it is time to use the power of
CesiumJS library, which is better suited for geospatial data and can handle huge datasets
thanks to smart tiling and priority settings.
FME currently has two Cesium writers: one for point clouds (Cesium 3D Point Cloud), and
one for 3D geometries such as solids and surfaces (Cesium 3D Tiles).
Writing to 3D Tiles is straightforward. The only format attribute we can set is cesium_priority, a
real number that defines the relative placement of features within the tile hierarchy. I used
VolumeCalculator to set this attribute. In Cesium, this leads to rendering bigger buildings
before smaller ones.
The resulting dataset consists of a JSON file, which outlines the tile structure of the dataset,
and a folder of 3D tiles with the .b3dm extension.
At this point, FME does not generate the HTML file necessary to open the scene in a browser;
however, it can be done with AttributeCreator, where we can easily place the necessary code
with minimal changes, such as specifying paths to the Cesium JavaScript library, CSS style
sheet, and the dataset itself. Of course, it is possible to make any kinds of adjustments and add
a lot more customization and functionality using JavaScript, but for that, I invite you to visit
Cesium.org.
Meanwhile, you can have a look at 1.2 million buildings in King and Pierce counties of
Washington state right in your web browser. A good internet connection and a powerful
computer are recommended 🙂
Interact with the output in Cesium
But if you prefer the old way of sharing, here are a couple of screenshots.
Dark Mode Beta
Download and learn how the Cesium workspace is made and try it with your own data. We
would love to hear how you use Cesium tiles in your work or if you don’t use them yet, where
do you see them fit in your organization.
Dark Mode Beta
3D About Data Cesium DEM Raster Web Visualization
Dmitri Bagh
Dmitri is the scenario creation expert at Safe So ware, which means he spends his
days playing with FME and testing what amazing things it can do.
Comments
2 Responses to “How to Bring 2D Data into

CesiumJS”
Felipe Verdú says:

March 25, 2020 at 8:28 am
Hi
Thanks DImitri for very interesting article about creating 3Dtiles, something really
new for me!
I am really interested in see the results in a browser so I am wondering how to create
this html file and to be able to open in for instance Chrome.
I have created this html but I am not able to open/see it in Chrome
3D Tileset Test
@import url(https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; Dark Mode Beta
}
var viewer = new Cesium.Viewer(‘cesiumContainer’);

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: ‘./3Dtiles/pierce’
}));
Reply
Ada Lee says:

May 14, 2020 at 2:21 pm
From Dmitri: Hi Felipe, it’s hard to tell without looking at the details. One
of the conditions to make this work – the file should be viewed through
the http (so it either should be uploaded to the web or viewed through a
local web server). If you already do this, maybe send me a note to
dmitri@safe.com, and we will try to figure out what is going on.
Reply
Leave a Reply
Your email address will not be published. Required fields are marked *
Comment
Dark Mode Beta

Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Post Comment
Related Posts
The Importance of the OGC & Open Standards

Dean Hintz • March 17, 2021 • 11 min read
By utilizing open standards, users can choose best of breed tools for each
application and move data between them with open methods. See where
the OGC fits in to all of this, and learn more about how to use open
standard data yourself....
Capture Data Insights with Stream Processing

Stewart Harper • March 11, 2021 • 6 min read
Stream processing allows for the collection, integration, and analysis of

unbounded data so organizations can deliver insights across massive
Dark Mode Beta
datasets on a continuous basis. See how it all works in the post below....
How Real-Time Data Works & Why You Need It

Don Murray • March 8, 2021 • 8 min read
With the growth of sensors and the proliferation of internet-based

applications, the volume of real-time data is growing as well as the need to
process it. ...
Geodatabase vs. Geospatial Database: What’s

the Di erence?
Jenna Lyons • March 3, 2021 • 13 min read
If you’re reading this, know that you aren’t alone in asking this question. ...
Using Hexagonal Tiling and Hex Grids for Maps

Dale Lutz • February 22, 2021 • 9 min read
There’s just no resisting the appeal of the hexagon. They have a couple of
significant properties that make them the perfect shape, especially for
mapping....
Dark Mode Beta

FME 설명자료 How to Bring 2D Data into CesiumJS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FME 설명자료 How to Bring 2D Data into CesiumJS

Uploaded by

Copyright:

Available Formats

2021. 3. 19.

How to Bring 2D Data into CesiumJS | Safe Software

Blog / About Data

How to Bring 2D Data into

Last Updated Published

Source Data: 900 MB of Polygons

Converting 2D to 3D with FME

Dark Mode Beta

Dark Mode Beta

Step 2: Get Building Heights from Clipped

Dark Mode Beta

Dark Mode Beta

Step 3: Extrude Footprints Based on Retrieved

Sharing the Output in a Web Visualization

Interact with the output in Cesium

Dark Mode Beta

Dark Mode Beta

3D About Data Cesium DEM Raster Web Visualization

2 Responses to “How to Bring 2D Data into

Felipe Verdú says:

I have created this html but I am not able to open/see it in Chrome

var viewer = new Cesium.Viewer(‘cesiumContainer’);

Ada Lee says:

Dark Mode Beta

The Importance of the OGC & Open Standards

Capture Data Insights with Stream Processing

Stream processing allows for the collection, integration, and analysis of

How Real-Time Data Works & Why You Need It

With the growth of sensors and the proliferation of internet-based

Geodatabase vs. Geospatial Database: What’s

Using Hexagonal Tiling and Hex Grids for Maps

Dark Mode Beta

You might also like