Cesium Tutorial on Coinidea's Blog

Converting CDB to 3D Tiles with Cesium

Sat, 13 Feb 2021 16:02:38 +0000

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

At Cesium, we work every day to advance 3D geospatial technology by expanding the ecosystem around 3D Tiles — the Open Geospatial Consortium (OGC) community standard we created for streaming massive heterogeneous 3D datasets. Today, we are excited to announce that users can now convert OGC CDB datasets to 3D Tiles using the CDB to 3D Tiles pipeline.

CDB is commonly used within the U.S. government for 3D synthetic environment modeling and simulation. It defines a standardized model and structure for storing, updating, and archiving a single “versioned” virtual representation of the Earth. CDB datasets can store natural environments and man-made structures along with their attributes and relationships.

By converting CDB to 3D Tiles, data can be efficiently streamed across all platforms that support 3D Tiles — including ATAK and the upcoming Cesium for Unreal — as well as between online and offline devices, while preserving the precision and detail of the original CDB. The pipeline retains feature attributes, enabling runtime querying, styling, and analysis for deeper insights into the data. All versions of CDB are supported.

To learn more about solutions for federal and defense, drop me a line.

A view of downtown San Diego featuring terrain, imagery, fixed building models, instanced trees, and the Coronado Bridge in the distance, loaded as 3D Tiles in CesiumJS. See the live demo.

Original article: https://cesium.com/blog/2020/11/25/cdb-to-3dtiles/

Author: Brady Moore

Cesium Chinese community QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Creating Digital Twins with Cesium ion and Bentley's iModel.js

Sat, 13 Feb 2021 16:01:40 +0000

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

iTwin Services, Bentley Systems’ platform for building digital twins of infrastructure, now supports loading 3D Tiles from Cesium ion.

The Golden Gate Bridge, tiled into 3D Tiles with Cesium ion, visualized with iModel.js — iTwin’s open-source visualization component.

This makes iTwin the latest platform to integrate with ion, joining a [growing number of places](https://cesium.com/integrations/) where users can combine their own 3D datasets with ion’s global layers, including Cesium OSM Buildings and Cesium World Terrain.

Cesium World Terrain is already the default base layer that engineers rely on when creating Bentley’s ContextCapture digital twins. This latest integration enables massive 3D tilesets from ion to be streamed into iTwins, so engineers can use their preferred tools, backed by ion’s high-resolution geospatial context and 3D tiling capabilities.

You can also follow our tutorial to learn how to build your own digital twin by creating an interactive Cesium-based building project.

Original article: https://cesium.com/blog/2020/11/02/imodeljs-supports-cesium-ion-assets/

Author: Sarah Chow

Comment: Intel, the U.S. federal government… Cesium has been gradually transitioning from an open-source product to an enterprise-grade product.

Cesium Chinese community QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Cesium Partners with Intel Geospatial to Provide Enterprise Geospatial Solutions

Sat, 13 Feb 2021 16:00:55 +0000

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Cesium is pleased to announce a partnership with Intel Geospatial to provide professional 3D geospatial solutions for enterprise customers across industries.

Intel Geospatial deeply understands the value of AI-powered business insights derived from 3D geospatial data. Cesium is honored to partner with Intel Geospatial to provide best-in-class 3D geospatial technology to the Intel user community.

Intel Geospatial combines data management, visualization, analytics, and Cesium-powered 3D tiling to deliver solutions for use cases in the energy industry such as data transmission and distribution, asset management, and remote safety inspections. The platform is designed to extend the reach of geospatial insights beyond data scientists by creating solutions that are easy for anyone to use.

Identifying vegetation encroachment around power poles using LiDAR point clouds in the Intel Geospatial platform.

With the Intel Geospatial platform, customers can combine multiple datasets — including Cesium World Terrain — with all the flexibility and precision that Cesium provides.

Intel Geospatial builds custom enterprise solutions that allow customers to incorporate all their data into a single visualization scene alongside Cesium World Terrain.

Using Intel Geospatial’s AI algorithms for processing and classifying datasets, along with Cesium’s GPU-accelerated analysis tools for measurement and analysis, customers can analyze individual or combined datasets to gain the insights they need — whether for remote inspection of infrastructure, visual inspection for safety purposes, or managing power lines for better resilience.

Visit Intel Geospatial to learn more about how industry customers are leveraging geospatial technology to maximize the value of their 3D data.

Original article: https://cesium.com/blog/2020/10/27/intel-using-cesium-for-geovisual-solution/

Author: Patrick Cozzi

Comment: Cesium has been focused on enterprise-level solutions, which has led to slightly slower community feature development in 2020. After all, they need to generate revenue to sustain the business.

Cesium Chinese community QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Kabul Data Available for Government Users

Sat, 13 Feb 2021 15:59:13 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

We (Cesium) support U.S. federal government employees working from home during the pandemic by providing free access to high-resolution models from around the world through a partnership with Maxar’s Vricon.

Kabul, Afghanistan.

We have now added Kabul’s 3D surface model to nearly 30 areas of interest for U.S. federal government employees. These datasets have been tiled into 3D Tiles so they can be streamed at full resolution, allowing government workers to access them quickly no matter where they work.

If you have a valid .gov or .mil email address, follow this tutorial to access these datasets.

If you’re interested in learning more about how Cesium supports the U.S. federal government, let me know. I’d be happy to talk with you.

Original link: https://cesium.com/blog/2020/10/13/maxar-vricon-kabul-data-in-cesium-ion/

Author: Brady Moore

Comment: Cesium’s government and enterprise outreach is getting better and better.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Reality Capture Adds Built-in Support for Sharing 3D Models via Cesium ion

Sat, 13 Feb 2021 15:58:21 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

RealityCapture has joined the growing list of projects that directly support Cesium ion, alongside nearly a dozen platforms including Safe FME, Blender, and 3ds Max, which have all recently added Cesium ion integration (https://cesium.com/integrations/). With its curated global datasets, secure cloud hosting, and powerful 3D tiling pipelines, ion is the hub connecting data providers and developers with users.

The latest version of RealityCapture (https://www.capturingreality.com/realitycapture-supports-upload-to-cesium) includes integration with Cesium ion, allowing users to share their 3D models on the web with a single click.

It works by uploading the model to your Cesium ion account, where it is converted into 3D Tiles. This allows users to embed photogrammetry models for visualization on the web or on mobile devices, even if they contain millions of triangles, because higher levels of detail are streamed in as you navigate the scene.

Norwich Castle, generated by RealityCapture and visualized with Cesium. Data captured by Jasper Mink, Terradrone Europe.

We are thrilled about this integration because it creates an end-to-end workflow from drone photos to web-based visualization in a geospatial context. The fact that original detail is preserved makes it ideal for visualization, as users can email a link to all parties involved and be confident that the model they see is based on the highest fidelity of the captured data.

If you have RealityCapture files, this tutorial will guide you on how to try this feature with your own models.

Check out our integration guide to learn how to connect your tools with Cesium ion, providing your users with a simple way to share their large 3D models or LiDAR data, or display them in a geospatial context.

With Cesium, you can share photogrammetry models on the web without simplifying them: users can even see the signs on the doors of the Norwich Castle model!

Original link: https://cesium.com/blog/2020/09/18/realitycapture-and-cesium-ion/

Author: Omar Shehata

Comment: Various platforms are racing to add support for Cesium. 3D Tiles is a remarkable model format.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium 2020 Year in Review

Sat, 13 Feb 2021 15:53:23 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

While it had its share of challenges, 2020 was still an incredible year for Cesium, and we are grateful for the progress the team achieved together. Here are some highlights from the year:

– Established a Smart Construction digital twin partnership with market leader Komatsu Construction (https://cesium.com/blog/2020/03/10/smart-construction/).

Cesium CEO Patrick Cozzi speaking at the Las Vegas ConExpo construction equipment exposition in March.

– Announced a partnership with Epic Games to create Cesium for Unreal (https://cesium.com/blog/2020/06/04/cesium-for-unreal-engine/).

– Built Project Anywhere with Epic, Microsoft, and NVIDIA (https://cesium.com/blog/2020/11/30/project-anywhere/) to demonstrate cloud/GPU/simulation gaming capabilities.

– Partnered with the Smithsonian on the Open Access initiative (https://cesium.com/blog/2020/02/28/smithsonian/).

– Established a partnership with Intel Geospatial.

(https://cesium.com/blog/2020/10/27/intel-using-cesium-for-geovisual-solution/)

– Partnered with Bentley Systems for Cesium ion/iTwin integration.

(https://cesium.com/blog/2020/11/02/imodeljs-supports-cesium-ion-assets/)

– Delivered Cesium Stories, Cesium OSM Buildings, and CDB to 3D Tiles.

(https://cesium.com/blog/2020/11/25/cdb-to-3dtiles/)

Cesium OSM Buildings

– Won the PACT Tech Startup Enterprise Award, the Geospatial Startup of the Year Award from Geospatial Media & Communications, and the grand prize at the GEOINT Innovation Tradecraft Competition hosted by the United States Geospatial Intelligence Foundation (USGIF) and the Open Geospatial Consortium (OGC).

(https://cesium.com/blog/2020/08/04/usgif-tradecraft-competition-winners/)

Trophy displayed in the Cesium Demo room.

– Added 17 outstanding employees to the team while continuing to hire and fill open positions as fast as possible.

Wearing masks and maintaining social distance during a team field trip to the New Jersey Battleship.

– We introduced a new home for the Cesium developer community and celebrated a major CesiumJS milestone – 1 million downloads. (https://cesium.com/blog/2020/05/21/one-million-cesiumjs-downloads/)

– NORAD Tracks Santa, powered by Cesium, entertained over 20 million people worldwide for the 8th consecutive year. (https://cesium.com/blog/2020/12/10/cesium-santa-iss/)

Thank you to everyone who supported Cesium this year. Get ready for 2021! We look forward to working with you.

Cheers to 2021!

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium Wins 2020 PACT Tech Startup Enterprise Award

Sat, 13 Feb 2021 15:50:25 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium is the winner of the 2020 PACT Tech Startup Enterprise Award!

The award is presented annually by the Philadelphia Alliance for Capital and Technologies (PACT) to celebrate tech innovation in the Philadelphia region.

As a tech startup, Cesium was recognized for its innovative platform, leadership team, growth potential, and market success.

“A rich history of innovation, a robust technology ecosystem, and a large talent pool make Philadelphia the ideal place for Cesium,” said Cesium CEO Patrick Cozzi in his acceptance speech. “During a West Coast trip for fundraising, I was told that ambitious tech entrepreneurs should move to Silicon Valley. But we have a deep belief in Philadelphia, and we are very proud and grateful to be part of this community.”

This year’s event was held online due to the COVID-19 pandemic. We held a small socially-distanced gathering on the rooftop terrace with team members watching online from home.

Cesium is a proud supporter of PACT, which drives entrepreneurship by connecting growth-stage companies like ours with resources such as mentoring, funding, and talent. We want to thank the organization and award sponsor Troutman Pepper, and congratulate tech startup finalists ForMotiv and ZeroEyes.

Author: Andie Tursi

Original link: https://cesium.com/blog/2020/09/10/cesium-enterprise-award/

Comment: Congratulations to Cesium. Their office is in Philadelphia, not Silicon Valley.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Tracking World Commercial Airlines with Flightradar24's CesiumJS App

Sat, 05 Sep 2020 15:24:34 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Every day, over 100,000 commercial flights transport passengers around the world. At any given moment, you can see the real-time positions of nearly all these flights, not to mention a large number of cargo and private flights, thanks to Flightradar24, a premier flight tracking service.

Flightradar24 provides rich data for plane enthusiasts watching the skies overhead, news media tracking air traffic incidents, and everyday people tracking friends’ and family members’ flights.

Flightradar24’s 3D view is available in both browser and mobile apps and is built with CesiumJS. The application displays real-time flight positions collected from ground and satellite ADS-B transponders, radar, and more.

3D view in Flightradar24.

Aircraft are represented by 3D models, and viewers can navigate with a cockpit view or pan and zoom from outside the aircraft to observe the flight from any angle. When an aircraft is below 500 meters, it also casts a shadow on the terrain below, calculated based on the actual position of the sun at that time.

An aircraft casting a shadow on approach to an airport in the 3D view.

Users can click on a flight to view details such as flight number, speed, destination, altitude, arrival time, and data source. Viewers can see airports and other traffic, and even toggle flight routes.

In addition to the selected flight, users can also see nearby aircraft.

Flightradar24’s real-time data serves critical information to millions of users every month, and Cesium is specifically designed to support that scenario. To get started visualizing your own time-dynamic data with Cesium, follow our simple tutorial to create a drone flight in Cesium Stories.

Original link: https://cesium.com/blog/2020/08/13/flightradar24/

Author: Sarah Chow

Comment: CesiumJS applications are becoming increasingly widespread.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium and Kaarta Visualize Indoor and Underground Environments with High-Resolution LiDAR

Sat, 05 Sep 2020 15:21:33 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium makes it easier for first responders and military operators to quickly assess and understand dense and evolving urban environments.

Cesium supports visualization at any scale, from global down to sub-centimeter. We recently improved support for underground visualization, allowing exploration of underground environments to be seamlessly integrated with above-ground data.

Recently, we put these capabilities to the test in the Dense Urban Online Challenge, organized by the Department of Defense’s National Security Innovation Network (NSIN), aimed at addressing problems faced by first responders and military operators working in high-density cities with complex underground structures.

For this challenge, we partnered with Kaarta to demonstrate how Cesium can power numerous applications to solve these operational problems by bringing all data together and visualizing it, providing decision-makers with the information and insights they need.

A section of New York City’s East Side Access tunnel, captured by Kaarta.

At the hackathon, we demonstrated New York City tunnels collected by Kaarta’s mobile 3D scanners. These point clouds were captured with their handheld device, simply by walking through the tunnel, with laser precision within 3 centimeters. The generated point cloud was tiled and geolocated using Cesium ion.

The value here is that these precise 3D scans can be captured quickly and frequently, so you can have a map that’s always up to date, even for projects under active development, like the East Side Access transit tunnel in New York City. For first responders and military operators, up-to-date maps of these dense environments are critical for decision-making.

Since devices like these make near real-time high-resolution scanning possible, with Cesium you can combine these scans to see how all projects in any given area are developing simultaneously. By combining with other datasets, it’s easy to plan for potential conflicts – for example, by overlaying maps of the sewer system to ensure it doesn’t get too close. With Cesium’s measurement tools, these analyses are simple and comprehensive.

Top: Ground-level view of New York City with tunnel locations marked in red. Bottom: Interior view of the tunnel.

Out of 31 teams that participated in the NSIN Dense Urban Online Challenge, we were one of 5 teams selected for the in-person hackathon. We’re excited to provide a platform that enables others to solve these complex challenges. If you’re doing underground work, or if you’re interested in Cesium for defense, please contact brady@cesium.com.

Original link: https://cesium.com/blog/2020/08/25/national-security-hackathon/

Author: Brady Moore

Comment: Quite impressive.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium Chinese Website -- How to Develop a Map Download Tool [Part 1]

Mon, 27 Jul 2020 00:43:49 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

One of the topics from friends of the Cesium Chinese Website is: independently developing a map (tile) download tool.

This topic will be presented in multiple installments as blog posts [for all users] + videos [for paid users]. The source code will be continuously committed and updated. GitHub address: https://github.com/hujiulin/MapDownloader. The source code is open to all users. If you find it helpful, please give it a star for encouragement.

The mightiest sword has no edge; the greatest skill appears effortless.

The tool will ultimately be presented in C# and JavaScript. Programming languages are just the form – understanding the internal logic and workflow allows you to implement it in Java, Python, PHP, or any other language.

The currently open-sourced tool is very simple (bare-bones), but I will regularly update and maintain the code. If you have any questions, you can submit issues on GitHub, or leave messages and ask questions on the WeChat Official Account: Cesium Chinese Website; QQ Group: 807482793; Forum: http://cesium.coinidea.com/.

Prerequisites

Find a programming language you’re familiar with that supports:

File download over the network.
File I/O, reading and writing local folders and files.
Multithreading.
Desktop windows, preferably with a browser control.

Generally speaking, modern programming languages support most of the above features. This article uses C#. In the middle part of this series, JavaScript will be introduced.

Tile Map Server

This article uses Baidu Maps. Most tile map servers have x, y, z (level) parameters. The Baidu Maps URL pattern is: http://online{0}.map.bdimg.com/onlinelabel/?qt=tile&x={1}&y={2}&z={3}&styles=pl&udt=20200727&scaler=1&p=0

If we set x=1, y=1, z=3, and open the URL in a browser:

http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=1&y=1&z=3&styles=pl&udt=20200727&scaler=1&p=0

Sample tile

Tile Download

Now that we know the tile generation rules, we just need to specify the download URL to download the corresponding image. The core download code in C# is straightforward and can be easily found online:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


 private static WebClient wc = null;
 private static void initWebClientInstance()
 {
 if (null == wc)
 {
 wc = new System.Net.WebClient();
 }
 }
 private static void download(string url, string filename)
 {
 // Check filename exist or not
 if (File.Exists(filename))
 {
 return;
 }

 // Create directory
 string dir = Path.GetDirectoryName(filename);
 if (!Directory.Exists(dir))
 {
 Directory.CreateDirectory(dir);
 }

 initWebClientInstance();
 wc.DownloadFile(url, filename);
 }

Batch Tile Download

Next, we need to:

Generate download URLs in bulk.
Download each tile in a loop.

As mentioned earlier, the core concept of maps is a quadtree, so we can simply assume that the tile map is also composed of a quadtree, with approximately 18 levels (verifiable online). Thus:

level	minX~maxX	minY~maxY
1	1~1	1~1
2	1~2	1~2
3	1~4	1~4
…
n	1~2^(n-1)	1~2^(n-1)

Quadtree

The core batch download code is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 public static void downloadBatch(string urlPattern, string targetFoler, int level)
 {
 int maxX = (int)Math.Pow(2, level - 1);
 int maxY = (int)Math.Pow(2, level - 1);
 for (int x = 0; x <= maxX; x++)
 {
 for (int y = 0; y <= maxY; y++)
 {
 string url = String.Format(urlPattern, 1, x, y, level);
 string filename = Path.Combine(targetFoler, level.ToString(), x.ToString()) + "\\" + y.ToString() + ".png";
 download(url, filename);
 }
 }
 }

The above code will work for downloading, but there are many issues. These will be discussed in the next installment.

Current software interface

Download results

Next Steps

The current code only works for small zoom levels. At higher levels, the number of images to download becomes enormous. Multithreading, or even multiple machines, will be needed.
Many of the downloaded images are pure black, which suggests our generation rules need improvement.
The browser control and the software are not yet linked – you can’t select a region in real-time for downloading.
Later, image stitching may be needed.
When loading into specific platforms, coordinate system transformations may be required.
Automatic control of download intervals, dynamic IP switching.

These issues will be discussed in subsequent articles.

Disclaimer

Generally speaking, map servers require significant storage and bandwidth resources. This article discusses the internal principles of current download tools from an academic perspective only. Corrections are welcome.

Again: GitHub address: https://github.com/hujiulin/MapDownloader. The source code is open to all users. If you find it helpful, please give it a star for encouragement.

This article and the software are for academic exchange only. Commercial use is strictly prohibited.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Visualizing Switzerland's Geological Resources with Cesium's Underground Rendering

Tue, 14 Jul 2020 06:43:17 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Camptocamp has added underground visualization capabilities to swisstopo’s digital twin.

Free Public Access to Switzerland’s 3D Map

Based on 3D Tiles, the Swiss Federal Geoportal 3D Viewer provides free access to an interactive nationwide map, including terrain, bridges, buildings, and even trees – over 70 million objects.

Camptocamp has implemented these new features in swissgeol, swisstopo’s web-based 3D geological data viewer.

The swisstopo 3D portal is an interactive map of Switzerland, including both natural and built environments.

While this 3D map is impressive, it didn’t provide a complete picture of the country: groundwater, mineral layers, basements, parking garages, subways, and other underground parts of buildings were all missing.

Looking Underground

The Swiss Federal Office of Topography wanted to show not only what’s above ground in Switzerland, but also what’s below. Therefore, in collaboration with Camptocamp, we added support for underground visualization in CesiumJS 1.70.

Swissgeol brings together a wealth of underground datasets, including boreholes, seismic data, and bedrock maps. These data were previously separate and two-dimensional, but by combining them, swissgeol gives users a more complete view of the subsurface.

Underground boreholes in swissgeol, along with buildings, terrain, and imagery data on the surface.

All this data streams smoothly to the browser thanks to 3D Tiles and Cesium ion’s 3D pipelines. Camptocamp uses FME, geological 3D modeling packages, and Python to preprocess the data.

Users can adjust the transparency of each layer, including the surface imagery, and can also view cross-sections.

Cross-section data with transparent terrain and surface imagery in swissgeol.

Geological Data at Work

The viewer is freely available to the public and will serve many needs in the geological field. Geological engineers will be able to analyze potential projects such as transport tunnels and perform risk analysis for events like rock slides. Decision-makers will have better base data for education or for selecting suitable project sites.

For example, although approximately 75% of Switzerland’s energy currently comes from imported fossil fuels, their new energy policy “Energy Strategy 2050” aims to increase reliance on local shallow geothermal energy.

Geothermal datasets visualized in swissgeol.

Until now, creating a geothermal project proposal required gathering all the different datasets, such as geological maps, boreholes, cross-sections, 3D models, seismic data, and more. Each dataset had to be copied and stored separately, or database connections had to be established using GIS or 3D modeling software. Datasets could only be visualized in 2D or in model-based 3D. Swissgeol greatly simplifies this process by bringing all datasets together in a single portal that can be shared instantly.

Visualization of deep geothermal wells with complex fault patterns and seismic locations.

Future Outlook

Swissgeol is currently in beta. In the future, swisstopo and Camptocamp plan to add features including picking and styling, so that relevant attributes of the data can be queried, filtered, analyzed, and downloaded. Registered users who need additional functionality, including swisstopo’s own users, will also be able to access other features such as uploading/downloading user-generated data and creating closed user groups to share sensitive data with a limited number of users.

If you have underground data, you can visualize it alongside all your other 2D and 3D data by uploading it to Cesium ion.

Author: Sarah Chow

Original link: https://cesium.com/blog/2020/07/06/camptocamp-underground-visualization-with-cesium/

Comment: The underground visualization based on Cesium that everyone has been hoping for is becoming increasingly mature.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Visualizing Underground Utilities, Mines, and Geological Layers with Cesium

Sun, 21 Jun 2020 06:55:52 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

One key improvement introduced in this month’s CesiumJS 1.70 release is underground data visualization. This allows users to seamlessly transition from ground-level features across an entire city to underground features in the same scene, whether it’s utility data like water pipes and cables, or 3D structures like caves and mines.

Visualizing boreholes with different ground materials by depth. Data from the University of Minnesota Borehole Geophysical Database.

Fusing underground data with 3D terrain and other layers in CesiumJS means all relevant information can be visualized in one place without constantly switching between specialized tools. For example, you can visualize earthquakes over time and measure their distance to critical city infrastructure by adding Cesium OSM Buildings to the scene.

Observing earthquakes in the Sawtooth Mountains of central Idaho during April and May 2020. Each sphere contains metadata about the earthquake’s epicenter magnitude and depth, as well as error margins for these measurements.

You can control how underground data is visualized using the CesiumJS API. Below, photogrammetry of a tunnel is visualized. By keeping the ground mostly opaque, we can accurately see which parts are above ground (just the entrance) and how far the structure extends. We can also configure the camera to hide the ground when zoomed in at close range, allowing us to walk through the tunnel unobstructed.

Photogrammetry of old military tunnels at North Head, Auckland, New Zealand. Left: Keeping the ground mostly opaque to see which parts of the model are above ground. Right: Hiding the ground near the camera to allow users to walk inside the tunnel. Screenshots by b_nealie.

Try It Out

Upload your underground data to Cesium ion or check out the following example code to learn how to use underground features in your Cesium app.

Enable globe transparency (https://sandcastle.cesium.com/index.html?src=Globe Translucency.html)
Enable transparency only on a section of the ground (https://sandcastle.cesium.com/index.html?src=Globe Interior.html)
Customize the look of underground scenes (https://sandcastle.cesium.com/index.html?src=Underground Color.html)

If you have any questions or want to share your work, please visit let us know on the forum.

You can also visit Cesium Chinese Website: http://cesium.coinidea.com/

Author: Omar Shehata

Original link: https://cesium.com/blog/2020/06/16/visualizing-underground/

Comment: This is the last of the three major features in Cesium 1.70. A year or two ago, many people were asking how to make the globe transparent or what to do with underground models. Now there are solutions for these.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

CesiumJS Adds Official TypeScript Type Definitions

Sat, 13 Jun 2020 15:37:36 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

With the current 1.70 release, CesiumJS now ships with official TypeScript type definitions!

TypeScript definitions have been a long-requested feature. While the community has done work supporting various manual approaches, the most popular being @types/cesium, the sheer size and evolving nature of the Cesium codebase made manual maintenance an endless task. The official definition file Cesium.d.ts is over 42,000 lines and 1.9MB in size.

Even if you’re not a TypeScript user, this work has improved the correctness and completeness of the CesiumJS API reference documentation and enables better IntelliSense support in IDEs that can apply TypeScript definitions for type inference, making it a huge win for the entire CesiumJS community.

Updating CesiumJS to 1.70 will automatically leverage type checking in TypeScript applications. We use the types field in package.json, which requires no additional configuration in most cases. However, if you import individual Cesium source files directly, you’ll need to add “types”: [“cesium”] to your tsconfig.json to pick up the definitions. If you were previously using @types/cesium, you can remove it.

Official support from the CesiumJS team means the latest and correct definition file will ship with every release. It also means TypeScript support will be officially tracked as part of the CesiumJS GitHub repository. If you find a bug when using CesiumJS with TypeScript, please open an issue or better yet, a pull request to fix it. If you have questions about CesiumJS/TypeScript or need help debugging your project, please ask on the community forum.

If you’re using custom or @types/cesium definitions and aren’t ready to switch, you can delete Source/cesium.d.ts after installation. TypeScript tooling will then fall back to the next set of CesiumJS type definitions it finds.

The official type definition file, Cesium.d.ts, documents over 42,000 lines of declarations and documentation, weighing in at 1.9MB.

Deep Dive

While we’re excited to finally officially support TypeScript, it took some effort to get here. Initially, we explored 3 options:

Manually Maintaining the Definition File

We could manually manage and maintain our own TypeScript definition file as part of the CesiumJS codebase, most likely with a separate definition file for each JavaScript file, making it easier to manage – for example, Cartesian3.js would have a corresponding Cartesian3.d.ts. This would be technically easy to implement, but would cause significant harm in terms of file synchronization and maintainability.

Additionally, we didn’t want to include only declaration interfaces without inline documentation, so users could take full advantage of IntelliSense. This was our last resort, but if it turned out to be the only viable option, it would be our final choice.

Porting CesiumJS to TypeScript

You may be surprised to hear that we actually evaluated rewriting all of CesiumJS in TypeScript. For TypeScript developers, this would be a huge improvement, and for CesiumJS maintainers and the codebase, it would be a real win. Beyond strong type checking, it would allow us to quickly adopt modern conventions like template literals, arrow functions, and async/await, which we currently don’t allow in the CesiumJS codebase due to compatibility and tooling reasons.

Unfortunately, the level of effort and volume of work required made it an unattractive option in the short term. This option is still on the table, but like the large-scale ES6 migration we did last year, it would require significant careful planning, research, and infrastructure work to execute properly.

Generating Definition Files with the TypeScript Compiler

Starting with TypeScript 3.7, the compiler can compile JavaScript code with JSDoc annotations and generate corresponding type definition files for us. This approach completely eliminates the need for manual .d.ts file maintenance and has the additional benefit of validating and improving our own JSDoc annotations, since they need to be accurate to generate correct type definitions. Needless to say, this option was very attractive to us, and we decided to pursue it after some preliminary prototyping experiments showed it could work.

In practice, we spent several weeks working through this approach. Marco Hutter was heavily involved in documentation fixes and source code adjustments to make the compiler happy. Early work was promising. As expected, it exposed errors and inconsistencies in JSDoc annotations and, to a lesser extent, in the CesiumJS API that we fixed. Unfortunately, we soon hit a wall.

Relying on the TypeScript compiler meant we lacked options when it did something incorrect or unexpected. While the compiler uses JSDoc annotations in some cases, in many cases it relies on its own type inference and provides no way for us to override it. It also completely ignores much of the JSDoc, such as on object-defined properties, and exposes all private underscore variables as part of the definitions. This led us to bend the CesiumJS codebase in ways we were uncomfortable with, just to make the TypeScript compiler happy. We considered trying to modify the TypeScript compiler itself, but we would have had to dive deep into the compiler code, and we weren’t sure what the maintainers would accept or how long the process would take. Ultimately, our favorite solution became a drawn-out gamble, and we lost confidence in the approach.

Left: JSDoc for UrlTemplateImageryProvider that unexpectedly adds properties to BingMapsImageryProvider; Right: The generated BingMapsImageryProvider definition with duplicate definitions, causing compilation failure.

Back to the Drawing Board

As it turned out, we were so excited about TypeScript’s official JSDoc support that we completely overlooked a similar option: tsd-jsdoc. tsd-jsdoc is a JSDoc plugin that generates TypeScript definitions from JSDoc output. This makes it very similar to the TypeScript compiler approach, but provides much more flexibility over the generated type definitions.

tsd-jsdoc doesn’t directly parse JavaScript but instead relies on the abstract syntax tree (AST) generated by JSDoc. This means it’s not affected by type inference issues or lack of JSDoc completeness that nearly derailed the TypeScript compiler approach. If we can express a type using JSDoc annotations, then it appears in the type definition file as we want it.

We had already learned a lot from our earlier TypeScript compiler approach failures, so we were able to complete a feasibility evaluation quite quickly, and all the issues with our existing incorrect JSDoc still applied. Things progressed faster than we expected, and we knew we had found the solution.

As developers, sometimes we get so focused on a particular technology that we overlook other options. In this case, community member @bampakoa had even submitted pull requests to both CesiumJS and tsd-jsdoc last year to make them more compatible. We already knew tsd-jsdoc existed, but we had overlooked it in our initial evaluation because we assumed the TypeScript compiler option would be better, and we inadvertently developed a blind spot for tsd-jsdoc.

Post-Processing and Validation

While the tsd-jsdoc output is fairly high quality out of the box, we did some additional post-processing to further improve it. This includes simple string manipulation, regex find-and-replace, and even using the TypeScript compiler to rewrite parts of the file. All of this happens as part of the new build-ts gulp task. If you’re curious, you can check out the code. The final result is a single Cesium.d.ts that serves as the entry point for the generated Cesium.js module.

In addition to generating the output, the build-ts task also validates the file by compiling it with TypeScript. If a developer makes a mistake in JSDoc, such as misspelling a class name or referencing a private or non-existent type, the build process will fail. While this validation process is very useful, it only catches certain types of errors. For example, if someone implements a new ImageryProvider that doesn’t conform to the correct interface, the definition file will compile without errors, but TypeScript will emit a compilation error in applications that try to use the new class as an ImageryProvider.

We’re still exploring ideas for adding additional validation, such as writing some unit tests in TypeScript to identify potential problem areas during development.

JSDoc Errors

I’ve mentioned several times that a particularly exciting aspect of the JSDoc-based approach is that it adds another level of inspection and validation to our documentation, benefiting everyone, not just TypeScript developers. A major part of our documentation review process is now automated. The issues we found in the codebase can be categorized as follows:

Incorrect or incomplete types - In many cases, we used informal or incorrect names for types, for example, Image instead of HTMLImageElement, Canvas instead of HTMLCanvasElement. An interesting example is TypedArray, which doesn’t even exist at the specification level but is a common term for the full list of types like Int8Array, Float32Array, etc. We also had incomplete generics, such as Promise instead of Promise.
@exports - We used JSDoc’s @exports tag as a final fallback. If a developer couldn’t get something to show up in the generated HTML, they might add @exports, which would “just work.” We used @exports for enums, namespaces, and functions instead of the @enum, @namespace, and @function tags. This led to incorrect type generation. In practice, we don’t need @exports anywhere in the code.
Private type leaks - Many private types were referenced in the public API. These private types don’t exist in the HTML output and are just silent failures for our documentation build step. In most cases, it made sense to simply make the private types public. Thankfully, we also have a habit of documenting private types in CesiumJS, so we didn’t have to write new JSDoc.
Copy-paste errors - The last category of JSDoc errors was duplicate parameter entries related to copy-and-paste, such as having ImageryProvider A declare that it’s documenting properties on ImageryProvider B, etc.

Next Steps

Once the community starts using these definitions, we expect some minor issues to surface over the next few CesiumJS releases. We’ve also started developing a list of ideas we want to explore, such as leveraging generics for the property interfaces used by the Entity API. Ultimately, we rely on the community to tell us what matters most to developers so we can shape our CesiumJS TypeScript roadmap.

We also want to figure out a way to use the TypeScript definitions within the CesiumJS codebase itself. We believe VSCode has some mechanisms for this, but we haven’t explored them yet. If this proves feasible, it would be a major win and would enable another level of validation through plain JavaScript, not to mention making developing CesiumJS an even better experience than it already is.

I’m sure many people perked up when I mentioned that we evaluated rewriting CesiumJS in TypeScript. I’m absolutely in favor of this in the long run. As part of the evaluation process, I actually used the TypeScript compiler to build the existing JavaScript codebase and even ported some basic files (like Cartesian3.js) to TypeScript to understand how to do TS/JS hybrid development, rather than an “all-at-once” migration strategy. Much like ES6, porting the code is the easy part. Expect a GitHub issue soon that will break down everything that needs to happen to make a TypeScript version of CesiumJS a reality; but there are no commitments yet.

Acknowledgements

I just want to thank the community once again for helping generate ideas and discussions about TypeScript over the past few years. Special thanks to @thw0rted, who was the first external contributor to improve the initial TypeScript type definitions and provided a lot of great feedback in the original pull request. Finally, a huge thanks to my partner and co-maintainer Kevin Ring, who not only provided extensive expert knowledge and feedback but also dove into the work himself, ultimately making a series of improvements to the code.

Author: Matthew Amato

Original link: https://cesium.com/blog/2020/06/01/cesiumjs-tsd/

Comment: The introduction of TypeScript makes CesiumJS a more professional library and easier to maintain. Of course, the migration process is painful.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium 1.70 - Introducing Cesium OSM Buildings New Features

Sat, 13 Jun 2020 14:11:38 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

We are excited to announce Cesium OSM Buildings, a global 3D building layer covering the entire world, based on OpenStreetMap building data. This is the latest addition to Cesium’s global base layer suite, which includes global terrain maps, aerial imagery, and street maps already available on Cesium ion.

New York City, Seattle, Washington D.C., and the Burj Khalifa in Dubai shown in Cesium OSM Buildings.

Take a tour in Cesium Stories - Take a tour in Cesium Stories

Cesium OSM Buildings is a great foundation on which to overlay high-resolution data for urban environments and more immersive experiences. Crowd-sourced and regularly updated, this base layer data will serve endless use cases: from cities that need shareable 3D solutions for urban planning, tax assessment, or traffic management, to developers who want to visualize BIM models in the real world, to government agencies that need innovative tools for training and simulation.

Cesium OSM Buildings is included in every Cesium ion subscription starting today and is included by default in any newly created Cesium layer. You can also add it to your CesiumJS application with a few lines of code:

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.primitives.add(Cesium.createOsmBuildings());

Cesium OSM Buildings consists of over 350 million buildings. While the full dataset is hundreds of gigabytes in size, it can be efficiently streamed and visualized on the web through the magic of 3D Tiles. 3D Tiles is an open standard, so Cesium OSM Buildings can be used in any compatible viewer, not just open-source Cesium.

OpenStreetMap provides rich metadata in most cities, such as building names, addresses, and opening hours.

Cesium OSM Buildings sits solidly on Cesium World Terrain with clean edge outlines, and each building is individually selectable and stylable. In most cities, the rich metadata associated with each building, and even individual parts of buildings, can be used with dynamic styling. For example, we can highlight all commercial and residential buildings to see patterns across different neighborhoods in a city.

Highlighting all office and commercial buildings in green using Cesium Stories.

Cesium OSM Buildings is derived from the well-known community-driven mapping project OpenStreetMap. This means anyone can improve the dataset! If you’ve ever contributed, heartfelt thanks!

Please try out the data and let us know what you think. We look forward to your buildings!

Author: Kevin Ring Original link: https://cesium.com/blog/2020/06/01/cesium-osm-buildings/ Comment: Quite powerful, let’s get started. But it requires an internet connection.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Announcing Partnership with Epic Games to Create Cesium for Unreal Engine

Sun, 07 Jun 2020 05:27:05 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Nothing better demonstrates Cesium’s belief in combining geospatial and 3D computer graphics than the support of Epic Games and the Epic MegaGrants program to build Cesium for Unreal Engine.

This marks the first time a full-scale, high-precision 3D digital globe has been brought into a leading game engine, opening up a world of possibilities for Unreal users. Together, we will advance training and simulation, architecture, gaming, AR/VR, autonomous driving, and other industries by bringing 3D Tiles into the Unreal world to accurately visualize real-world locations captured by satellites and drones – using the same 3D geospatial knowledge that CesiumJS has employed for nearly a decade.

High-resolution photogrammetry 3D Tileset captured by drone at AGI headquarters, where Cesium was incubated.

“Our vision is to allow the simulation community to integrate Unreal Engine into their software architecture without having to change the way they work. Defining this 3D Tiles plugin with the Cesium team is a very exciting experience because it will allow the GeoInt community to streamline their pipelines. This activity is very much in line with our vision for big open worlds for all Unreal Engine users.” – Sebastien Loze, Simulation Industry Manager at Epic Games

When I started graphics programming in 1994, Epic, or Epic Megames as they were known then, was an inspiration. The graphics and gameplay of the DOS games they released were light years ahead of anything I had seen.

Today, Epic’s visual quality continues to inspire, especially with the announced Unreal Engine 5 approaching cinematic CG quality, with the Nanite virtualized micro-polygon pipeline and the Lumen dynamic global illumination engine. Combining Unreal’s strengths with Cesium’s advantages in global scale, precision, performance, and interoperability is a rare opportunity to advance 3D geospatial.

Our focus is on growing the 3D geospatial ecosystem using the 3D Tiles format: an OGC Community Standard for efficiently streaming massive heterogeneous real-world 3D datasets for visualization and analysis.

3D Tiles are widely used by government and commercial entities for global-scale terrain, city-wide photogrammetry, and massive point clouds from LiDAR. 3D Tiles support streaming of massive geometry and textures, as well as semantics computed by AI algorithms for runtime filtering, styling, and analysis. For example, point classification in point clouds can be used to filter foliage, or material properties on the sides of buildings in photogrammetry models can be used for communication networks, where RF propagation considers concrete or glass.

Cesium for Unreal will be open source and free on the Unreal Marketplace.

Cesium for Unreal will connect to the Cesium ion SaaS platform by default, providing ready-to-use 3D Tiles for terrain and 3D buildings, as well as first-class content pipelines for generating efficient 3D Tiles from source data such as terrain, imagery, and photogrammetry models. Cesium for Unreal will also be able to stream 3D Tiles with Cesium ion on internal private networks.

Stay tuned as we make progress. Feel free to reach out to discuss collaboration or share your Cesium for Unreal use cases.

Author: Patrick Cozzi Original link: https://cesium.com/blog/2020/06/04/cesium-for-unreal-engine/ Comment: Epic, Unreal Engine – gamers should all know about these. Cesium’s momentum is truly impressive.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Underground, TypeScript, and Global 3D Buildings Released in CesiumJS 1.70

Sun, 07 Jun 2020 04:40:14 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

On June 1, 2020, CesiumJS released version 1.70, bringing 3 major updates.

Cesium OSM Buildings

Cesium OSM Buildings is a global 3D building layer covering the entire world, built using OpenStreetMap data. It’s available as a 3D Tileset for all Cesium ion users and comes with rich feature data such as building names, addresses, opening hours, and more.

New York City, Seattle, Washington D.C., and the Burj Khalifa in Dubai shown in Cesium OSM Buildings.

Read more about this new global layer and how to use it in your applications.

Underground Support

Cesium now has better support for visualizing underground scenes, from large geological layers underground to mines, caves, and utilities. CesiumJS 1.70 adds the ability to make the globe translucent, enabling data visualization underground and allowing the camera to freely move below the surface.

Making the ground translucent to see underground objects. Explore this example in Sandcastle (https://sandcastle.cesium.com/index.html?src=Globe Translucency.html). This is a Parc lead mine in North Wales by Dr. Edward Allen Sherlock Hart.

These CesiumJS improvements are part of a collaboration with friends at Camptocamp. Their work supports the Swiss Federal Office of Topography (swisstopo), which is using Cesium to create an interactive 3D map of the country.

Camptocamp is using these new underground features in swissgeol, a 3D web-based geological data viewer. Its goal is to visualize many different datasets in a single scene, such as boreholes, seismic data, and the ability to view ground cross-sections. Camptocamp said about this new Cesium-based viewer:

The 3D underground viewer swissgeol will be the main entry point for swisstopo to access geological data in the future, and it could become an essential collaboration tool for the entire earth science community in Switzerland and surrounding areas.

Visualizing bedrock beneath the terrain in Camptocamp’s 3D underground viewer.

These live code examples show how to use the new globe transparency features:

How to enable globe transparency (https://sandcastle.cesium.com/index.html?src=Globe Translucency.html&label=New in 1.69)
Enable transparency only on a section of the ground (https://sandcastle.cesium.com/index.html?src=Globe Interior.html)
Customize what’s visible underground (https://sandcastle.cesium.com/index.html?src=Underground Color.html&label=New in 1.69)

TypeScript

Finally, in version 1.70, CesiumJS now ships with official TypeScript type definitions! The latest and correct definition file will be released with each new version, and TypeScript support will be officially tracked as part of the CesiumJS GitHub repository.

Even if you’re not a TypeScript user, the nature of this work has improved the correctness and completeness of the CesiumJS API reference documentation, making it a big win for the entire CesiumJS community.

Read more about how this works and the effort involved in Matt’s deep architectural dive.

Try CesiumJS 1.70

Update to the latest CesiumJS and let us know what you think! You can post any feedback and questions about this release in this forum thread | Cesium Chinese Community: http://cesium.coinidea.com/.

Download link:

Author: Omar Shehata

Original link: https://cesium.com/blog/2020/06/01/cesium-june-release/

Comment: TypeScript makes the framework more robust and professional. Cesium OSM is indeed great, but it requires Cesium ion, showing Cesium’s determination to promote Cesium ion.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

CesiumJS Downloads Surpass 1 Million

Sun, 07 Jun 2020 02:55:12 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

CesiumJS total downloads have surpassed 1 million. This milestone means a lot to us (Cesium) and the CesiumJS community.

Since CesiumJS was released as an open-source project in April 2012, it has been downloaded over 1 million times.

1 Million Downloads Is the Result of 200+ Contributors Working Together

Since Cesium was released as an open-source project in April 2012, over 200 developers have contributed to the project. We appreciate everything the community has done, from features to bug fixes to documentation. Want to join the contributor community? Try one of the “beginner” issues.

Cesium contributors. The average number of commits among the top 10 contributors is 1,618, shown in larger size.

1 Million Downloads Means Thousands of 3D Geospatial Applications

The CesiumJS developer community has built thousands of applications with CesiumJS across dozens of industries, from drones to history to extreme sports. They’ve visualized commercial real estate spaces, major hurricanes, yacht races, and Mars rover expeditions.

1 Million Downloads Means Millions of Lines of Code

CesiumJS is one of the most comprehensive JavaScript libraries, providing an interactive 3D digital globe, star map, terrain, imagery, dynamic lighting, and an interactive timeline. Since CesiumJS development began, we’ve released updates and improvements every month, cumulatively adding over 9 million lines of code and removing over 7 million as we continue to improve the efficiency of streaming massive data online.

Mount Everest in Cesium, 2013

Mount Everest in Cesium, 2020

1 Million Downloads Is Just the Beginning

Cesium originated from the work of a few engineers at Analytical Graphics, Inc. Last year, we incorporated as our own company and spun off with an open-core business model, ensuring the long-term sustainability of CesiumJS.

Cesium developers, 2013. From left to right: Hannah Pinkos, Dan Bagnell, Patrick Cozzi, Matt Amato, and Scott Hunter.

Working on Cesium in February 2014. When a power outage at the office threatened development velocity, the team headed to Kevin Ring’s basement to work on Cesium using generator power. Around the table, from left to right: Greg Beatty, Scott Hunter, The Captain, Patrick Cozzi, Richard Page, Matt Amato**

Cesium Team, 2020… and growing

We couldn’t have done it without you. Thank you for using and sharing CesiumJS, for participating in our forum, for sharing your work with us, and for the incredible applications you’ve built. We look forward to many more!

Cesium keeps getting better

Author: Sarah Chow Original link: https://cesium.com/blog/2020/05/21/one-million-cesiumjs-downloads/ Comment: Cesium keeps getting better. A rising star.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium Official English Forum

Sun, 17 May 2020 13:48:11 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium has just completed migrating their Google Groups forum to Discourse, a modern open-source platform for online communities. This is the biggest update to the Cesium community forum since its inception. The forum brings together nearly a decade of GIS-related wisdom, from basic troubleshooting to discussions about the best ways to visualize the world, with over 30,000 posts.

Most people come to the Cesium community with real-world data they want to understand. Often this is their first foray into 3D mapping. Like many others, they learn through searching the forum why precision matters in many applications, or what happens when the curvature of the earth is not taken into account.

If you’ve ever asked a question on the Cesium forum, I want to thank you for contributing to this unique archive of computer graphics and geospatial knowledge!

The homepage of the new Cesium official English forum with new discussion categories.

Cesium has adopted Discourse to make discovering and sharing knowledge about Cesium and 3D geospatial easier. Using Discourse brings better search and formatting tools, better layout especially on mobile devices, faster page loading, and many new features.

Everything about the new forum is customizable, so we hope it will evolve alongside our growing community. For example, we just enabled embedding Cesium Stories directly in forum posts:

You can now embed Cesium Stories directly in forum posts! Above is a virtual tour of Denver created for the American Association of Geographers conference.

Browse the forum and let us know what you think about the forum. If you’ve previously posted on the old forum, see these instructions for how to reclaim your account on the new forum.

The new forum not only makes it easier for users to find the answers they need, but is a collaborative space where users can share their work with the broader Cesium ecosystem. See you there!

Visit: community.cesium.com

Author: Omar Shehata

Original link: https://cesium.com/blog/2020/05/04/new-community-forum/

Comment: This is the official English forum for Cesium. You can search for answers and ask questions there.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

i-Urban Renovation Visualizes Building Status in Munakata, Tottori Prefecture Using 3D Tiles

Thu, 23 Apr 2020 08:00:16 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Munakata City in Japan’s Tottori Prefecture uses the i-Urban Renovation application built on Cesium to help residents access building data online.

Munakata City, Japan

Local governments across Japan collect data about buildings, including their use, number of floors, construction materials, and year of construction. Munakata City, located in the northern part of Fukuoka Prefecture, tasked their Urban Structure Visualization Promotion Organization to make this data available to the public in an easy-to-understand format.

Distribution of buildings in Munakata City. Building counts are aggregated into an area grid (1km grid) and displayed as a 3D mesh chart using mesh codes shown in Cesium. Since the grid is linked to location information and building counts, it’s a convenient demonstration tool when explaining local characteristics to residents.

The i-Urban Renovation app is built on CesiumJS for visualizing and sharing data. Even though Munakata City covers approximately 120 square kilometers filled with various buildings, the app efficiently streams building data using 3D Tiles.

Classifying buildings by use and comparing land use requirements. Users can also achieve similar functionality using Cesium Stories, which supports 3D Tiles styling.

Using the Cesium app, users can see the current status of any building. Buildings can be color-coded based on various metrics, including:

Use, such as residential, commercial, government, agricultural, etc.
Number of floors, making it easy to distinguish the distribution of high-rise and low-rise buildings.
Construction materials, such as wood or reinforced concrete.
Year of construction, showing the distribution of new and old buildings.

Additionally, users can examine the relationship between building use and land use regulations by combining the building dataset with the land use zoning dataset. When a user clicks on a building, detailed building attributes are displayed.

Viewing building usage. Click on individual buildings to see detailed data. We recently added feature picking to Cesium Stories to build your own solutions using Cesium Stories.

Visit i-Urban Renovation or the data encoding specification, or upload your own data to Cesium ion to easily generate your own Cesium Stream 3D Tiles.

Author: Sarah Chow

Original link: https://cesium.com/blog/2020/03/31/i-urban-renovation-visualizes-munakata/

Comment: Although this is still encouraging everyone to use Cesium ion, we can see that Cesium performs well in large-scale scenarios.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Bringing 3D Tiles and Bing Imagery from Cesium ion to osgEarth

Sun, 19 Apr 2020 14:44:51 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Pelican Mapping is excited to announce support for loading 3D Tiles and Bing imagery from Cesium ion into their osgEarth digital earth rendering toolkit.

Adding 3D Tiles Support

osgEarth rendering data from Cesium ion for Melbourne, Australia

Over the past year, we’ve been developing support for 3D Tiles in osgEarth, and it has proven to be an exciting and efficient runtime format. We first developed a glTF reader/writer for OpenSceneGraph based on TinyGLTF. Building on top of that, we built a 3D Tiles Layer plugin for osgEarth to handle streaming tiles. osgEarth uses the same screen space error metric that Cesium uses to decide when to load and display tiles, so the 3D Tiles layer should look the same in osgEarth as it does in Cesium. After developing the 3D Tiles loader, we were able to quickly add support for Cesium ion by adding authorization-based ion tokens to the 3D Tiles layer.

Bing Maps

osgEarth rendering Bing imagery with labels via Cesium ion

We also added support for Bing Maps from Cesium ion to osgEarth. osgEarth already had a Bing imagery driver, so we used Cesium ion’s API to get the Bing key and map style, and then created an osgEarth Bing imagery layer on top of the driver, with credentials provided by Cesium ion. We hope to add support for more external imagery types in the future.

Putting It All Together

Here is an example Earth file showing how to load content from Cesium ion into osgEarth.

<map name="Cesium ion">
<CesiumIonImage name="Bing Maps Aerial With Labels">
<asset_id>3</asset_id>
</CesiumIonImage>
<CesiumIon3DTiles name="Melbourne">
<asset_id>69380</asset_id>
</CesiumIon3DTiles>
</map>

You can set the Cesium ion token as an environment variable, then load the earth file using any osgEarth-based application.

export OSGEARTH_CESIUMION_KEY=YOUR_API_KEY
osgearth_viewer cesiumion.earth

Author: Jason Beverage

Original link: https://cesium.com/blog/2020/04/02/osgearth-supports-cesium-ion-assets/

Comment: osgEarth announces support for Cesium ion.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Creating 3D Tiles from KML/COLLADA with Per-Building Data

Fri, 10 Apr 2020 07:13:20 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Many Cesium users frequently need to visualize hundreds of thousands of 3D buildings across entire cities for real estate, urban planning, or civil engineering projects. To make it easier to create useful digital twins for these industries, we just added support for embedding feature data when uploading KML/COLLADA to Cesium ion.

This means you can now export your 3D buildings from modeling tools (such as CityEngine, Rhino, and 3DCityDB) and include per-building attributes when sharing data on the Cesium ion web.

Philadelphia 3D buildings combined with Cesium World Terrain. Each building can be clicked to display its name, address, and parcel number.

Cesium ion converts your buildings into 3D Tiles to optimize them for the web, while still allowing you to inspect each individual building. The source 3D data for the above example comes from Pennsylvania Spatial Data Access, with addresses, names, parcel numbers, and city-owned attributes from Open Data Philly.

To dive deeper into this visualization, we can use 3D Tiles Styling to highlight all properties owned by the City of Philadelphia and click on them to get their parcel numbers. The parcel number can then be used to look up more information about each building from the city database.

You can use 3D Tiles Styling to highlight all city-owned buildings in Philadelphia, such as museums and historic sites.

To create such a scene for a city, the source data should be one or more KML files that define the location of each 3D model. Here is a snippet from the KML file for Philadelphia buildings.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<Placemark>
 <name>Independence Hall</name>
 <Model>
 <Link><href>building.dae</href></Link>
 <!-- Model properties like longitude, latitude, etc... -->
 </Model>
 <ExtendedData>
 <Data name="Address">
 <value>500-36 CHESTNUT ST</value>
 </Data>
 <Data name="Parcel_ID">
 <value>313762</value>
 </Data>
 <Data name="Is_City_Owned">
 <value>True</value>
 </Data>
 </ExtendedData>
</Placemark>

The Placemark name is used as the building name. Any additional data can be added to the tag.

Once you upload your buildings to Cesium ion, you can style and inspect them with Cesium Stories. You can also combine them with other types of content such as CityGML or point clouds, which can also have embedded feature data.

Try creating a Cesium ion account and uploading your 3D buildings.

Author: Omar Shehata

Original link: https://cesium.com/blog/2020/04/09/kml-collada-metadata/

Comment: Cesium is relentlessly promoting Cesium ion and Cesium Stories. You might want to check them out, though personally I’m not a big advocate of online solutions since most people prefer offline setups. Data security is also increasingly important.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Using Cesium Tools for Better Construction Management

Thu, 02 Apr 2020 08:41:50 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium technology is revolutionizing the construction industry. The Smart Construction dashboard we developed in partnership with Komatsu enables us to visualize, measure, and analyze construction site progress faster than ever before. Here’s how it works.

Aggregating Different Datasets to Assess Progress

To keep track, site managers must constantly compare the plans provided in CAD designs with what’s actually happening on site, which is captured by data from traditional surveys, drone surveys, and smart construction vehicles (including as-built data and vehicle telemetry).

The Cesium Tools application combines design models with time-stamped real-world data for measurement and progress tracking. Cesium takes these data sources as input, fuses them together to create an up-to-date 3D representation of the work site, and processes them into 3D Tiles so they can be easily shared and streamed.

A DSM and orthoimagery converted into 3D Tiles, overlaid with vector data from line files created in CAD software packages.

Collecting Data

Building the smart construction application requires us to be ready to receive various data types, collected in different ways and at different levels of completeness.

Traditional Surveys

The traditional method of surveying a site uses a probe vehicle to take GPS measurements at a grid of positions across the work site. Collecting data this way takes a day or more, and the collected data is relatively sparse. This data can be compiled into 3D meshes in LandXML, DXF, or other triangle mesh formats.

Drone Surveys

Surveys can also be conducted by drones or UAVs. About once a week, for up to a day at a time, a drone flies over the site taking photos at multiple locations across the work site. Photogrammetry software converts these photos into an overall 3D model of the terrain. Common outputs include point clouds, DTM/DSM terrain data, and orthoimagery.

A point cloud of a construction site in Osaka, Japan, collected by drone, converted into a mesh, and tiled into 3D Tiles by Cesium ion.

Drone surveys are much faster than traditional surveys. For a company in the UK, adopting drone-based data collection combined with Cesium’s 3D tiling capabilities reduced the time from collection to visualization from 3 days to 30 minutes. The measurement results from each method had less than 2% error.

Smart Construction Vehicles

One of the latest trends in construction is machine tracking, either by embedding GPS sensors in construction equipment or attaching aftermarket sensors to them. These sensors track each machine as it moves around the site, providing “as-built” partial terrain data that, when merged with the existing ground, can provide a near real-time picture of the site terrain, typically collected on an hourly basis.

The yellow areas show recent “as-built” data collected from sensor-equipped construction machines, merged with an earlier drone survey of the entire site. Cesium lets you combine and visualize different surfaces at any point in time.

Beyond Visualization

While being able to see what’s happening is valuable, the real value of the Cesium Tools application lies in its analytics capabilities.

A cut-and-fill analysis highlighted with a heatmap, showing how much earthwork needs to be moved and how much has already been moved.

For example, if a project manager needs to send results to a client for billing, they can understand the total percentage of earthwork that has been moved, as well as areas that still need work. Determining the amount of material remaining in inventory is as simple as clicking to create a measurement: the program calculates the volume, weight, and value of the material.

Measuring inventory.

Project managers can also preview routes before traveling by clicking a path and inspecting the slope (as a heatmap or a profile using the 2D cross-section tool).

Terrain slope heatmap.

This is just an overview of the many capabilities powered by Cesium in the Smart Construction app. Visit our construction industry page to watch the video and learn more.

Original link: https://cesium.com/blog/2020/03/30/construction-with-cesium/

Author: Gabby Getz

Comment: The tools and capabilities provided by the Cesium team are increasingly powerful and impressive.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Inspecting Features in 3D Tilesets with Cesium Stories

Fri, 27 Mar 2020 14:50:31 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

We created 3D Tiles to stream, visualize, and analyze massive 3D content, such as entire cities or complex building models. With the latest update to Cesium Stories, we can now inspect feature data in 3D Tiles by clicking.

Now you can click on any 3D Tiles feature in Cesium Stories, such as the New York City tileset, to inspect its data.

Suppose you want to learn about the distribution of medical facilities in New York City. You can use using styling to highlight all buildings in the 3D Tileset, then click to view facility capacity, whether there are emergencies, and their official websites and contact numbers.

You can also share your Cesium Story so other users can inspect it in the same way, whether they are doing a thorough analysis in the office or out in the field. On mobile devices, the info box can be collapsed or expanded to easily switch between the full 3D scene view and feature data.

Cesium Stories works in any modern web browser. On mobile devices, you can collapse or expand the info box to easily switch between the full 3D scene view and feature data.

Feature picking in Cesium Stories works on any 3D Tileset with feature data and is not limited by the physical size of features, making it ideal for industries like BIM/CAD where you need to inspect everything from large pipes down to the smallest valves or screws.

Feature picking in Cesium Stories works on any 3D Tileset with feature data, such as pipes and valves in a power plant BIM model.

Feature picking also works with vector data, such as GeoJSON, KML, and CZML. Vector layers provide a simple way to add or update feature data, even if the 3D Tileset itself doesn’t contain any defined features.

In the example below, we took a Vricon photogrammetry tileset of Washington, D.C. from the Cesium Ion Asset repository that has no feature data, and combined it with building energy usage CZML from the Washington, D.C. Open Data platform.

Combining energy usage CZML with Washington, D.C. photogrammetry allows us to click on any building to view its energy score. The CZML is customizable and can include building images.

Users can click on any building to view its name, annual energy consumption, and Energy Star score. KML and CZML support HTML descriptions, so you can add images, links, or customize the styling.

We’re excited to see what you’ll build with it. Learn how to use picking and styling in the Cesium Stories styling tutorial.

Original link: https://cesium.com/blog/2020/03/25/explore-data-with-picking/

Author: Omar Shehata

Comment: Cesium Stories is powerful and well worth trying.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Visualizing Time-Series Data with Cesium Stories

Mon, 23 Mar 2020 09:07:26 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Cesium can be used to visualize data that changes over time, whether it’s geological changes spanning hundreds of years or satellite orbits that need to be tracked down to fractions of a second. As part of the official launch of Cesium Stories, we are pleased to announce improved support for time-dynamic data, so you can drag and drop dynamic KML or CZML to create interactive stories that visualize changing data.

This is a great way to review collected drone flight and telemetry data over time, as you can see the drone’s path – across the entire world.

With Cesium Stories, we can review drone flight data alongside the surrounding landscape and view collected time-series telemetry data.

Alternatively, if you perform offline analysis in tools like STK, you can export your work as CZML and easily share it with a link.

Satellite coverage calculated by STK (System Tool Kit) and exported to Cesium Stories as a CZML file.

Time-dynamic data doesn’t have to be objects moving over time. Our users have also plotted housing prices, disease outbreaks, and changing terrain maps.

Cesium Stories also supports dynamic KML files. This image shows the annual ice surface melt in Greenland from 1979 to 2007. Data from the National Snow and Ice Data Center.

Cesium Stories makes it easy to view and share your time-dynamic data, giving you control over playback speed and camera movement. Try it out with our new time-dynamic data tutorial. Or see what else you can do with Stories.

Original link: https://cesium.com/blog/2020/03/04/time-dynamic-stories/

Author: Omar Shehata

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Learning 3D Tiles with 3D Tiles Overview

Sat, 21 Mar 2020 07:38:56 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

3D Tiles was created to stream massive 3D datasets over the web. As an open specification, it is intended to serve as the de facto standard for visualizing and analyzing large 3D data across many different runtime engines. Today, many engines, including CesiumJS, AGI’s STK, and Uber’s loaders.gl, support 3D Tiles for streaming massive 3D geospatial datasets.

We are excited to announce the release of 3D Tiles Overview, an easy-to-follow guide for learning the main concepts of 3D Tiles, designed to help integrate 3D Tiles support into runtime engines for visualizing and analyzing large heterogeneous 3D geospatial content.

The cover page of the 3D Tiles Overview highlights all the concepts covered.

This guide complements the detailed and comprehensive 3D Tiles specification with concise coverage of key concepts to help developers get started with 3D Tiles quickly.

We are thrilled to have collaborated with Marco Hutter, a long-time contributor to glTF and the creator of the glTF reference card that inspired this work.

We would love to learn how the 3D Tiles Overview helps developers work with 3D Tiles and whether there are any suggestions for improvement. If you’re looking for a place to learn 3D Tiles, head to Cesium ion to curate your own 3D Tilesets, or upload your own data for tiling, hosting, and streaming as 3D Tiles.

Author: Shehzan Mohammed

Original link: https://cesium.com/blog/2020/03/12/3d-tiles-overview/

Note: 3D Tiles Overview is an introductory guide to 3D Tiles produced by the official Cesium team and is highly recommended for learning.

GitHub link: 3D Tiles Overview

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Using EdgyGeo Cesium Tools to Query and Download Datasets

Thu, 19 Mar 2020 02:31:00 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

EdgyGeo, Inc. has done some fantastic work supporting the Architecture, Engineering, and Construction (AEC) industry. This time let’s take a look at their download tool, which allows architects, engineers, developers, and urban planners to quickly obtain massive datasets for specified areas.

3D buildings and routes in a single scene. Dataset from Los Angeles.

With the Cesium-based viewer, EdgyGeo allows users to explore entire cities. The highlight of their data is high-resolution CyberCity 3D buildings, automatically generated through photogrammetric modeling. Their high-resolution building library covers nearly 100 cities in the United States and dozens of other major cities worldwide, with extruded buildings available for additional locations.

But EdgyGeo offers more than just buildings. They have datasets from state and local governments (especially cities), utilities, airports, commercial real estate companies, downtown development associations, and third-party entities. These datasets include terrain, environmental data, FEMA flood data, and other GIS data. Subscribers can also add their own data assets and build data inventories.

EdgyGeo collects and curates this data. Using Cesium’s 3D tiling pipeline, they stitch these datasets into 3D Tiles and fuse them in Cesium ion, so no matter how large the collected data is, it can be efficiently streamed and easily explored on a map with 3D terrain and imagery.

Cesium’s 3D tiling pipeline allows EdgyGeo to share large datasets online simultaneously.

Not only are the scenes easy to browse, but users can also download data for their own projects. Users simply select a portion of the scene and download the data in that area. They can download multiple GIS datasets at once, including CyberCity 3D building models, 3D terrain, aerial imagery, centerlines, curbs, and more – all precisely geolocated.

It’s easy to find and select relevant datasets for a specific area, such as Cambridge, MA.

Downloads are available in Collada (DAE) and KML/KMZ formats, and users can upload them to their own Cesium ion accounts or visualize them in other applications such as Rhino, SketchUp, and Revit at any time. KML format will also soon become available.

3D geometry exported from EdgyGeo visualized in SketchUp.

With this customizable download option, subscribers can obtain the local datasets needed for specific projects, linking GIS, AEC, BIM, and construction tools in a simple data download and transfer process.

You can try the tool by contacting EdgyGeo CEO Kevin DeVito.

Author: Sarah Chow

Original link: https://cesium.com/blog/2020/03/03/edgygeo-3d-tiles-download/

Comment: Cesium ion appears to be the officially recommended data storage and management tool from Cesium. Looking at future developments, we recommend using the download tool described in this article along with Cesium ion.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Exploring the Impact of COVID-19 on Global Flights

Mon, 16 Mar 2020 15:27:10 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

With travel restrictions from Europe to the United States taking effect today, and with increasing encouragement for people to stay home to slow the spread of the coronavirus, we were curious how these measures are affecting global travel. Naturally, we used Cesium to explore.

We began collecting flight data every other day over the past few months. Here are all the flights in and out of Beijing’s main international airport:

[The number of scheduled flights at Beijing Capital International Airport (PEK) visualized over time. Departures are shown in red, arrivals in green.]

At the end of January, the number of flights dropped sharply, from about 900 flights rapidly down to fewer than 300. This coincided with the World Health Organization (WHO) declaring a global health emergency and the United States and other countries restricting travel from China.

Following China, Italy was severely affected by the coronavirus. The first reported case occurred on February 22, cases surged rapidly, and the Italian government implemented a quarantine on March 8. We can see flight traffic declining there, though not as rapidly:

[Flights in and out of Rome’s Leonardo da Vinci-Fiumicino Airport (FCO) in Italy.]

As of the time of writing, flights in London had not been subject to any official restrictions, but scheduled flights for the remainder of March still showed a significant decline. We marked all US flights in red.

[Flights in and out of London Heathrow Airport.]

Finally, here is JFK Airport in New York City, one of the largest air traffic hubs in the United States. So far, there didn’t appear to be any significant changes:

[Flights in and out of New York’s John F. Kennedy International Airport.]

How We Created These Visualizations

Flight data was obtained from AeroDataBox. Their API takes an airport code parameter and returns all flights in and out of that airport within a given time period.

Once we had these scheduled routes, we used open data from OpenFlights to get the location of each airport.

Finally, we created a CZML that draws a line for each route with a timestamp, and visualized the routes over time using Cesium Stories.

If readers want to create something similar, we recommend starting with the Cesium Stories time-dynamic data tutorial.

Original author: Omar Shehata

Link: https://cesium.com/blog/2020/03/13/covid-19-flight-impact/

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Recent Cesium Updates and Domestic Source Code Download Links

Mon, 09 Dec 2019 01:31:00 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

It has been a while since I last updated the official account and knowledge community. Over the past three months, I made many life-changing decisions. I had already joined a state-owned enterprise, fully engaged in smart city engine development. Then, by a twist of fate, I ended up joining Microsoft (Asia) Internet Engineering Academy (STCA) to work on big data R&D. Life is unpredictable. There are no right or wrong choices, only choices. If anyone has questions about job hunting, resumes, interviews, or recruitment in technical positions, feel free to reach out to me.

But rest assured, I will continue to follow data visualization and Cesium. Currently, I am very optimistic about the Cesium project, as well as IoT and smart cities.

In the coming period, I will strive to update the official account weekly and the knowledge community monthly. I will try to keep the content concise and informative, and I hope it will be helpful to everyone. If you have any suggestions or feedback for the Cesium Chinese Website, feel free to leave me a message.

Recent Cesium Updates:

Cesium continues to maintain its monthly release schedule at the beginning of each month, but there was apparently a mistake in November 2019 that resulted in two releases that month. As of now (December 9, 2019), Cesium has been updated to Cesium-1.64. Here is the update list:

1.64 – 2019-12-02: Cesium-1.64.zip introduces a large number of internal optimizations.

1.63.1 – 2019-11-06: Cesium-1.63.1.zip fixes an issue in 1.63 where the globe surface and labels rendered incorrectly when window.devicePixelRatio was set to greater than 1.0.

Fixes an issue in 1.63 where some primitives would show through the globe when log depth was disabled.

1.63 – 2019-11-01: Cesium-1.63.zip Cesium migrates to ES6 modules. This may affect your Cesium application depending on how you use Cesium.

All website content from cesiumjs.org and cesium.com has been consolidated into cesium.com.

Added UTF-8 support for labels, greatly improving support for non-Latin characters and emojis.

10x compression of the Web Workers bundle size, from 8384KB (2624KB compressed) to 863KB (225KB compressed). This improves Cesium loading speed, especially on low-performance devices and high-latency networks.

Domestic Source Code Download Links (200KB/S)

Given that download speeds for Released versions on GitHub are very unstable (even though GitHub has been acquired by Microsoft), the Cesium Chinese Website provides mirror download links for recent Cesium versions. However, due to server and bandwidth costs, we cannot guarantee that all historical versions will be available for download, nor can we guarantee great download speeds. Actual tests show 100~200KB/S.

Download Link:

http://cesium.coinidea.com/site/download.html

Cesium Chinese Website QQ Group: 807482793 Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

[Part 1] Sharpen Your Cesium Tools - Visual Studio Code

Tue, 22 Oct 2019 15:01:55 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

IDE

Web front-end beginners often want to choose a fast, easy-to-use, and popular (I’m not sure why it needs to be popular exactly – perhaps engineers want to stay on the mainstream path in their technical journey?) IDE (Integrated Development Environment). Is an IDE important? It is both important and not important. It’s not important because: it’s just a tool, and we should focus more on requirements, logic, algorithms, and knowledge. It’s important because: it is a tool, and as the old saying goes, “A craftsman must first sharpen his tools to do his work well” – choosing the right tool often yields twice the result with half the effort.

The CesiumJS official team does not specifically recommend an IDE, but in the introductory tutorial Cesium Getting Started 2 - Setting Up the Cesium Environment and Your First Sample Program, there is this passage:

If you're already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you're just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

As we can see, the Cesium team primarily uses the open-source Eclipse or recommends Notepad++.

Based on the author’s own experience, here is a brief list of IDEs I have used:

Notepad (built-in on Windows) or TextEdit (built-in on Mac)

Price: Free

Download: Built into the system

Startup speed: Extremely fast

Operating system: Windows/Mac

Notepad is the basic text editor. Every engineer’s (Note: from now on, the author will refer to programmers as engineers – respect yourself to earn respect) ultimate dream is to code with a plain text editor, which is cool but very difficult. You can use Notepad to read simple HTML, JavaScript, or CSS files, but it is not recommended for development at all.

If you have systematically studied computer science, you are certainly familiar with compiling, linking, building, testing, etc. (although front-end development rarely involves compiling and linking). A good IDE must provide excellent project organization. Notepad cannot do this.
Notepad++ (For Windows only)

Price: Free

Download: https://notepad-plus-plus.org/downloads/

Startup speed: Extremely fast

Operating system: Windows

An excellent ultra-lightweight editor. In addition to reading and writing HTML, JavaScript, or CSS, it supports opening folders, which provides some level of project organization. It has a large number of plugins available. Currently, as far as the author knows, it only supports the Windows environment.
Sublime Text (For Windows and Mac)

Price: Paid, closed-source

Download: www.sublimetext.com/ (Official) | http://www.sublimetext.cn/ (Chinese Community)

Startup speed: Fast

Operating system: Windows/Mac

An excellent lightweight editor. It covers almost all the features of Notepad++, while supporting both Windows and Mac. It has a massive plugin ecosystem.

New features include: GOTO ANYTHING, GOTO DEFINITION, multiple selection, command palette, customization, split editing, instant project switching, and more. Of course, you can also use the unregistered version without paying.
Eclipse/MyEclipse (For Windows and Mac)

Price: Free/Paid

Download: https://www.eclipse.org/downloads/

Startup speed: Medium/Slow

Operating system: Windows/Mac

MyEclipse is actually a paid version of Eclipse, which originally existed as a plugin. Eclipse is primarily a Java IDE that integrates Java-related plugins very well. If your back-end technology choice is Java when developing with Cesium, and you prefer using a free IDE without being too concerned about front-end and back-end separation, then Eclipse is an excellent choice.
PHPStorm/IntelliJ IDEA/WebStorm (For Windows and Mac)

Price: Paid

Download: http://www.jetbrains.com/phpstorm/ | http://www.jetbrains.com/idea/ | http://www.jetbrains.com/webstorm/

Startup speed: Slow

Operating system: Windows/Mac

As you can tell from the domain, these three IDEs come from the same company. They are excellent IDEs, but they are all quite expensive and require annual license purchases. If you have the budget, you can purchase them. They are truly outstanding. Among them, if your back-end choice is PHP when developing with Cesium, you can use PHPStorm; if your back-end choice is Java, you can use IntelliJ IDEA; if you only need to develop web front-end code, have a decent computer, and are willing to pay, you can use WebStorm. As the old saying goes: “You get what you pay for” – they are expensive because they are genuinely good.
Visual Studio Code (VSCode) (For Windows and Mac)

Price: Free

Download: https://code.visualstudio.com/

GitHub: https://github.com/Microsoft/vscode

Startup speed: Fast

Operating system: Windows/Mac

Is cheap really synonymous with low quality? Not at all. Allow me to introduce the most powerful IDE in the universe: VSCode. When I was interning at MSRA, I kept thinking that since Visual Studio could be made so excellent, could there be a similarly excellent IDE for front-end development like Visual Studio? Yes, there is – Microsoft’s own child, the free, open-source, and cross-platform Visual Studio Code. It must be said that Microsoft has done a lot in embracing open source in recent years.
```
Free. Built on open source. Runs everywhere.
```
VSCode can be used not only for front-end development, but also for Java, PHP, C++, Python, and more.

Plugin marketplace: https://marketplace.visualstudio.com

VSCode is not inferior to WebStorm in any aspect. VSCode has an excellent plugin ecosystem. It has all the features a great IDE should have: IntelliSense, front-end support, auto-fix (plugins), Git/GitHub integration (GitLens), history (Local History), code checking (Code Spell Checker), themes, color schemes, and more.

Getting Started with Visual Studio Code

1. Command Palette

You can open it with F1 or Ctrl (Cmd on Mac) + Shift + P.

Type in the box: >Extensions: Show Installed Extensions to view installed plugins. You can also enter other commands.

2. How to Install Plugins

Installing the Live Server Plugin

Click on Extensions in the left toolbar, type “live server” (or any other plugin name) in the search box, and you will see the first plugin named:

Live Server. Click Install to install the plugin.

What this plugin does: It has a built-in web server (Live Server) that allows you to preview your changes at any time during development without worrying too much about the web server.

Right-click “Open With Live Server” to open the corresponding Cesium page in the browser:

3. Commonly Used Plugins

Settings Sync: Synchronize VSCode settings

Debugger for Chrome: Debug JavaScript code running in Google Chrome from VS Code

beautify: Format code

Auto Rename Tag: Automatically synchronize modifications of opening and closing tags

guides: Code alignment guide lines

filesize: Display current file size, creation and modification time

Todo Tree: Quickly search for TODO and other comment markers

vetur/VueHelper: Vue plugins

HTML Snippets: Provides basic H5 code snippets and tags

HTML CSS Support: Provides intelligent suggestions for CSS styles when writing class attributes in HTML tags

vscode-icon: Adds corresponding icons to VSCode folder directories. (If it does not take effect, go to [File - Preferences - File Icon Theme] to re-select the setting)

path intellisense: File path auto-completion

npm intellisense: Auto-completion for package references in require statements

bracket pair colorizer: Gives brackets independent colors

tortoiseSvn: SVN plugin

auto close tag: Automatically adds HTML/XML closing tags

change-case: More naming format options for text, such as camelCase, underscore_separated, etc.

color info: Hover over a color to preview detailed color model information in the color block

css peek: Navigate to CSS class and ID definitions in stylesheets. In the HTML file right-click menu, clicking on a selector and selecting “Go to Definition” will jump to the CSS code

eslint: Checks for syntax errors in JavaScript code

html boilerplate: HTML template plugin, create an HTML file with one click

htmlHint: HTML code format checking

intelliSense for CSS class names in HTML: Provides intelligent suggestions in HTML from CSS class names found in project CSS files

JavaScript (ES6) code snippets: ES6 code snippet suggestions

The above plugins can be found and installed directly by searching in the Extensions marketplace.

4. Chinese Language Pack

Chinese (Simplified) Language Pack for Visual Studio Code – for readers who prefer Chinese, you can download and install this Simplified Chinese language pack.

After installation, restart VSCode:

There are many bloggers online who have written detailed guides on how to use Visual Studio Code. You can search for them using your preferred search engine. You can also leave a comment on the Cesium Chinese Website (http://cesium.coinidea.com/).

Cesium Chinese Website QQ Group: 807482793 Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

Friends of the Cesium Chinese Website

Mon, 15 Jul 2019 07:28:08 +0000

We have now launched Knowledge Planet - Friends of the Cesium Chinese Website.

Note: Please think carefully before joining. Once paid, no refunds will be given. The following content is provided on a best-effort basis. 1. One technical exchange session per month (primarily Cesium-related), with source code provided.
2. Each person gets 5 free questions per week (Cesium, data visualization, and other technical topics).
3. Resume review and job referrals.
4. Career planning available for an additional fee.

The tentative exchange topics are as follows: [Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime. The key goal is to help everyone develop the ability to independently research and develop related frameworks**]; we hope this will be helpful to you.

Considering everyone’s actual situation, we may briefly cover: operating systems, computer networks, HTML/CSS/JavaScript, object-oriented programming, and basic principles of 3D digital earth.
Being able to use basic Git commands, download code from open-source communities, and run Cesium.
Loading and manipulating images, terrain, and models in Cesium.
Whether you can crawl your own tile map data; how to write lightweight crawling tools.
How to build your own GIS data server through GeoServer, and 2D data display with OpenLayers.
Cross-platform web, human-computer interaction events in Cesium, and how to achieve synchronization across browsers or devices within a local network.
Other topics that may be covered: Cesium with Echarts and Vue, other GIS systems, and some data visualization content.

[CesiumJS] Cesium Intermediate Tutorial 10 – CesiumJS and webpack

Sun, 02 Jun 2019 15:25:46 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

webpack is a popular and powerful tool for bundling JavaScript modules. It allows developers to structure code and assets in an intuitive way, and load different types of files as needed using simple require statements. During build time, it tracks code dependencies and bundles these modules into one or more bundles for the browser to load.

In the first half of this tutorial, we set up a simple web application using webpack from scratch, then cover the subsequent steps to integrate the Cesium npm module. If you like developing web applications with CesiumJS, webpack is a great choice. If you are new to Cesium and looking to learn how to build your first sample application, please check the Getting Started Tutorial.

In the second part, we will explore more advanced webpack configurations to optimize applications using CesiumJS.

The complete code and tips for optimizing a CesiumJS webpack application can be found in the official cesium-webpack-example.

Prerequisites

Basic understanding of the command line, JavaScript, and web development.
An IDE or code editor. Cesium team developers use Visual Studio Code, but a minimal code editor such as Sublime Text works perfectly fine as well.
Node.js installed. We recommend using the latest LTS version.

Create a basic webpack app

In this section, we will cover how to set up a basic web application with webpack and a development server. If you already have an application set up and just want to add CesiumJS, skip to Add CesiumJS to a webpack app.

Initialize an app with npm

Create a new cesium-webpack directory for your app. Open the console, navigate to the new directory, and run the following command:

1

npm init

Follow the prompts and fill in all the details about your application. Press enter to use the default values. This will create package.json.

Create the app code

Create a src directory for our application code. When we build the application, webpack will generate distribution files in the dist directory.

Create src/index.html and add the boilerplate HTML page code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <title>Hello World!</title>
 </head>
 <body>
 <p>Hello World!</p>
 </body>
</html>

Next, create an entry point for the application. This is the entry point where webpack looks for all JavaScript source code and dependencies to bundle.

Create src/index.js and add the following code:

1

console.log('Hello World!');

Install and configure webpack

Start by installing webpack:

1

npm install --save-dev webpack

Configuration

Create webpack.config.js to define the webpack configuration object.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const path = require('path');

const webpack = require('webpack');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 }
};

context specifies the base path for the files. entry is used to specify the bundles. In this case, the entry point for the app bundle is src/index.js. webpack will output the bundled app.js to the dist folder.

Loaders

Webpack loads everything like a module. Use loaders to load CSS and other asset files. Install style-loader, css-loader, and url-loader.

1

npm install --save-dev style-loader css-loader url-loader

Add two module.rules in webpack.config.js: one for CSS files and another for other static files. For each rule, test defines the file types to load, and use specifies the list of loaders.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


const path = require('path');

const webpack = require('webpack');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }, {
 test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
 use: [ 'url-loader' ]
 }]
 }
};

Plugins

Define index.html and inject the bundle into this page using a webpack plugin called html-webpack-plugin.

1

npm install --save-dev html-webpack-plugin

Reference the plugin in webpack.config.js, then inject it into plugins. Pass src/index.html as our template.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }, {
 test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
 use: [ 'url-loader' ]
 }]
 },
 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 })
 ]
};

The configuration file is a JavaScript file, so we can require other Node modules and perform operations.

Bundle the app

Use package.json to define scripts that can be called with npm. Add a build command.

1
2
3


 "scripts": {
 "build": "node_modules/.bin/webpack --config webpack.config.js"
 }

This script calls webpack and passes in the webpack.config.js configuration file.

We use local installations of webpack and webpack-dev-server in these scripts. This allows each project to use its own separate version, which is recommended by the webpack documentation. If you prefer to use a global version, install it globally with npm install –global webpack, and run it with the command webpack –config webpack.config.js.

When you run the build command: npm run build

You should see some output from webpack, starting with the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


npm run build

> test-app@1.0.0 build C:\workspace\test-app
> node_modules/.bin/webpack --config webpack.config.js

Hash: 2b42bff7a022b5d956a9
Version: webpack 3.6.0
Time: 2002ms
 Asset Size Chunks Chunk Names
 Assets/Textures/NaturalEarthII/2/0/3.jpg 10.3 kB [emitted]
 app.js 162 kB 0 [emitted] app

The app.js bundle and index.html file will be output to the dist folder.

Run the development server

Use webpack-dev-server to serve the development build so we can see our app in action:

1

npm install --save-dev webpack-dev-server

Add a start script in package.json to run the development server. Set the configuration file via the –config flag. Use the –open flag to open the application in the browser when the command is executed.

1
2
3
4


 "scripts": {
 "build": "node_modules/.bin/webpack --config webpack.config.js",
 "start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"
 }

Tell the development server to serve files from the dist folder. Add this to the bottom of webpack.config.js.

1
2
3
4


 // development server options
 devServer: {
 contentBase: path.join(__dirname, "dist")
 }

Finally, run the app:

1

npm start

You should see your content rendered at localhost:8080, and see the “Hello World!” message when you open the browser console.

Add CesiumJS to a webpack app

Install CesiumJS

Install the cesium module from npm and add it to package.json.

Configure CesiumJS in webpack

CesiumJS is a large and complex library. In addition to JavaScript modules, it also includes static assets such as CSS, image, and JSON files. It includes web worker files to perform intensive computations in separate threads. Unlike traditional npm modules, CesiumJS does not define an entry point because the library can be used in many different ways. We need to configure some additional options for use with webpack.

First, define the location of CesiumJS. This tutorial is based on the source code, so webpack can include individual models and track dependencies. Alternatively, the built (minified or unminified) versions of CesiumJS can be used. However, these modules have already been combined and optimized, which gives us less flexibility.

Add the following code to the top of webpack.config.js:

1
2
3


// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

This tutorial uses the npm module for easy installation, but you can also clone the GitHub repository or download and extract a release version.

Add the following options to the configuration object to resolve some issues with how webpack compiles CesiumJS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),

 // Needed to compile multiline strings in Cesium
 sourcePrefix: ''
 },
 amd: {
 // Enable webpack-friendly use of require in Cesium
 toUrlUndefined: true
 },
 node: {
 // Resolve node module use of fs
 fs: 'empty'
 },

output.sourcePrefix: Adds a \t tab before each line to override the webpack default. CesiumJS has some multiline strings, so we need to override this default with an empty prefix ’’.
amd.toUrlUndefined: true tells CesiumJS that the AMD webpack version used to evaluate require statements does not conform to the standard toUrl function.
node.fs: ’empty’ resolves some third-party usage issues with the fs module, which is intended for use in a Node environment, not in a browser.

Add a cesium alias so we can reference it in our application code.

1
2
3
4
5
6


 resolve: {
 alias: {
 // CesiumJS module name
 cesium: path.resolve(__dirname, cesiumSource)
 }
 },

Manage CesiumJS static files

Finally, ensure that static CesiumJS assets, widgets, and web worker files are properly served and loaded.

As part of the build process, use copy-webpack-plugin to copy static files to the dist directory.

1

npm install --save-dev copy-webpack-plugin

Require it at the top of the webpack.config.js file:

1

const CopywebpackPlugin = require('copy-webpack-plugin');

And add it to the plugins array:

1
2
3
4
5
6
7
8
9


 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 // Copy Cesium Assets, Widgets, and Workers to a static directory
 new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
 ],

This copies the Assets and Widgets directories as well as the built web worker scripts.

If you are using a fork of the CesiumJS repository, the Build folder will not exist. Run npm run release to generate the output folder. For more details, see the Cesium Build Guide.

Define an environment variable that tells CesiumJS the base URL for loading static files using the webpack DefinePlugin. The plugins array will now look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 // Copy Cesium Assets, Widgets, and Workers to a static directory
 new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
 new webpack.DefinePlugin({
 // Define relative base path in cesium for loading assets
 CESIUM_BASE_URL: JSON.stringify('')
 })
 ],

Require CesiumJS modules in our app

There are several ways to reference CesiumJS modules in our application. You can use CommonJS syntax or ES6 import statements.

You can import the entire CesiumJS library, or require only the specific modules you need. Importing individual modules will cause webpack to only compile those modules and their dependencies in the bundle, rather than the entire library.

CommonJS style require

Require all of CesiumJS:

1
2


var Cesium = require('cesium/Cesium');
var viewer = new Cesium.Viewer('cesiumContainer');

Require individual modules:

1
2


var Color = require('cesium/Core/Color');
var color = Color.fromRandom();

ES6 style import

Import all of CesiumJS:

1
2


import Cesium from 'cesium/Cesium';
var viewer = new Cesium.Viewer('cesiumContainer');

Import individual modules:

1
2


import Color from 'cesium/core/Color';
var color = Color.fromRandom();

Requiring asset files

The principle behind webpack is that every file is treated as a module. This makes importing assets the same as including JavaScript. We told webpack how to load each type of file using loaders in the configuration, so we just need to call require.

1

require('cesium/Widgets/widgets.css');

Hello World!

Create a new file, src/css/main.css, to style our application:

1
2
3
4
5
6
7


html, body, #cesiumContainer {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

Create a div for the CesiumJS Viewer in the index.html body. Replace

Hello World!

with the following div:

1

<div id="cesiumContainer"></div>

Remove the contents of index.js and include Cesium and our CSS files:

1
2
3


var Cesium = require('cesium/Cesium');
require('./css/main.css');
require('cesium/Widgets/widgets.css');

Add a line of code to create the Viewer:

1

var viewer = new Cesium.Viewer('cesiumContainer');

Run the app with npm start to view the Viewer in the browser.

Copy and paste your favorite Sandcastle example. For instance, the Particle System Fireworks example makes for a great conclusion.

Advanced webpack configurations

webpack can further improve performance, reduce bundle size, and perform additional or complex build steps. Here, we will discuss some configuration options related to using the CesiumJS library.

A configuration for optimizing production Cesium webpack builds can be found in the repository example webpack.release.config.js.

Code splitting

By default, webpack bundles CesiumJS in the same chunk as our application, resulting in a large file. We can split CesiumJS into its own bundle and improve our application performance using the CommonChunksPlugin. If you end up creating multiple chunks for your application, they can all reference a common cesium chunk.

Add the plugin to the webpack.config.js file and specify the rules for splitting CesiumJS modules:

1
2
3
4
5
6


 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: 'cesium',
 minChunks: module => module.context && module.context.indexOf('cesium') !== -1
 })
 ]

Enable source maps

Source maps allow webpack to trace errors back to the original content. They provide more or less detailed debugging information in exchange for compilation speed. We recommend using the ’eval’ option.

1

 devtool: 'eval'

Source maps are not recommended for production builds.

Remove pragmas

Developer errors and warnings exist in the CesiumJS source code that have been removed from our minified release builds. Since there is no built-in webpack method to remove these warnings, we will use strip-pragma-loader.

Install the package:

1

npm install strip-pragma-loader --save-dev

In module.rules, set debug to false and include the loader:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 rules: [{
 // Strip cesium pragmas
 test: /\.js$/,
 enforce: 'pre',
 include: path.resolve(__dirname, cesiumSource),
 use: [{
 loader: 'strip-pragma-loader',
 options: {
 pragmas: {
 debug: false
 }
 }
 }]
 }]

Uglify and minify

Uglifying and minifying code allows for smaller file sizes in production. For a release build, CesiumJS uglifies JavaScript files and minifies CSS files.

Use uglifyjs-webpack-plugin to uglify the CesiumJS source code.

1

npm install uglifyjs-webpack-plugin --save-dev

Require it in the configuration file:

1

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

Include it in the plugins list:

1
2
3


 plugins: [
 new webpack.optimize.UglifyJsPlugin()
 ]

Use the minimize option on css-loader to optimize CSS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


 module: {
 rules: [{
 test: /\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 // minify loaded css
 minimize: true
 }
 }
 ]
 }]
 }

Resources

The official cesium-webpack-example repository contains a minimal webpack configuration, the Hello World code from this tutorial, and instructions for optional code configurations.

For tutorials on CesiumJS features to include in a new application, see the Cesium Workshop Tutorial.

Explore examples in [Sandcastle] and check the CesiumJS Documentation.

To learn more about webpack, check out the webpack concepts, or read the documentation in depth.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 9 – Advanced Particle System Effects

Sun, 02 Jun 2019 12:58:56 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

To learn the basics of particle systems, see the Particle Systems Getting Started tutorial.

Weather

Setup

To generate a snow effect, first add a snowflake image for each particle, and then define the particle’s movement behavior and other dynamic elements in the updateParticle function.

The Images

Three images are used in this tutorial. The left one is the rain particle; the middle image is the snow particle; the right image is used for the fire effect.

The Update Function

The update function is used to define particle movement, arrangement, and visualization. It modifies the particle’s color, imageSize, and particleLife. We can even modify them based on the distance to the camera (as described below), imported models, or the distance to the Earth itself.

Here is our update function for snow:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// snow
var snowGravityVector = new Cesium.Cartesian3();
var snowUpdate = function(particle, dt) {
 Cesium.Cartesian3.normalize(particle.position, snowGravityVector);
 Cesium.Cartesian3.multiplyByScalar(snowGravityVector,
 Cesium.Math.randomBetween(-30.0, -300.0),
 snowGravityVector);
 particle.velocity = Cesium.Cartesian3.add(particle.velocity, snowGravityVector, particle.velocity);

 var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
 if (distance > (snowRadius)) {
 particle.endColor.alpha = 0.0;
 } else {
 particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
 }
};

The first part of the function makes the particles fall as if affected by gravity. The update function also contains a distance check so that particles fade away when they are far from the camera.

Additional Weather Effects

Use fog and atmospheric effects to enhance the visualization and match the type of weather we are trying to replicate.

hueShift changes the color along the color spectrum, saturationShift changes the degree to which the actual color versus black and white is needed for the visual, and brightnessShift changes how vivid the color is.

Fog density changes the opacity between the ground cover on the Earth and the fog color. The fog’s minimumBrightness is used to darken the fog.

1
2
3
4
5
6
7


// snow
scene.skyAtmosphere.hueShift = -0.8;
scene.skyAtmosphere.saturationShift = -0.7;
scene.skyAtmosphere.brightnessShift = -0.33;

scene.fog.density = 0.001;
scene.fog.minimumBrightness = 0.8;

The Systems

Snow

The snow system uses the snowflake_particle image and uses minimumImageSize and maximumImageSize to randomly create snowflakes within that range.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


var snowParticleSize = scene.drawingBufferWidth / 100.0;
var snowRadius = 100000.0;

var snowSystem = new Cesium.ParticleSystem({
 modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
 minimumSpeed : -1.0,
 maximumSpeed : 0.0,
 lifetime : 15.0,
 emitter : new Cesium.SphereEmitter(snowRadius),
 startScale : 0.5,
 endScale : 1.0,
 image : "../../SampleData/snowflake_particle.png",
 emissionRate : 7000.0,
 startColor : Cesium.Color.WHITE.withAlpha(0.0),
 endColor : Cesium.Color.WHITE.withAlpha(1.0),
 minimumImageSize : new Cartesian2(snowParticleSize, snowParticleSize),
 maximumImageSize : new Cartesian2(snowParticleSize * 2.0, snowParticleSize * 2.0),
 updateCallback : snowUpdate
});
scene.primitives.add(snowSystem);

Rain

The rain system uses circular_particle.png for raindrops. imageSize is used to vertically stretch the image, giving the rain a slender appearance.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


rainSystem = new Cesium.ParticleSystem({
 modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
 speed : -1.0,
 lifetime : 15.0,
 emitter : new Cesium.SphereEmitter(rainRadius),
 startScale : 1.0,
 endScale : 0.0,
 image : "../../SampleData/circular_particle.png",
 emissionRate : 9000.0,
 startColor :new Cesium.Color(0.27, 0.5, 0.70, 0.0),
 endColor : new Cesium.Color(0.27, 0.5, 0.70, 0.98),
 imageSize : new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 2),
 updateCallback : rainUpdate
});
scene.primitives.add(rainSystem);

The rain update function is slightly different because rain falls much faster than snow.

1
2
3
4
5
6
7


// rain
rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch,
 -1050.0,
 rainGravityScratch);

particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);

To make the environment match the atmosphere of the scene, modify the atmosphere and fog to match the rain. The code below creates a dark blue sky covered in haze.

1
2
3
4
5
6
7


// rain
scene.skyAtmosphere.hueShift = -0.97;
scene.skyAtmosphere.saturationShift = 0.25;
scene.skyAtmosphere.brightnessShift = -0.4;

scene.fog.density = 0.00025;
scene.fog.minimumBrightness = 0.01;

For additional help, visit the Sandcastle example for both snow and rain.

Comet and Rocket Tails

Using Multiple Particle Systems

To create comet and rocket tails, we need multiple particle systems. Each position on the particle ring created by this example is a completely independent particle system. This allows us to control the direction of the system’s movement more uniformly. A simple way to visualize this effect is to limit cometOptions.numberOfSystems to 2 and have cometOptions.colorOptions include only two colors, as shown in the image below.

To simplify different collections of systems, create arrays to carry the independent systems associated with the comet and those associated with the rocket example.

1
2


var rocketSystems = [];
var cometSystems = [];

Create two different options for the objects: one for the Comet version and another for the Rocket version. This makes the initial number of systems, offset values, etc. different for the two systems, giving them different appearances.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


var cometOptions = {
 numberOfSystems : 100.0,
 iterationOffset : 0.003,
 cartographicStep : 0.0000001,
 baseRadius : 0.0005,

 colorOptions : [{
 red : 0.6,
 green : 0.6,
 blue : 0.6,
 alpha : 1.0
 }, {
 red : 0.6,
 green : 0.6,
 blue : 0.9,
 alpha : 0.9
 }, {
 red : 0.5,
 green : 0.5,
 blue : 0.7,
 alpha : 0.5
 }]
};

var rocketOptions = {
 numberOfSystems : 50.0,
 iterationOffset : 0.1,
 cartographicStep : 0.000001,
 baseRadius : 0.0005,

 colorOptions : [{
 minimumRed : 1.0,
 green : 0.5,
 minimumBlue : 0.05,
 alpha : 1.0
 }, {
 red : 0.9,
 minimumGreen : 0.6,
 minimumBlue : 0.01,
 alpha : 1.0
 }, {
 red : 0.8,
 green : 0.05,
 minimumBlue : 0.09,
 alpha : 1.0
 }, {
 minimumRed : 1,
 minimumGreen : 0.05,
 blue : 0.09,
 alpha : 1.0
 }]
};

colorOptions is an array of colors for random visuals. Each system starts from a specific color rather than having a set color geometry, depending on the system currently being created. In the example below, i represents the current iteration number.

1

var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);

Setup

Use the function below as initialization for each system:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


function createParticleSystems(options, systemsArray) {
 var length = options.numberOfSystems;
 for (var i = 0; i < length; ++i) {
 scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
 scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
 scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);

 var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
 var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
 var force = forceFunction(options, i);

 var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : getImage(),
 startColor : color,
 endColor : color.withAlpha(0.0),
 particleLife : 3.5,
 speed : 0.00005,
 imageSize : new Cesium.Cartesian2(15.0, 15.0),
 emissionRate : 30.0,
 emitter : new Cesium.CircleEmitter(0.1),
 bursts : [ ],
 lifetime : 0.1,
 forces : force,
 modelMatrix : particlesModelMatrix,
 emitterModelMatrix : emitterModelMatrix
 }));
 systemsArray.push(item);
 }
}

Since both tail versions are similar, the same createParticleSystems function can be used to create either one. Pass in CometOptions or RocketOptions as the options parameter to create different effects.

Create the Particle Image from Scratch

Instead of loading an image from a URL, the getImage function creates the image using an HTML canvas. This makes image creation more flexible.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var particleCanvas;
function getImage() {
 if (!Cesium.defined(particleCanvas)) {
 particleCanvas = document.createElement('canvas');
 particleCanvas.width = 20;
 particleCanvas.height = 20;
 var context2D = particleCanvas.getContext('2d');
 context2D.beginPath();
 context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
 context2D.closePath();
 context2D.fillStyle = 'rgb(255, 255, 255)';
 context2D.fill();
 }
 return particleCanvas;
}

The Force Function

Below is our updateCallback function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


var scratchCartesian3 = new Cesium.Cartesian3();
var scratchCartographic = new Cesium.Cartographic();
var forceFunction = function(options, iteration) {
 var iterationOffset = iteration;
 var func = function(particle) {
 scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
 scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);

 particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);

 scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position,
 Cesium.Ellipsoid.WGS84,
 scratchCartographic);

 var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
 iterationOffset += options.iterationOffset;
 scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
 scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;

 particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
 };
 return func;
};

Note that forceFunction returns a function. The returned func is the actual updateCallback function. For each iteration, the update function creates a different rotation offset based on the angle and iterationOffset. A smaller iteration offset only slightly adjusts the angle, allowing the radius to steadily increase as the system continues, as shown in the comet example. A larger iteration offset changes the angle more quickly; this creates a tighter, more erratic cylindrical output, as shown in the rocket example.

This tutorial uses sine and cosine functions for circular effects. For other effects, try making shapes such as a Lissajous curve, Gibbs phenomenon, or square wave.

Relative Position

Use modelMatrix to position the particle system at the appropriate location behind the plane. Because these systems are vertical, we need a slight offset using the particleOffset value. As shown in the createParticleSystems function, the emitterModelMatrix offset for each system is calculated based on the iteration.

1
2
3
4
5
6
7
8


// positioning the plane
var planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);
var particlesOffset = new Cesium.Cartesian3(-8.950115473940969, 34.852766731753945, -30.235411095432937);

// creating the particles model matrix
var transl = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
var translPosition = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translPosition, transl, new Cesium.Matrix4());

Resources

For additional help, visit the Sandcastle example for both tails examples. More example code:

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 8 – Introduction to Particle Systems

Sun, 02 Jun 2019 09:41:38 +0000

Cesium Chinese website: http://cesiumcn.org/ | Domestic fast access: http://cesium.coinidea.com/

What is a Particle System?

A particle system is a graphics technique that simulates complex physical effects. Particle systems are collections of small images that, when viewed together, form a more complex “fuzzy” object such as fire, smoke, weather, or fireworks. These complex effects can be controlled by specifying the behavior of individual particles using properties such as initial position, velocity, and lifetime.

Particle system effects are very common in movies and video games. For example, to represent damage to an aircraft, a technical artist might use a particle system to represent an explosion on the aircraft’s engine, and then render a different particle system to represent the smoke trail as the aircraft crashes.

Particle System Basics

Take a look at the code for a basic particle system below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 imageSize : new Cesium.Cartesian2(20, 20),
 startScale : 1.0,
 endScale : 4.0,
 particleLife : 1.0,
 speed : 5.0,
 emitter : new Cesium.CircleEmitter(0.5),
 emissionRate : 5.0,
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

The code above creates a ParticleSystem, a parameterized object that controls the appearance and behavior of individual Particle objects over time. Particles are generated by a particle emitter, have a position and type, live for a certain period of time, and then die.

Some of these properties are dynamic. Notice that instead of using the available monochrome property scale, there is a startScale and endScale. These allow you to specify that the particle size transitions between the start and end scales over the course of the particle’s lifetime. startColor and endColor work similarly.

Other ways to affect visual output include maximum and minimum properties. For each variable with maximum and minimum inputs, the actual value of that variable on the particle will be randomly assigned between the maximum and minimum inputs and will remain static at that value throughout the particle’s lifetime. For example, using minimum speed and maximum speed as bounds for the speed randomly selected for each particle. Properties that allow changes like this include imageSize, speed, life, and particleLife.

Emitters

When a particle is born, its initial position and velocity vector are controlled by the ParticleEmitter. The emitter will generate a number of particles per second, specified by the emissionRate parameter, initialized with a random velocity based on the emitter type.

Cesium has a variety of particle emitters that you can use out of the box.

BoxEmitter

BoxEmitter initializes particles at randomly sampled positions within a box and directs them out of one of the six box faces. It accepts a Cartesian3 parameter that specifies the width, height, and depth dimensions of the box.

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(5.0, 5.0, 5.0)),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

CircleEmitter

CircleEmitter initializes particles at randomly sampled positions within a circle in the direction of the emitter’s up axis. It accepts a float parameter that specifies the radius of the circle.

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.CircleEmitter(5.0),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

If no emitter is specified, CircleEmitter will be used as the default emitter.

ConeEmitter

ConeEmitter initializes particles at the tip of a cone and directs them away from the cone at random angles. It takes a float parameter that specifies the angle of the cone. The cone is oriented along the emitter’s up axis.

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(30.0)),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

SphereEmitter

SphereEmitter initializes particles at randomly sampled positions within a sphere and directs them outward from the center of the sphere. It takes a float parameter that specifies the radius of the sphere.

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.SphereEmitter(5.0),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

Configuring Particle Systems

Particle Emission Rate

emissionRate controls how many particles are emitted per second, which changes the density of particles in the system. Specify a set of bursts to emit particles at specified times (as shown in the animation above). This adds variety or explosiveness to the particle system.

Add this property to your particleSystem:

1
2
3
4
5


bursts : [
 new Cesium.ParticleBurst({time : 5.0, minimum : 300, maximum : 500}),
 new Cesium.ParticleBurst({time : 10.0, minimum : 50, maximum : 100}),
 new Cesium.ParticleBurst({time : 15.0, minimum : 200, maximum : 300})
]

At the given times, these bursts will emit between the minimum and maximum number of particles.

Life of the Particle and Life of the System

By default, the particle system will run forever. To make the particle system run for a set duration, use lifetime to specify the duration in seconds and set loop to false.

1
2


lifetime : 16.0,
loop: false

Setting particleLife to 5.0 will give every particle in the system that particleLife value. To randomize the output of each particle, use the variables minimumParticleLife and maximumArticleLife.

1
2


minimumParticleLife: 5.0,
maximumParticleLife: 10.0

Styling Particles

Color

Particles are styled with textures specified by image and color, which can change over the particle’s lifetime to create dynamic effects. The following code makes smoke particles transition from green to white.

1
2


startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
endColor : Cesium.Color.WHITE.withAlpha(0.0),

Size

The size of a particle is controlled by imageSize. To randomize the size, use minimumImageSize.x and maximumImageSize.x to control the width (in pixels), and minimumImageSize.y and maximumImageSize.y to control the height (in pixels). The following code creates square particles between 30 and 60 pixels:

1
2


minimumImageSize : new Cesium.Cartesian2(30.0, 30.0),
maximumImageSize : new Cesium.Cartesian2(60.0, 60.0)

The size of particles can be adjusted over their lifetime using the startScale and endScale properties to make particles grow or shrink over time.

1
2


startScale: 1.0,
endScale: 4.0

Speed

Speed is controlled by speed or minimumSpeed and maximumSpeed.

1
2


minimumSpeed: 5.0,
maximumSpeed: 10.0

UpdateCallback

Particle systems can be further customized by applying an update function. It acts as a manual updater for each particle for effects such as gravity, wind, or color changes.

The particle system has an updateCallback that modifies particle properties during the simulation. This function takes the particle and the simulation time step. Most physics-based effects will modify the velocity vector to change direction or speed. Here is an example that makes particles react to gravity:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var gravityVector = new Cesium.Cartesian3();
var gravity = -(9.8 * 9.8);
function applyGravity(p, dt) {
 // Compute a local up vector for each particle in geocentric space.
 var position = p.position;

 Cesium.Cartesian3.normalize(position, gravityVector);
 Cesium.Cartesian3.multiplyByScalar(gravityVector, gravity * dt, gravityVector);

 p.velocity = Cesium.Cartesian3.add(p.velocity, gravityVector, p.velocity);
}

This function computes the gravity vector and uses gravitational acceleration to change the particle’s velocity. Set gravity as the updateFunction of the particle system:

1

updateCallback : applyGravity

Positioning

Particle systems are positioned using two Matrix4 transformation matrices:

modelMatrix: Transforms the particle system from model to world coordinates.
emitterModelMatrix: Transforms the particle system emitter within the particle system’s local coordinate system.

You can use just one of these transformation matrices and leave the other as the identity matrix, but we provide both for convenience. To practice creating matrices, let’s position the particle emitter relative to another entity.

Create an entity for our particle system. Open the Hello World Sandcastle example and add the following code to add a milk truck model to the viewer:

1
2
3
4
5
6
7


var entity = viewer.entities.add({
 model : {
 uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb'
 },
 position : Cesium.Cartesian3.fromDegrees(-75.15787310614596, 39.97862668312678)
});
viewer.trackedEntity = entity;

We want to add a smoke effect coming from the back of the truck. Create a model matrix that will position the particle system and orient it the same as the milk truck entity.

1

modelMatrix: entity.computeModelMatrix(time, new Cesium.Matrix4())

This places the particle system at the center of the truck. To position it at the back of the truck, we can create a matrix with a translation.

1
2
3
4
5
6
7


function computeEmitterModelMatrix() {
 hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
 trs.translation = Cesium.Cartesian3.fromElements(-4.0, 0.0, 1.4, translation);
 trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);

 return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
}

Now, add the particle system:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',

 startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
 endColor : Cesium.Color.WHITE.withAlpha(0.0),

 startScale : 1.0,
 endScale : 4.0,

 particleLife : 1.0,

 minimumSpeed : 1.0,
 maximumSpeed : 4.0

 imageSize : new Cesium.Cartesian2(25, 25),
 emissionRate : 5.0,
 lifetime : 16.0,

 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4())
 emitterModelMatrix : computeEmitterModelMatrix()
}));

Also note that we can update the model or emitter matrices over time. For example, if we want to animate the emitter position on the truck, we can modify the emitterModelMatrix while keeping the modelMatrix unchanged.

To see the complete example, visit the Particle System demo.

Learn More

For achieving cooler effects with particle systems using more advanced techniques, see the Particle Systems - More Effects tutorial.

For more example code, see:

Cesium Chinese website QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | Domestic fast access: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 7 – Geometry and Appearances

Sun, 02 Jun 2019 08:00:38 +0000

Cesium Chinese website: http://cesiumcn.org/ | Fast access in China: http://cesium.coinidea.com/

This tutorial will introduce you to the geometry and appearance system using the Primitive API. This is an advanced topic for extending CesiumJS with custom meshes, shapes, volumes, and appearances, rather than for general Cesium users. If you are interested in learning how to draw various shapes and volumes on the globe, please check out the Creating Entities tutorial. CesiumJS can create different geometry types using entities (such as polygons and ellipsoids). For example, copy and paste the following code into the Hello World Sandcastle example to create a rectangle with a stripe pattern on the globe:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var viewer = new Cesium.Viewer('cesiumContainer');

viewer.entities.add({
 rectangle : {
 coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 material : new Cesium.StripeMaterialProperty({
 evenColor: Cesium.Color.WHITE,
 oddColor: Cesium.Color.BLUE,
 repeat: 5
 })
 }
});

In this tutorial, we will go under the hood and look at the geometry and appearance types that make them up. Geometry defines the structure of a Primitive, i.e., the triangles, lines, or points that make up the primitive. Appearance defines the shading of the Primitive, including its full GLSL vertex and fragment shaders, as well as the render state.

The benefits of using geometry and appearances are:

Performance: When drawing a large number of Primitives (such as polygons for every zip code in the United States), using geometry directly allows us to combine them into a single geometry to reduce CPU overhead and better utilize the GPU. Combining Primitives is done on a web worker to keep the UI responsive.
Flexibility: Primitives combine geometry and appearance. By separating them, we can modify each independently. We can add new geometries that are compatible with many different appearances, and vice versa.
Low-level access: Appearances provide close-to-the-metal rendering access without worrying about all the details of using the Renderer directly. Appearances make it easy to:
- Write full GLSL vertex and fragment shaders
- Use custom render states

Of course, there are also some drawbacks:

Using geometry and appearances directly requires more code and a deeper understanding of graphics. Entities are at an abstraction level suitable for mapping applications; geometry and appearances are at an abstraction level closer to a traditional 3D engine.
Combining geometries is effective for static data, but not necessarily for dynamic data.

Let’s rewrite the initial code example using geometry and appearances:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

// original code
//viewer.entities.add({
// rectangle : {
// coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
// material : new Cesium.StripeMaterialProperty({
// evenColor: Cesium.Color.WHITE,
// oddColor: Cesium.Color.BLUE,
// repeat: 5
// })
// }
//});

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Stripe')
 })
}));

We used a Primitive (Primitive) instead of a rectangle entity, which combines geometry and appearance. For now, we will not distinguish between Geometry and GeometryInstance. An instance is not just an instance of a geometry, but also a container for it.

To create the geometry for a rectangle – the triangles covering the rectangular area and conforming to the curvature of the globe – we created a RectangleGeometry.

Since it is on the surface, we can use EllipsoidSurfaceAppearance. This saves memory by assuming the geometry is on the surface or at a constant height above the ellipsoid.

Geometry Types

CesiumJS provides the following geometries:

Combining Geometry

When we use a single Primitive to draw multiple static geometries, we see performance benefits. For example, drawing two rectangles in one Primitive.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


 var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

var anotherInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [instance, anotherInstance],
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Stripe')
 })
}));

We created another instance with a different rectangle, then provided both instances to the Primitive. This draws both instances with the same appearance.

Some appearances allow each instance to provide unique attributes. For example, we can use PerInstanceColorAppearance to shade each instance with a different color.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8)
 }
});

var anotherInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [instance, anotherInstance],
 appearance : new Cesium.PerInstanceColorAppearance()
}));

Each instance has a color attribute. The Primitive is constructed with PerInstanceColorAppearance, which uses each instance’s color attribute to determine the shading.

Combining geometries allows CesiumJS to efficiently draw many geometries. The following example draws 2,592 uniquely colored rectangles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instances = [];

for (var lon = -180.0; lon < 180.0; lon += 5.0) {
 for (var lat = -85.0; lat < 85.0; lat += 5.0) {
 instances.push(new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.5}))
 }
 }));
 }
}

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instances,
 appearance : new Cesium.PerInstanceColorAppearance()
}));

Picking

Instances can be accessed independently after being combined. Assign an ID to an instance and use it to determine whether that instance is picked using Scene.Pick.

The following example creates an instance with an id and writes a message to the console when the instance is clicked.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 id : 'my rectangle',
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.PerInstanceColorAppearance()
}));

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
 var pick = scene.pick(movement.position);
 if (Cesium.defined(pick) && (pick.id === 'my rectangle')) {
 console.log('Mouse clicked rectangle.');
 }
 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Using id avoids keeping a reference to the entire instance in memory after the Primitive is constructed, including the geometry.

Geometry Instances

Instances can be used to position, scale, and rotate the same geometry in different parts of the scene. This is possible because multiple instances can reference the same Geometry, and each instance can have a different modelMatrix. This allows us to compute the geometry only once and reuse it multiple times.

The following example creates an EllipsoidGeometry and two instances. Each instance references the same ellipsoid geometry but uses a different modelMatrix to place it, resulting in one ellipsoid positioned above the other.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
 radii : new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});

var cyanEllipsoidInstance = new Cesium.GeometryInstance({
 geometry : ellipsoidGeometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(
 Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
 new Cesium.Cartesian3(0.0, 0.0, 150000.0),
 new Cesium.Matrix4()
 ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
 }
});

var orangeEllipsoidInstance = new Cesium.GeometryInstance({
 geometry : ellipsoidGeometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(
 Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
 new Cesium.Cartesian3(0.0, 0.0, 450000.0),
 new Cesium.Matrix4()
 ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [cyanEllipsoidInstance, orangeEllipsoidInstance],
 appearance : new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
 })
}));

Updating Per-Instance Attributes

After geometry is added to a Primitive, update per-instance attributes of the geometry to change the visualization. Per-instance attributes include:

Color: ColorGeometryInstanceAttribute determines the color of the instance. The Primitive must have a PerInstanceColorAppearance.
Show: A boolean type that determines whether the instance is visible. All instances have this attribute.

The following demonstrates how to change the color of a geometry instance:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var circleInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.CircleGeometry({
 center : Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
 radius : 250000.0,
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
 },
 id: 'circle'
});
var primitive = new Cesium.Primitive({
 geometryInstances : circleInstance,
 appearance : new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
 })
});
scene.primitives.add(primitive);

setInterval(function() {
 var attributes = primitive.getGeometryInstanceAttributes('circle');
 attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha : 1.0}));
},2000);

The attributes of a geometry instance can be retrieved from the primitive using primitive.getGeometryInstanceAttributes. The properties of attributes can be changed directly.

Appearances

Geometry defines the structure. The other key property of a primitive, appearance, defines the shading of the primitive, i.e., the color of individual pixels. A primitive can have multiple geometry instances but only one appearance. Depending on the type of appearance, the appearance will have a material that defines the body of the shading.

CesiumJS has the following appearances:

Appearances define the full GLSL vertex and fragment shaders that are executed on the GPU when drawing a Primitive. Appearances also define the full render state, which controls the state of the GPU when drawing a primitive. We can define the render state directly, or use higher-level properties like “closed” and “translucent”, which the appearance will convert into render state. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Perhaps for an opaque box that the viewer will not enter.
// - Backface culled and depth tested. No blending.

var appearance = new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
});

// This appearance is the same as above
var anotherAppearance = new Cesium.PerInstanceColorAppearance({
 renderState : {
 depthTest : {
 enabled : true
 },
 cull : {
 enabled : true,
 face : Cesium.CullFace.BACK
 }
 }
});

Once an appearance is created, its renderState property cannot be changed, but its material can. We can also change the appearance property of a primitive.

Most appearances also have flat and faceForward properties, which indirectly control the GLSL shaders.

flat: Flat shading. Do not consider lighting.
faceForward: When lighting, flip the normal so that it always faces the viewer. Avoids dark areas on the back side, such as the inside of a wall.

Geometry and Appearance Compatibility

Not all appearances work with all geometries. For example, the EllipsoidSurfaceAppearance does not work with WallGeometry because a wall is not on the surface of the globe.

For an appearance to be compatible with a geometry, they must have matching vertex formats, meaning the geometry must have the input data expected by the appearance. A vertexFormat can be provided when creating a geometry.

The vertexFormat of a geometry determines whether it can be combined with other geometries. Two geometries do not need to be the same type, but they need matching vertex formats.

For convenience, appearances either have a vertexFormat property or a VERTEX_FORMAT static constant that can be passed as a geometry option.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var geometry = new Ceisum.RectangleGeometry({
 vertexFormat : Ceisum.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 // ...
});

var geometry2 = new Ceisum.RectangleGeometry({
 vertexFormat : Ceisum.PerInstanceColorAppearance.VERTEX_FORMAT
 // ...
});

var appearance = new Ceisum.MaterialAppearance(/* ... */);
var geometry3 = new Ceisum.RectangleGeometry({
 vertexFormat : appearance.vertexFormat
 // ...
});

Resources

Reference documentation:

For more materials, visit: Fabric For future plans, visit: Geometry and Appearances Roadmap

Cesium Chinese website QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | Fast access in China: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 6 – 3D Models

Thu, 23 May 2019 13:08:49 +0000

Cesium Chinese website: http://cesiumcn.org/ | Fast domestic access: http://cesium.coinidea.com/

This tutorial will teach you how to convert, load, and use 3D models in Cesium through the Primitive API. If you are new to Cesium, you may want to read the 3D models section of the Spatial Data Visualization Tutorial, referred to as “Spatial Data Visualization” in this tutorial series.

Cesium supports 3D models, including keyframe animations, skinning, and individual node picking, using glTF — an emerging industry-standard format developed by the Khronos Group (the consortium behind WebGL and COLLADA) for 3D models on the web. Cesium also provides a web-based tool to convert COLLADA models to glTF for optimized use with Cesium.

Quick Start

Cesium includes several ready-to-use binary glTF models:

An airplane with animated propellers
A ground vehicle with animated wheels
A character with skinned walk cycle
A hot air balloon
A milk truck (also available in Draco-compressed format)

These models each have their own directory in Apps/SampleData/models. Most will include the original COLLADA file (.dae), glTF file (.gltf), and/or binary glTF file (.glb). The original COLLADA file is not needed for use in a Cesium application.

Let’s write code to load these models. Open Sandcastle’s Hello World example. Below line 4 var viewer=…, add a scene variable.

1

var scene = viewer.scene;

Next, load the ground vehicle model using Cesium.Model from glTF by adding the following code.

1
2
3
4
5
6
7


var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
 Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
 url : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
 modelMatrix : modelMatrix,
 scale : 200.0
}));

Press F8, then use the geocoder tool in the upper right corner to zoom to Exton, PA.

We are now looking directly at the ground vehicle. We can right-click drag to zoom in, and middle-click drag to tilt the view.

Cesium.Model.fromGltf asynchronously loads a glTF model, including any external files, and renders the model once it is fully loaded, resolving the readyPromise. Only the URL of the .gltf file is required, which in this case is ../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb.

scale is provided as an optional parameter to fromGltf to enlarge the model. Many real-sized models can also appear very small. So using a larger scale value for the first test of a model is helpful, such as 200000.0, as shown below:

modelMatrix is also provided to fromGltf to position and rotate the model. This creates a local coordinate system for the model. Here, Cesium.Transforms.eastNorthUpToFixedFrame is used to create a local East-North-Up coordinate system with its origin at longitude -75.62898254394531 degrees, latitude 40.02804946899414 degrees. The model’s modelMatrix property can be changed at any time to move the model.

To visualize the coordinate system, use the Cesium Inspector by adding the following code anywhere below line 4 var viewer=…:

1

viewer.extend(Cesium.viewerCesiumInspectorMixin);

Press F8, and the inspector interface will appear in the upper left. Expand Primitives, click Pick a Primitive, click on the ground vehicle model, and then check show reference frame.

Here: the x-axis (East) is red, the y-axis (North) is green, and the z-axis (Up) is blue.

We can use the same code to load the airplane or character model by simply changing the URL passed to fromGltf to “../../../../Apps/SampleData/models/CesiumAir/Cesium-Air.glb” or “../../../../Apps/SampleData/models/CesiumMan/Cesium-Man.glb”. See the reference documentation for Cesium.Model.fromGltf for all available options.

Animations

Each of these models has built-in animations created by an artist (for example, an artist defines several key poses to create an animation), and Cesium interpolates them at runtime to create smooth animations.

To play animations, add the following code after the call to Cesium.Model.fromGltf.

1
2
3
4
5


Cesium.when(model.readyPromise).then(function(model) {
 model.activeAnimations.addAll({
 loop : Cesium.ModelAnimationLoop.REPEAT
 });
});

Since animations are stored in the glTF model, we need to wait for the readyPromise to resolve before accessing them. addAll is used to play all animations in the model. Cesium.ModelAnimationLoop.REPEAT loops the animation until it is removed from the activeAnimations collection. To play a specific animation, use add instead, providing the animation’s id (the glTF JSON property name).

In addition to the loop option, addAll and add provide many options to control the animation’s start and stop time, speed, and direction. For example, the following animation runs at half speed (relative to the Cesium clock) and in reverse.

1
2
3
4
5


model.activeAnimations.addAll({
 loop : Cesium.ModelAnimationLoop.REPEAT,
 speedup : 0.5,
 reverse : true
});

add returns a ModelAnimation object (addAll returns an array of these objects) that includes events for when the animation starts, stops, and updates each frame. For example, this allows starting one animation relative to another. See the API documentation for start, stop, and update events.

Animations are synchronized with the Cesium clock, so to see them, press play on the play widget. You can use the timeline and play widget to increase, decrease, and reverse the animation speed.

To configure the application to automatically play animations, initialize the viewer as follows:

1
2
3


var viewer = new Cesium.Viewer('cesiumContainer', {
 shouldAnimate : true
});

Picking

As with all Cesium primitives, Scene.pick will return a model as part of its result if one is picked. Additionally, the ids (JSON property names) of the glTF node and glTF mesh are returned, enabling precise picking of different model parts. The following example displays the node and mesh names under the mouse cursor in the console window.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
 function (movement) {
 var pick = scene.pick(movement.endPosition);
 if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
 console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
 }
 },
 Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

Converting COLLADA to glTF

To fully convert COLLADA models to glTF format for use with Cesium, you can use the web-based COLLADA-to-glTF converter. This tool can convert .dae files and image files into a .gltf file with embedded images.

Troubleshooting

If you encounter problems loading a 3D model in Cesium, first determine where the problem lies. The issue may be in:

The modeling tool’s exporter, such as Maya, Modo, SketchUp, etc.
The COLLADA-to-glTF conversion tool
The Cesium glTF renderer

Troubleshooting on Mac

On Mac, to determine whether a COLLADA file was exported correctly, double-click the .dae file, which should display in the Preview window. If the model has animations, hovering over the bottom of the window will reveal a toolbar to play them.

If the COLLADA file is invalid, Preview will display an error. This usually indicates a bug in the COLLADA exporter used to create the COLLADA file.

To troubleshoot this, install Xcode, then right-click the .dae file and select Open With -> Xcode.

Xcode displays the model similarly to Preview but with more features, such as the ability to select individual nodes. Xcode also implements many workarounds for invalid COLLADA files, so it can often load and preview COLLADA files that Preview cannot. If the model loads in Xcode, select File -> Save to save the model with the workarounds applied, and it should then load in Preview.

If it still doesn’t load in Preview, then there is an issue with the COLLADA exporter. Make sure you have the latest version of the modeling tool, and try the tips in this article. If it still doesn’t work, file a bug with the modeling tool (not Cesium). It’s also worth trying to export as .fbx or another format, then importing into another modeling tool with a better COLLADA exporter.

Troubleshooting on Windows

On Windows, Visual Studio 2013 includes a model editor in the free Community Edition that can load COLLADA models. To determine whether the COLLADA file was exported correctly, drag the .dae file into Visual Studio and it should load. If it doesn’t load, this usually indicates a bug in the COLLADA exporter. Make sure you have the latest version of the modeling tool, and try the tips in this article. If it still doesn’t work, file a bug with the modeling tool (not Cesium). It’s also worth trying to export as .fbx or another format, then importing into another modeling tool with a better COLLADA exporter.

If you don’t have Visual Studio, Autodesk has a WebGL viewer that allows drag and drop and doesn’t require login. The viewer does not support animations. If the model has images, upload a zip package containing the .dae and image files.

Troubleshooting in Cesium

Once we have a valid COLLADA file, run it through the COLLADA-to-glTF converter, then try loading it into Cesium. If it doesn’t load into Cesium or displays incorrectly, there is a bug in either the converter or Cesium. To get more details, open the browser’s developer tools (Ctrl-Shift-I in Chrome) and enable Pause on all exceptions (in Chrome’s Sources tab), then reload the Cesium application.

Post a message to the Cesium Forum, and we can usually provide a workaround until a fix is available. In your post, please include:

The original COLLADA and converted glTF files. We understand that not everyone can share their models, but if you can, it greatly improves our ability to help.
The browser’s console window and any exceptions thrown when loading the model, for example:

Resources

Check out the 3D Models example in Sandcastle and the reference documentation for Model and ModelAnimationCollection.

Cesium Chinese community QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | Fast domestic access: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 5 - Terrain

Wed, 22 May 2019 09:33:44 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

CesiumJS supports streaming and visualizing high-resolution terrain along with water-related effects for oceans, lakes, and rivers. View mountain peaks, valleys, and other terrain features while embracing the 3D digital globe. Stream your own tiled terrain data or high-resolution managed terrain such as Cesium World Terrain using Cesium ion.

Quick Start

Open the Sandcastle Hello World example. By default, the globe is a WGS84 ellipsoid. Specify a different terrain provider by passing the terrainProvider option to Viewer. Let’s use Cesium World Terrain:

1
2
3
4


Cesium.Ion.defaultAccessToken = 'your_access_token';
var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain()
});

NOTE: Create a Cesium account. This tutorial uses terrain provided by Cesium ion. Create an account to obtain an access token for using terrain in this tutorial. Sign up here. The example code above will automatically update with your token. If you already have an account, sign in.

After modifying the example, press F8 to run it. Zoom to a mountainous area, hold the middle mouse button and drag to tilt to a horizon view. Here is what Mount Everest looks like:

As we zoom closer, CesiumJS fetches higher resolution terrain based on which parts of the globe are visible and how far away they are.

Terrain and imagery are handled separately, and any imagery provider can be used with any terrain provider. See the Imagery Layers Tutorial for managing imagery.

Enabling Terrain Lighting and Water Effects

Cesium World Terrain also includes terrain lighting data and coastline data needed for water effects. By default, this data is not sent along with terrain tiles. To enable terrain lighting, set requestVertexNormals to true and turn on global lighting.

1
2
3
4
5
6


var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain({
 requestVertexNormals: true
 })
});
viewer.scene.globe.enableLighting = true;

Below is the same view of Mount Everest with terrain lighting enabled based on sun position.

Enable water effects in a similar way using requestWaterMask:

1
2
3
4
5


var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain({
 requestWaterMask: true
 })
});

Zoom to an area with water to see the effect. Here is the San Francisco Bay:

Over time, waves ripple and bright specular reflections from the sun and moon appear. Customize the water effect using Globe.oceanNormalMapUrl for wave creation. Changing the imagery provider also affects the appearance of the water, as the water color blends with the underlying imagery.

See the Sandcastle Terrain example to explore some interesting terrain and water effect areas.

Terrain Ready for Streaming

Cesium World Terrain: High-resolution world terrain with extended support for terrain lighting and water effects. Cesium World Terrain supports online access via Cesium ion and paid downloads for offline access. Adding it to your Cesium application will quickly improve terrain visualization. Cesium World Terrain is also available via on-premise deployment.

Terrain Providers

Cesium supports several methods for requesting terrain based on terrain providers. Most terrain providers use REST interfaces over HTTP to request terrain tiles. Terrain providers differ based on the format of the request and how the terrain data is organized. CesiumJS supports the following terrain providers:

CesiumTerrainProvider: Supports quantized-mesh terrain tiles optimized for terrain streaming. Compatible with terrain served by Cesium ion and output from the 3D tiling pipeline.
GoogleEarthEnterpriseTerrainProvider: Supports heightmap terrain generated by your Google Earth Enterprise server.
VRTheWorldTerrainProvider: Supports heightmap terrain requested from VT MAK VR-TheWorld Server.
EllipsoidTerrainProvider: Procedurally creates the surface of an ellipsoid. Lacks realistic terrain appearance but does not request data from a server.

Terrain provider construction is similar to imagery providers and typically includes the terrain server URL and an optional proxy if the server does not support Cross-Origin Resource Sharing (CORS).

Resources

View the Terrain example in Sandcastle and reference documentation for all terrain providers.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 4 - Spatial Data Visualization (Part 2)

Wed, 22 May 2019 02:15:02 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Entity Features in Viewer

Let’s look at the functions that Viewer provides for manipulating entities.

Selection and Description

Clicking an entity in the Viewer will display a SelectionIndicator widget at the entity’s location, providing an InfoBox for presenting more information. We can set name to define the title of the InfoBox. We can also provide the Entity.description property in HTML format.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


wyoming.name = 'wyoming';
wyoming.description = '\
<img\
 width="50%"\
 style="float:left; margin: 0 1em 1em 0;"\
 src="//cesium.com/docs/tutorials/creating-entities/Flag_of_Wyoming.svg"/>\
<p>\
 Wyoming is a state in the mountain region of the Western \
 United States.\
</p>\
<p>\
 Wyoming is the 10th most extensive, but the least populous \
 and the second least densely populated of the 50 United \
 States. The western two thirds of the state is covered mostly \
 with the mountain ranges and rangelands in the foothills of \
 the eastern Rocky Mountains, while the eastern third of the \
 state is high elevation prairie known as the High Plains. \
 Cheyenne is the capital and the most populous city in Wyoming, \
 with a population estimate of 63,624 in 2017.\
</p>\
<p>\
 Source: \
 <a style="color: WHITE"\
 target="_blank"\
 href="http://en.wikipedia.org/wiki/Wyoming">Wikipedia</a>\
</p>';

All HTML displayed in the InfoBox is sandboxed. This prevents external data sources from injecting malicious content into the Cesium application. To run JavaScript or browser plugins within the description, access the sandboxed iframe via the viewer.infoBox.frame property. Refer to this article for more information on controlling iframe sandboxing.

Camera Controls

Use the viewer.zoomTo command to view a specific Entity. There is also a viewer.flyTo method for performing animated Camera flights to an Entity. Both methods can be passed an Entity, EntityCollection, DataSource, or an array of entities.

Either method will calculate the view for all provided entities. By default, the Camera faces north and looks down at a 45-degree angle. Customize this by passing in a HeadingPitchRange.

1
2
3


var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

zoomTo and flyTo are both asynchronous functions; that is, they are not guaranteed to complete before returning. For example, flying to an Entity happens over many animation frames. Both functions return Promises that can be used to schedule actions to perform after the flight or zoom completes. Replace zoomTo in the example with the following code snippet. This flies to Wyoming and selects it after the flight ends.

1
2
3
4
5


viewer.flyTo(wyoming).then(function(result){
 if (result) {
 viewer.selectedEntity = wyoming;
 }
});

The result parameter passed to the callback function will be true if the flight completed successfully; false if the flight was cancelled – that is, the user initiated another flight or zoom before this one completed; or if the target had no corresponding visualization, i.e., nothing to zoom to.

Sometimes, especially when working with time-dynamic data, we want the Camera to focus on and follow an entity rather than the center of the Earth. This can be accomplished by setting viewer.trackedEntity. Tracking an entity requires setting a position.

1
2


wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity = wyoming;

To stop tracking, set viewer.trackedEntity to undefined or double-click away from the entity. Calling zoomTo or flyTo will also cancel tracking.

Managing Entities

EntityCollection is an associative array for managing and monitoring a group of entities. viewer.entities is an EntityCollection. EntityCollection includes methods for managing entities such as add, remove, and removeAll.

Sometimes we need to update entities we previously created. All entity instances have a unique id that can be used to retrieve entities from the collection. We can assign an ID to an entity, otherwise one will be automatically generated.

1
2
3


viewer.entities.add({
 id : 'uniqueId'
});

Use getById to retrieve an entity. If no entity with the provided ID exists, undefined is returned.

1

var entity = viewer.entities.getById('uniqueId');

To get an entity or create a new one if it doesn’t exist, use getOrCreateEntity.

1

var entity = viewer.entities.getOrCreateEntity('uniqueId');

Manually create a new entity and use add to add it to the collection. This method will throw an exception if an entity with the same id already exists in the collection.

1
2
3
4


var entity = new Entity({
 id: 'uniqueId'
});
viewer.entities.add(entity);

EntityCollection emits events using the CollectionChanged event. Listeners are notified when entities are added, removed, or updated in the collection.

Use the [Geometry Showcase] (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Geometry and Appearances.html&label=Showcases) example in Sandcastle. Paste the following code after the line that creates the viewer.

1
2
3
4
5
6
7
8


function onChanged(collection, added, removed, changed){
 var msg = 'Added ids';
 for(var i = 0; i < added.length; i++) {
 msg += '\n' + added[i].id;
 }
 console.log(msg);
}
viewer.entities.collectionChanged.addEventListener(onChanged);

When running the example, you should see about 65 messages in the console, one for each call to viewer.entities.add.

When updating a large number of entities at once, it is more performant to queue the updates and send a single event at the end. This allows Cesium to process the required changes in a single pass. At the end of the example, call viewer.entities.suspendEvents before viewer.entities.add, and call viewer.entities.resumeEvents after. When running the demo again, we now get a single event containing all 65 entities. These calls are reference-counted, so multiple suspend and resume calls can be nested.

Picking

Picking (clicking to select an object) is an area where we need brief interaction with the base API. Use scene.pick and scene.drillPick to retrieve entities.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


/**
 * Returns the top-most entity at the provided window coordinates
 * or undefined if no entity is at that location.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity} The picked entity or undefined.
 */
function pickEntity(viewer, windowPosition) {
 var picked = viewer.scene.pick(windowPosition);
 if (defined(picked)) {
 var id = Cesium.defaultValue(picked.id, picked.primitive.id);
 if (id instanceof Cesium.Entity) {
 return id;
 }
 }
 return undefined;
};

/**
 * Returns the list of entities at the provided window coordinates.
 * The entities are sorted front to back by their visual order.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity[]} The picked entities or undefined.
 */
function drillPickEntities(viewer, windowPosition) {
 var i;
 var entity;
 var picked;
 var pickedPrimitives = viewer.scene.drillPick(windowPosition);
 var length = pickedPrimitives.length;
 var result = [];
 var hash = {};

 for (i = 0; i < length; i++) {
 picked = pickedPrimitives[i];
 entity = Cesium.defaultValue(picked.id, picked.primitive.id);
 if (entity instanceof Cesium.Entity && !Cesium.defined(hash[entity.id])) {
 result.push(entity);
 hash[entity.id] = true;
 }
 }
 return result;
};

Points, Billboards, and Labels

Create graphical points or labels by setting position, point, and label. For example, place a point at our favorite sports team’s home stadium.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


var viewer = new Cesium.Viewer('cesiumContainer');

var citizensBankPark = viewer.entities.add({
 name : 'Citizens Bank Park',
 position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 point : {
 pixelSize : 5,
 color : Cesium.Color.RED,
 outlineColor : Cesium.Color.WHITE,
 outlineWidth : 2
 },
 label : {
 text : 'Citizens Bank Park',
 font : '14pt monospace',
 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
 outlineWidth : 2,
 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 pixelOffset : new Cesium.Cartesian2(0, -9)
 }
});

viewer.zoomTo(viewer.entities);

By default, labels are horizontally and vertically centered. Since the label and point share the same position, they overlap on screen. To avoid this, specify the label origin as VerticalOrigin.BOTTOM and set the pixel offset to (0, -9). Replace the point with a billboard, which is a marker that always faces the user.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


var citizensBankPark = viewer.entities.add({
 position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 billboard : {
 image : '//cesiumjs.org/tutorials/Visualizing-Spatial-Data/images/Philadelphia_Phillies.png',
 width : 64,
 height : 64
 },
 label : {
 text : 'Citizens Bank Park',
 font : '14pt monospace',
 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
 outlineWidth : 2,
 verticalOrigin : Cesium.VerticalOrigin.TOP,
 pixelOffset : new Cesium.Cartesian2(0, 32)
 }
});

For more customization options, see the Sandcastle Labels and Billboards examples.

3D Models

CesiumJS supports creating 3D models via glTF (runtime asset format). You can find example models in the 3D models Sandcastle.

Set a position and URI to a glTF model to create a model entity.

1
2
3
4
5
6
7
8


var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
 position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
 model : {
 uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
 }
});
viewer.trackedEntity = entity;

By default, the model is upright and faces east. Control the model’s orientation by specifying a Quaternion for the Entity.orientation property. This controls the model’s heading, pitch, and roll.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var viewer = new Cesium.Viewer('cesiumContainer');
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var heading = Cesium.Math.toRadians(45.0);
var pitch = Cesium.Math.toRadians(15.0);
var roll = Cesium.Math.toRadians(0.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll));

var entity = viewer.entities.add({
 position : position,
 orientation : orientation,
 model : {
 uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
 }
});
viewer.trackedEntity = entity;

For more advanced model features, see the 3D Models tutorial. If you create your own models, be sure to check our post on glTF Tips for Artists.

The Property System

All values we define for entities are stored as property objects. For example, see the value of Wyoming’s outline:

1

console.log(typeof wyoming.polygon.outline);

outline is an instance of ConstantProperty. This tutorial uses a shorthand called implicit property conversion, which automatically takes raw values and creates the corresponding Property under the hood. Without this shorthand, we would have to write a longer version of the initial example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var wyoming = new Cesium.Entity();
wyoming.name = 'Wyoming';

var polygon = new Cesium.PolygonGraphics();
polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5));
polygon.outline = new Cesium.ConstantProperty(true);
polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
wyoming.polygon = polygon;

viewer.entities.add(wyoming);

Properties are used because the Entity API can represent not only constant values but also values that change over time. See the Callback Property and Interpolation Sandcastle examples for some time-dynamic properties.

Resources

For examples on how to style and create entities using GeoJSON and CZML, see the Cesium Workshop Tutorial.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 3 - Camera

Mon, 20 May 2019 15:43:53 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Camera

The Camera in CesiumJS controls the view of the scene. There are many ways to manipulate the Camera, such as rotate, zoom, pan, and flyTo. CesiumJS has mouse and touch events for handling Camera interactions, as well as an API for programmatically manipulating the camera. Learn how to use the Camera API and customize Camera controls.

Default Camera Behavior

Open the Hello World example in Sandcastle to experience the default camera controls. The default operations are as follows:

English Version

Mouse Action	3D	2D	Columbus View
Left click + drag	Rotate around the globe	Translate over the map	Translate over the map
Right click + drag	Zoom in and out	Zoom in and out	Zoom in and out
Middle wheel scrolling	Zoom in and out	Zoom in and out	Zoom in and out
Middle click + drag	Tilt the globe	No action	Tilt the map

Chinese Version

Mouse Action	3D	2D	Columbus View
Left click + drag	Rotate globe	Pan map	Pan map
Right click + drag	Zoom	Zoom	Zoom
Middle wheel	Zoom	Zoom	Zoom
Middle click + drag	Tilt globe	No action	Tilt globe

Use the setView function to set the Camera’s position and orientation. The destination can be a Cartesian3 or Rectangle, and the orientation can be heading/pitch/roll or direction/up. Heading, pitch, and roll are defined in radians. Heading is the rotation from local north with positive angles increasing eastward. Pitch is the rotation from the local east-north plane. Positive pitch is above the plane. Negative pitch is below the plane. Roll is the first rotation applied around the local east axis.

1
2
3
4
5
6
7
8


camera.setView({
 destination: new Cesium.Cartesian3(x, y, z),
 orientation: {
 heading: headingAngle,
 pitch: pitchAngle,
 roll: rollAngle
 }
});

1
2
3
4
5
6
7
8


viewer.camera.setView({
 destination: Cesium.Rectangle.fromDegrees(west, south, east, north),
 orientation: {
 heading: headingAngle,
 pitch: pitchAngle,
 roll: rollAngle
 }
});

All of the above parameters are optional. If not specified, parameter values will default to the current Camera position and orientation.

Custom Camera Mouse or Keyboard Events

Create our own event handlers to control Camera orientation based on mouse direction, and keyboard keys to move the Camera forward, left, right, up, and down. Start by disabling the default event handlers. Add the following code after (`javascript var viewe=…`):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
 canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

Create variables to record the current mouse position, then flag and track Camera movement:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var startMousePosition;
var mousePosition;
var flags = {
 looking: false,
 moveForward: false,
 moveBackward: false,
 moveUp: false,
 moveDown: false,
 moveLeft: false,
 moveRight: false
};

Add an event handler to set the flag and record the current mouse position when the left mouse button is clicked:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
 flags.looking = true;
 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
 mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
 flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

Create keyboard event handlers to toggle Camera movement flags. We set flags for the following keys and behaviors:

w Camera moves forward.
s Camera moves backward.
a Camera moves left.
d Camera moves right.
q Camera moves up.
e Camera moves down.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


function getFlagForKeyCode(keyCode) {
 switch (keyCode) {
 case 'W'.charCodeAt(0):
 return 'moveForward';
 case 'S'.charCodeAt(0):
 return 'moveBackward';
 case 'Q'.charCodeAt(0):
 return 'moveUp';
 case 'E'.charCodeAt(0):
 return 'moveDown';
 case 'D'.charCodeAt(0):
 return 'moveRight';
 case 'A'.charCodeAt(0):
 return 'moveLeft';
 default:
 return undefined;
 }
}

document.addEventListener('keydown', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = true;
 }
}, false);

document.addEventListener('keyup', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = false;
 }
}, false);

Now when a flag indicates an event has occurred (is true), we update the camera. We add an onTick listener to the clock:

1
2
3


viewer.clock.onTick.addEventListener(function(clock) {
 var camera = viewer.camera;
});

Next, we make the Camera point in the direction the mouse is pointing. Add the following code to the event listener function after the variable declaration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


if (flags.looking) {
 var width = canvas.clientWidth;
 var height = canvas.clientHeight;

 // Coordinate (0.0, 0.0) will be where the mouse was clicked.
 var x = (mousePosition.x - startMousePosition.x) / width;
 var y = -(mousePosition.y - startMousePosition.y) / height;

 var lookFactor = 0.05;
 camera.lookRight(x * lookFactor);
 camera.lookUp(y * lookFactor);
}

lookRight and lookUp only require an angle parameter representing the rotation angle. We convert the mouse coordinates to the range (-1.0, 1.0), with coordinate (0.0, 0.0) at the center of the canvas. The distance of the mouse from the center determines the rotation speed. Positions closer to the center move the Camera slower, while positions farther from the center move the Camera faster.

Finally, add code to move the Camera position. Then add the following code to the event handler function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// Change movement speed based on the distance of the camera to the surface of the ellipsoid.
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
var moveRate = cameraHeight / 100.0;

if (flags.moveForward) {
 camera.moveForward(moveRate);
}
if (flags.moveBackward) {
 camera.moveBackward(moveRate);
}
if (flags.moveUp) {
 camera.moveUp(moveRate);
}
if (flags.moveDown) {
 camera.moveDown(moveRate);
}
if (flags.moveLeft) {
 camera.moveLeft(moveRate);
}
if (flags.moveRight) {
 camera.moveRight(moveRate);
}

The moveForward, moveBackward, moveUp, moveDown, moveLeft, and moveRight methods only require a distance parameter (in meters) for moving the Camera. When each key is pressed, the Camera moves a fixed distance along the ellipsoid surface. The closer the Camera is to the ground, the slower it moves.

Complete code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116


var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
 canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

var startMousePosition;
var mousePosition;
var flags = {
 looking : false,
 moveForward : false,
 moveBackward : false,
 moveUp : false,
 moveDown : false,
 moveLeft : false,
 moveRight : false
};

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
 flags.looking = true;
 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
 mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
 flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

function getFlagForKeyCode(keyCode) {
 switch (keyCode) {
 case 'W'.charCodeAt(0):
 return 'moveForward';
 case 'S'.charCodeAt(0):
 return 'moveBackward';
 case 'Q'.charCodeAt(0):
 return 'moveUp';
 case 'E'.charCodeAt(0):
 return 'moveDown';
 case 'D'.charCodeAt(0):
 return 'moveRight';
 case 'A'.charCodeAt(0):
 return 'moveLeft';
 default:
 return undefined;
 }
}

document.addEventListener('keydown', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = true;
 }
}, false);

document.addEventListener('keyup', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = false;
 }
}, false);

viewer.clock.onTick.addEventListener(function(clock) {
 var camera = viewer.camera;

 if (flags.looking) {
 var width = canvas.clientWidth;
 var height = canvas.clientHeight;

 // Coordinate (0.0, 0.0) will be where the mouse was clicked.
 var x = (mousePosition.x - startMousePosition.x) / width;
 var y = -(mousePosition.y - startMousePosition.y) / height;

 var lookFactor = 0.05;
 camera.lookRight(x * lookFactor);
 camera.lookUp(y * lookFactor);
 }

 // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
 var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
 var moveRate = cameraHeight / 100.0;

 if (flags.moveForward) {
 camera.moveForward(moveRate);
 }
 if (flags.moveBackward) {
 camera.moveBackward(moveRate);
 }
 if (flags.moveUp) {
 camera.moveUp(moveRate);
 }
 if (flags.moveDown) {
 camera.moveDown(moveRate);
 }
 if (flags.moveLeft) {
 camera.moveLeft(moveRate);
 }
 if (flags.moveRight) {
 camera.moveRight(moveRate);
 }
});

Full code available here)

Camera

Camera represents the state of the Camera’s current position, orientation, reference frame, and view frustum. The Camera vectors above are orthogonal in each frame. The *move*_ and _zoom** functions translate the Camera’s position along its direction or a specified direction vector. The direction remains fixed.

The *look*_ and _twist** functions rotate the Camera’s direction, such as up or right vectors. The position remains fixed.

The *rotate** functions rotate the position and direction based on a given vector.

Functions set the Camera position and orientation given an extent or position and target. For example:

1
2
3
4
5
6


var west = Cesium.Math.toRadians(-77.0);
var south = Cesium.Math.toRadians(38.0);
var east = Cesium.Math.toRadians(-72.0);
var north = Cesium.Math.toRadians(42.0);
var extent = new Cesium.Extent(west, south, east, north);
camera.viewExtent(extent, Cesium.Ellipsoid.WGS84);

Create a ray variable by picking the Camera’s position through a pixel. This method can be used for picking, for example:

1
2
3


// find intersection of the pixel picked and an ellipsoid
var ray = camera.getPickRay(mousePosition);
var intersection = Cesium.IntersectionTests.rayEllipsoid(ray, Cesium.Ellipsoid.WGS84);

Screen space camera controller

ScreenSpaceCameraController converts user input (such as mouse and touch) from window coordinates to Camera movement. It contains properties for enabling and disabling different types of input, modifying the amount of inertia, and minimum and maximum zoom distances.

Resources

View camera example code in Sandcastle:

API documentation:

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

[CesiumJS]Tianditu Application Development License Application Guide - Update Your Tianditu Data Interface ASAP

Thu, 17 Jan 2019 02:54:47 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

The National Geographic Information Public Service Platform “Tianditu” 2018 edition has upgraded the Tianditu application development process. The Tianditu API and service interfaces have been fully upgraded to the tianditu.gov.cn government domain, supporting HTTP/HTTPS protocols. The original service domain tianditu.com will continue to be retained.

To ensure the stability and reliability of Tianditu’s geographic information public services and to better support developers with geographic information application development, starting immediately, all Tianditu API and service interface calls require a development license (Key). You can register and apply for free at the Tianditu API website console. Please make adjustments as soon as possible. Tianditu will stop supporting API and service calls without a development license (Key) on January 1, 2019. Before that date, unauthorized APIs and services will continue to work normally.

Please register appropriately as an individual or organization user. Enterprise and institutional users with higher service call volume requirements should register as organizational users and become certified enterprise developers.

Original link:
http://lbs.tianditu.gov.cn/authorization/authorization.html

Cesium Chinese Community QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

[CesiumJS]Cesium Intermediate Tutorial 2 - Imagery Layers

Sun, 23 Dec 2018 12:19:39 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Cesium supports rendering and adding high-resolution imagery (map) layers from several standard services. Layers can be ordered and blended together. The brightness, contrast, gamma, hue, and saturation of each layer can be dynamically changed. This tutorial introduces the concept of imagery layers and the related Cesium APIs.

Quick Start

Let’s skip the details for now and write some code to add imagery layers. Open the Hello World example in Sandcastle. This example creates a Viewer widget, which renders Bing Maps by default. We can specify a different base layer by providing additional parameters to the Viewer constructor. Let’s use a layer from Esri ArcGIS MapServer:

1
2
3
4
5
6


var viewer = new Cesium.Viewer('cesiumContainer', {
 imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
 url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
 }),
 baseLayerPicker : false
});

After modifying the example, press F8 to run:

We can scroll the mouse wheel to zoom in and out to see the actual imagery streaming in action.

Next, add another layer: NASA Black Marble imagery based on Tile Map Service (TMS):

1
2
3
4
5
6


var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
 url : '//cesiumjs.org/tilesets/imagery/blackmarble',
 maximumLevel : 8,
 credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

Because the Black Marble layer was added last and covers the entire globe, it covers the Esri layer. We could move the Black Marble layer to the bottom with layers.lower(blackMarble);, but to better understand the relationship between these two layers, let’s blend it with the Esri layer:

1

blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.

Next, increase the brightness of the lights:

1

blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.

Finally, add a single image as a third layer for a specific extent:

1
2
3
4


layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
 url : '../images/Cesium_Logo_overlay.png',
 rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

Complete code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


var viewer = new Cesium.Viewer('cesiumContainer', {
 imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
 url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
 }),
 baseLayerPicker : false
});

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
 url : '//cesiumjs.org/tilesets/imagery/blackmarble',
 maximumLevel : 8,
 credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.

blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
 url : '../images/Cesium_Logo_overlay.png',
 rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

View the complete example in Sandcastle.

Existing Imagery Layers

The ion Assets tab in Sandcastle contains imagery layer applications hosted by Cesium ion, which can be used in Cesium applications by adding just a few lines of code.

ImageryProvider

High-resolution imagery like the first two layers used above is too large to fit in memory or even on a single disk, so the imagery is divided into smaller images called tiles that can be streamed to the client based on the view. Cesium supports requesting tiles using ImageryProvider with several standards. Most ImageryProviders use REST interfaces over HTTP to request tiles. ImageryProviders differ based on the format and organization of the requests. Cesium includes the following built-in ImageryProviders:

Web Map Service (WMS) - An OGC standard for requesting map tiles from distributed geospatial databases. In Cesium, see WebMapServiceImageryProvider.
Tile Map Service (TMS) - A REST interface for accessing tiles. Tiles can be generated using MapTiler or GDAL2Tiles. See TileMapServiceImageryProvider.
OpenGIS Web Map Tile Service (WMTS) - An OGC standard for serving pre-rendered georeferenced tiles over the internet. In Cesium, see WebMapTileServiceImageryProvider.
OpenStreetMap - Access OpenStreetMap tiles or any Slippy map tiles. There are several ways to host these tiles. In Cesium, see createOpenStreetMapImageryProvider.
Bing Maps - Use the Bing Maps REST Services to access tiles. Create Bing Maps keys at https://www.bingmapsportal.com/. In Cesium, see BingMapsImageryProvider.
Esri ArcGIS MapServer - Use the ArcGIS Server REST API to access tiles on an ArcGIS MapServer. In Cesium, see ArcGisMapServerImageryProvider.
Google Earth Enterprise - Provides access to imagery stored in Google Earth Enterprise servers. In Cesium, see GoogleEarthImageryProvider.
Mapbox - Use the Mapbox API to access tiles. Create an account and provide an access token. In Cesium, see MapboxImageryProvider.
Standard image files - Create imagery layers from images. In Cesium, see SingleTileImageryProvider.
Custom tiling schemes - Using UrlTemplateImageryProvider, we can connect to a wide variety of imagery sources by using URL templates. For example, a TMS URL template is //cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.
Tile coordinates - Shows how the globe is divided into tiles in a particular tiling scheme by drawing a border around each tile and labeling it with its level, X, and Y coordinates.

We can access other imagery services by implementing the ImageryProvider interface. If you do so and think it’s generally useful, please contribute it to Cesium for everyone’s benefit.

See the reference documentation to learn how to construct a specific imagery provider. Let’s look at SingleTileImageryProvider since many imagery providers share its constructor properties:

url - The URL of the image. Like many imagery providers, this is the only required property. In other imagery providers, this URL points to the server or the root URL of the service.
extent - Optional. The longitude/latitude rectangle that the image should cover. By default, it covers the entire globe.
credit - Optional. A string credit for the data source, displayed on the canvas. Some imagery providers, such as BingMapsImageryProvider and ArcGIS Server REST API, can retrieve credits or logos directly from their services.
proxy - Optional. A proxy for requesting the service, which can enable cross-origin resource sharing.

For security reasons, today’s web browsers work hard to prevent JavaScript code from reading image pixels from different sites. In particular, if a WebGL application like Cesium accesses images from a different hostname or port and the server doesn’t explicitly allow the images to be used this way, using those images as textures is prohibited. The server indicates that images don’t contain confidential information and that it’s safe for other sites to read their pixels by including Cross-Origin Resource Sharing (CORS) headers in the HTTP response.

Unfortunately, not all imagery services support CORS. For those that don’t, a proxy server with the same origin as the website hosting Cesium must be used. When using such a proxy, for the web browser and Cesium client, the tiles appear as though they come from the same origin as the Cesium-based website. To use a proxy with an imagery provider, use the proxy property when constructing the imagery provider. Cesium includes a simple proxy written in Node.js for development purposes.

1
2
3
4


layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
 url : '//server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
 proxy : new Cesium.DefaultProxy('/proxy/')
}));

If you’re hosting public imagery, we encourage enabling CORS as described in this article rather than using a proxy.

ImageryProvider vs. Layers

So far, we haven’t explicitly distinguished between ImageryProvider and layers. An ImageryProvider requests imagery using a specific service, while a layer represents the displayed imagery from an ImageryProvider. The code:

1

var layer = layers.addImageryProvider(imageryProvider);

is shorthand for:

1
2


var layer = new ImageryLayer(imageryProvider);
layers.add(layer);

We typically construct an imagery provider only to create a layer, then we use its properties such as show, alpha, brightness, and contrast. See ImageryLayer. Decoupling imagery providers from layers makes it easy to add new imagery providers.

Like the layers variable in the examples above, the layer collection determines the drawing order of layers. Layers are drawn from bottom to top in the order they were added. The layer collection is operated on using functions such as add, remove, and get, like any other collection in Cesium. Additionally, layers can be reordered using raise, raiseToTop, lower, and lowerToBottom. See ImageryLayerCollection.

Resources

Imagery layers examples from Sandcastle:

Imagery Layers - Code samples from this tutorial
Imagery Layers Manipulation - Layers from multiple data sources with independent transparency adjustment
Imagery Adjustment - Adjust layer brightness, contrast, gamma, hue, and saturation

Additional reference documentation:

Cesium Chinese Community QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

[CesiumJS]Cesium Intermediate Tutorial 1 - Spatial Data Visualization (Part 1)

Thu, 01 Nov 2018 09:09:11 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

This tutorial will teach readers how to use Cesium’s Entity API to draw spatial data such as points, markers, labels, lines, models, shapes, and volumes. No prior knowledge of Cesium is required, but if you have no experience at all, you may want to start with the “Getting Started Tutorial”.

What is the Entity API?

Cesium has a rich API for spatial data, which can be divided into two categories: a low-level API oriented toward graphics developers (commonly called the Primitive API) and a high-level API for data-driven visualization (called the Entity API).

The primary goal of the Primitive API is to expose the minimal amount of abstraction needed for the task at hand. It expects us to think like graphics programmers and use graphics terminology. Its structure is designed to provide the most performant and flexible implementation for a given type of visualization, rather than API consistency. Loading a model is different from creating a billboard, and both are completely different from creating a polygon. Each type of visualization has its own unique characteristics. Furthermore, they each have different performance characteristics and require following different best practices. While it is powerful and flexible, most applications provide higher-level service interfaces than the Primitive API’s level of abstraction.

The purpose of the Entity API is to expose a set of consistently designed high-level objects that aggregate related visualization and information into a unified data structure we call an Entity. It lets us focus on presenting our data rather than worrying about the underlying mechanisms of visualization. It also provides constructs that make it easy to build complex, time-dynamic visualizations that naturally fit with static data. While the Entity API actually uses the Primitive API behind the scenes, this is an implementation detail we (almost) never need to concern ourselves with. By applying various heuristics to the data we provide, the Entity API is able to deliver flexible, high-performance visualization while exposing a consistent, easy-to-learn, and easy-to-use interface.

Our First Entity

One of the basic ways to learn the Entity API is by looking at some code. To keep things simple, we’ll build on CesiumSandcastle’s Hello World example. If you’re developing Cesium locally, feel free to use your own application.

Suppose we want to add a polygon of the US state Wyoming from a list of longitudes and latitudes. (Wyoming was chosen because it’s a simple polygon.) We can copy and paste the following code into Sandcastle:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


var viewer = new Cesium.Viewer('cesiumContainer');

var wyoming = viewer.entities.add({
 name : 'Wyoming',
 polygon : {
 hierarchy : Cesium.Cartesian3.fromDegreesArray([
 -109.080842,45.002073,
 -105.91517,45.002073,
 -104.058488,44.996596,
 -104.053011,43.002989,
 -104.053011,41.003906,
 -105.728954,40.998429,
 -107.919731,41.003906,
 -109.04798,40.998429,
 -111.047063,40.998429,
 -111.047063,42.000709,
 -111.047063,44.476286,
 -111.05254,45.002073]),
 height : 0,
 material : Cesium.Color.RED.withAlpha(0.5),
 outline : true,
 outlineColor : Cesium.Color.BLACK
 }
});

viewer.zoomTo(wyoming);

Click the Run button (or press F8) to see the following image:

Because one of our goals is to make Cesium code easy to understand, hopefully this is self-explanatory. We created the Viewer widget, which serves as the foundation for almost all Cesium applications, then added a new Entity via viewer.entities.add. The object we pass to add is just an options parameter providing initial values. The return value is the actual entity instance. Finally, we call viewer.zoomTo to make sure the entity is in view. There are many entity options available, but for now we specify a polygon with a semi-transparent red interior and a black outline. We also give the entity a display name of “Wyoming”.

Shapes and Volumes

With the basic knowledge of creating polygons, and thanks to the homogeneity of the Entity API, we can now create various graphics simply by using the Sandcastle examples as reference. Below is a complete list of supported shapes and volumes.

Materials and Outlines

Regardless of their geometric definition, all shapes and volumes have a common set of properties that control their appearance. The fill property is a boolean that specifies whether the interior surface is filled, while the outline property controls whether the shape’s edges are outlined. When fill is set to true, the material property determines what the fill looks like. In the following example, let’s create a semi-transparent blue ellipse. By default, fill is true and outline is false, so we only need to specify the material.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var entity = viewer.entities.add({
 position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
 ellipse : {
 semiMinorAxis : 250000.0,
 semiMajorAxis : 400000.0,
 material : Cesium.Color.BLUE.withAlpha(0.5)
 }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse; // For upcoming examples

Image

We can also specify the material as an image URL:

1

ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg';

In both cases above, a ColorMaterialProperty or ImageMaterialProperty is automatically created for us during assignment. For more complex materials, we need to create a material property instance ourselves. Currently, entity shapes and volumes support color, image, checkerboard, stripe, and grid materials.

Checkerboard

1
2
3
4
5


ellipse.material = new Cesium.CheckerboardMaterialProperty({
 evenColor : Cesium.Color.WHITE,
 oddColor : Cesium.Color.BLACK,
 repeat : new Cesium.Cartesian2(4, 4)
});

Stripe

1
2
3
4
5


ellipse.material = new Cesium.StripeMaterialProperty({
 evenColor : Cesium.Color.WHITE,
 oddColor : Cesium.Color.BLACK,
 repeat : 32
});

Grid

1
2
3
4
5
6


ellipse.material = new Cesium.GridMaterialProperty({
 color : Cesium.Color.YELLOW,
 cellAlpha : 0.2,
 lineCount : new Cesium.Cartesian2(8, 8),
 lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

Outline

Unlike the fill property, outline does not have a corresponding material, but instead relies on two separate properties: outlineColor and outlineWidth. outlineWidth only works on non-Windows systems such as Android, iOS, Linux, and OS X. This is due to limitations in how WebGL is implemented in all three major browser engines on Windows.

1
2
3
4


ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

Polyline

Polylines are a special case because they don’t have fill or outline properties. Instead, they rely on specialized materials to replace colors. Because of these special materials, polylines with different widths and outline widths will work on all systems.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var entity = viewer.entities.add({
 polyline : {
 positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
 -77.1, 35]),
 width : 5,
 material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

var polyline = entity.polyline // For upcoming examples

Polyline Outline

1
2
3
4
5


polyline.material = new Cesium.PolylineOutlineMaterialProperty({
 color : Cesium.Color.ORANGE,
 outlineWidth : 3,
 outlineColor : Cesium.Color.BLACK
});

Polyline Glow

1
2
3
4


polyline.material = new Cesium.PolylineGlowMaterialProperty({
 glowPower : 0.2,
 color : Cesium.Color.BLUE
});

Height and Extrusion

All shapes that overlay the globe – currently circles, ellipses, polygons, and rectangles – can also be placed at an altitude or extruded into a volume. In both cases, the shape or volume still conforms to the curvature of the Earth beneath it.

For height, all we need to do is set the height property on the corresponding graphics object, which is the same for all shapes listed above. This might be a good time to mention that Cesium always uses meters, radians, and seconds as units, unless a function explicitly indicates otherwise, such as Cartesian3.fromDegrees. The following line of code elevates the polygon to 250,000 meters above the Earth.

1

wyoming.polygon.height = 250000;

Extruding a shape into a volume is equally easy – we just need to set the extrudedHeight property. The volume will be generated between height and extrudedHeight. If height is undefined, the volume starts from 0. To create a volume that starts at 200,000 meters and extends to 250,000 meters, we can use the following code. This of course means the volume itself is 50,000 meters tall.

1
2


wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;

Cesium Chinese Community QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

[CesiumJS]Cesium Chinese Website Daily UV Exceeds 100

Wed, 10 Oct 2018 04:48:38 +0000

From 2018.06.22 to 2018.10.10, after less than 4 months of operation, the community - Cesium Chinese Website finally exceeded 100 daily unique visitors. Very excited, marking this milestone.

[CesiumJS]Cesium Getting Started 13 - Extras

Thu, 16 Aug 2018 07:56:51 +0000

The remaining code just adds some additional visualization options. Similar to our previous interactions with HTML elements, we can attach listener functions to toggle shadows and neighborhood polygon visibility.

Let’s start by creating a simple method to toggle the neighborhood polygons. In general, we can hide an entity by setting visibility with Entity.show. However, this only sets visibility for a single entity, and we want to hide or show all neighborhood entities at once.

We can achieve this by adding all neighborhood entities to a parent entity, as shown in this example, or simply by using the show property of the EntityCollection. Then we can set visibility for all child entities at once by changing neighborhoods.show.

1
2
3
4
5


var neighborhoodsElement = document.getElementById('neighborhoods');

neighborhoodsElement.addEventListener('change', function (e) {
 neighborhoods.show = e.target.checked;
});

We can do something similar to toggle shadow visibility:

1
2
3
4
5


var shadowsElement = document.getElementById('shadows');

shadowsElement.addEventListener('change', function (e) {
 viewer.shadows = e.target.checked;
});

Finally, since 3D Tiles may not load immediately, we can also add a loading indicator that is only removed when the tileset has finished loading (and therefore the promise has resolved).

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/166.html | China fast access: http://cesium.coinidea.com/topic/166.html

[CesiumJS]Cesium Getting Started 12 - Camera Modes

Thu, 16 Aug 2018 07:55:47 +0000

To showcase our drone flight, let’s experiment with camera modes. We’ll keep it simple with two basic camera modes that the user can switch between:

Free Mode : Default camera controls.
Drone Mode : Makes the camera follow the drone through the flight at a fixed distance.

Free mode doesn’t require any code since it uses the default controls. As for drone follow mode, we can use the camera’s built-in entity tracking feature to position the camera and orient it toward the drone with an offset. This keeps the camera at a fixed offset from the specified entity even while it’s moving. To track an entity, we simply set viewer.trackedEntity.

To switch to free camera mode, we can set viewer.trackedEntity to undefined, then use camera.flyTo() to return to our home view.

Here are the camera mode functions:

1
2
3
4
5
6
7
8
9


// Create a follow camera by tracking the drone entity
function setViewMode() {
 if (droneModeElement.checked) {
 viewer.trackedEntity = drone;
 } else {
 viewer.trackedEntity = undefined;
 viewer.scene.camera.flyTo(homeCameraView);
 }
}

To attach this to HTML input, we can attach this function to the change event on the appropriate elements:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var freeModeElement = document.getElementById('freeMode');
var droneModeElement = document.getElementById('droneMode');

// Create a follow camera by tracking the drone entity
function setViewMode() {
 if (droneModeElement.checked) {
 viewer.trackedEntity = drone;
 } else {
 viewer.trackedEntity = undefined;
 viewer.scene.camera.flyTo(homeCameraView);
 }
}

freeModeElement.addEventListener('change', setCameraMode);
droneModeElement.addEventListener('change', setCameraMode);

Finally, entities are automatically tracked when the user double-clicks on them. If the user starts tracking the drone by clicking, we can add some handling to automatically update the UI:

1
2
3
4
5
6


viewer.trackedEntityChanged.addEventListener(function() {
 if (viewer.trackedEntity === drone) {
 freeModeElement.checked = false;
 droneModeElement.checked = true;
 }
});

Here are our two camera modes – we can now freely switch to the drone camera view, which looks like this:

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/165.html | China fast access: http://cesium.coinidea.com/topic/165.html

[CesiumJS]Cesium Getting Started 11 - Interactivity

Thu, 16 Aug 2018 07:52:08 +0000

Finally, let’s add some mouse interaction. To improve the visibility of our geocache markers, we can change their style to highlight them when the user hovers over a marker.

To achieve this, we’ll use picking, a Cesium feature that returns data from the 3D scene given a pixel position on the viewer canvas.

There are several types of picking:

Scene.pick : Returns an object containing the primitive at the given window position.
Scene.drillPick : Returns a list of objects containing all primitives at the given window position.
Globe.pick : Returns the intersection point of a given ray with the terrain.

Here are some examples of picking operations:

Since we want to trigger our highlight effect on hover, we first need to create a mouse action handler. For this, we’ll use ScreenSpaceEventHandler, a set of handlers that trigger specified functions on user input actions. ScreenSpaceEventHandler.setInputAction() listens for a user action type ScreenSpaceEventType and runs a specific function, passing the user action as a parameter. Here, we’ll pass a function that takes movement as input:

1
2


var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Next, let’s write our highlight function. The handler will pass in mouse movement, from which we can extract a window position to use with pick(). If the pick returns a billboard object, we know we’re hovering over a marker. Then, using what we know about Entity styling, we can apply a highlight style.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// If the mouse is over a point of interest, change the entity billboard scale and color
handler.setInputAction(function(movement) {
 var pickedPrimitive = viewer.scene.pick(movement.endPosition);
 var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
 // Highlight the currently picked entity
 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
 pickedEntity.billboard.scale = 2.0;
 pickedEntity.billboard.color = Cesium.Color.ORANGERED;
 }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

This successfully triggers the highlight style change on the markers. However, you’ll notice that when we move the cursor away, the markers remain highlighted. We can fix this by tracking the last marker and restoring its original style.

Here is the complete function with marker highlighting and unhighlighting working:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// If the mouse is over a point of interest, change the entity billboard scale and color
var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
 var pickedPrimitive = viewer.scene.pick(movement.endPosition);
 var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
 // Unhighlight the previously picked entity
 if (Cesium.defined(previousPickedEntity)) {
 previousPickedEntity.billboard.scale = 1.0;
 previousPickedEntity.billboard.color = Cesium.Color.WHITE;
 }
 // Highlight the currently picked entity
 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
 pickedEntity.billboard.scale = 2.0;
 pickedEntity.billboard.color = Cesium.Color.ORANGERED;
 previousPickedEntity = pickedEntity;
 }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

That’s it! We’ve now successfully added a mouse movement handler and hover behavior for marker entities.

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/164.html | China fast access: http://cesium.coinidea.com/topic/164.html

[CesiumJS]Cesium Getting Started 10 - 3D Tiles

Thu, 16 Aug 2018 07:49:55 +0000

Our team sometimes describes Cesium as a 3D game engine for real-world data. However, working with real-world data is much more difficult than working with typical video game assets, because real data can be incredibly high-resolution and requires precise visualization. Fortunately, Cesium has collaborated with the open-source community to develop 3D Tiles, an open specification for streaming massive heterogeneous 3D geospatial datasets.

Using streaming technology conceptually similar to Cesium’s terrain and imagery, 3D Tiles makes it possible to view enormous models that would otherwise be impossible to interactively view, including building datasets, CAD (or BIM) models, point clouds, and photogrammetry models.

The 3D Tiles Inspector is a debugging tool that provides the ability to look under the hood.

Here are some demos showcasing different 3D Tiles formats:

In our application, we’ll use Cesium3DTileset to add realism to our visualization by displaying full 3D models of all buildings in New York! This NYC tileset is hosted on Cesium Ion, and we can add it using IonResource.fromAssetId:

1
2


// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

You may notice that the buildings are not correctly positioned on the ground plane. Fortunately, this is easy to fix. We can adjust the tileset’s position by modifying the model matrix (modelMatrix).

We can find the current offset of the model modelMatrix from the ground by converting the tileset’s bounding sphere to Cartographic, then adding the desired offset and resetting the model matrix.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// Adjust the tileset height so its not floating above terrain
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
 // Position tileset
 var boundingSphere = tileset.boundingSphere;
 var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
 var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});

Now we have 1.1 million building models streaming in our scene.

3D Tiles also allows us to adjust our styling using the 3D Tiles styling language. A 3D Tiles style defines expressions for evaluating the color (RGB and transparency) and display of a Cesium3DTileFeature, which is part of the tileset, such as an individual building in the city. Styles are typically based on feature properties stored in the tile’s batch table. Feature properties can be height, name, coordinates, construction date, or anything else built into the tileset asset. Styles are defined in JSON, and expressions are written in a small subset of JavaScript designed for styling. Additionally, the styling language provides a set of built-in functions to support common math operations.

An example of Cesium3DTileStyle:

1
2
3
4


var defaultStyle = new Cesium.Cesium3DTileStyle({
 color : "color('white')",
 show : true
});

The above code makes our NYC tileset white and always visible. To actually set the tileset’s style, we set city.style:

1

city.style = defaultStyle;

We can also define as many styles as we like. For example, making the buildings transparent:

1
2
3
4


var transparentStyle = new Cesium.Cesium3DTileStyle({
 color : "color('white', 0.3)",
 show : true
});

Applying the same style to every feature in our tileset is just scratching the surface. We can also use properties specific to each feature to determine styling. Here’s an example of coloring buildings based on their height:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var heightStyle = new Cesium.Cesium3DTileStyle({
 color : {
 conditions : [
 ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
 ["${height} >= 200", "rgb(102, 71, 151)"],
 ["${height} >= 100", "rgb(170, 162, 204)"],
 ["${height} >= 50", "rgb(224, 226, 238)"],
 ["${height} >= 25", "rgb(252, 230, 200)"],
 ["${height} >= 10", "rgb(248, 176, 87)"],
 ["${height} >= 5", "rgb(198, 106, 11)"],
 ["true", "rgb(127, 59, 8)"]
 ]
 }
});

To switch between styles, we can add more code to listen to HTML input:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


var tileStyle = document.getElementById('tileStyle');
function set3DTileStyle() {
 var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
 if (selectedStyle === 'none') {
 city.style = defaultStyle;
 } else if (selectedStyle === 'height') {
 city.style = heightStyle;
 } else if (selectedStyle === 'transparent') {
 city.style = transparentStyle;
 }
}

tileStyle.addEventListener('change', set3DTileStyle);

For more examples of 3D Tiles, how to use and adjust styles, check out the 3D Tiles sandcastle demos.

3D Tiles examples:

If you have data and need help converting it to 3D Tiles, stay tuned for updates on the Cesium Ion platform! Subscribe for updates here.

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/163.html | China fast access: http://cesium.coinidea.com/topic/163.html

[CesiumJS]Cesium Getting Started 9 - Loading and Styling Entities

Wed, 15 Aug 2018 07:42:41 +0000

Now that we have set up the Viewer configuration, imagery, and terrain for our application, we can add the main focus of our application – geocache data.

For visualization convenience, Cesium supports the popular vector formats GeoJSON and KML, as well as a format our team open-sourced called CZML, which we specifically developed for describing Cesium scenes.

Regardless of the initial format, all spatial data in Cesium is represented using the Entity API. The Entity API provides an efficient and flexible visualization method for Cesium rendering. A Cesium Entity is a data object that can be paired with styled graphical representations and positioned in space and time. Many simple Entity examples are provided in the test sandbox. To get up to speed on the Entity API, take a break from this application and read the Visualizing Spatial Data tutorial.

Here are some examples of different entity types:

Once you understand what an Entity looks like, loading datasets with Cesium becomes easy to understand. To read a data file, you need to create a DataSource appropriate for the data format, which will parse the data file hosted at the specified URL and create an EntityCollection containing an Entity for each geospatial object in the dataset. DataSource just defines an interface – the exact type of data source you need will depend on the data format. For example, KML uses KmlDataSource:

1
2
3
4
5
6
7
8


var kmlOptions = {
 camera : viewer.scene.camera,
 canvas : viewer.scene.canvas,
 clampToGround : true
};
// Load geocache points of interest from a KML file
// Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);

The above code reads our sample geocache points from a KML file, calling KmlDataSource.load(options) with some configuration. For a KmlDataSource, the camera and canvas options are required. The clampToGround option enables ground clamping, a popular configuration for making ground geometry entities like polygons and ellipses conform to terrain rather than following the WGS84 ellipsoid surface.

Since this data is loaded asynchronously, KmlDataSource returns a Promise that will contain all our newly created entities.

If you’re not familiar with the Promise API for asynchronous functions, “asynchronous” here basically means you should do what you need with the data in the provided callback function using .then. To actually add this entity collection to the scene, we must wait until the promise is resolved, then add the KmlDataSource to viewer.dataSources:

1
2
3
4
5


// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
});

By default, these newly created entities have useful features. Clicking will display an Infobox with metadata related to the entity, and double-clicking will zoom to and view the entity. To stop viewing that entity, click the “home” button, or click the “fly out” camera icon on the Infobox. Next, we’ll add custom styling to improve our application’s appearance.

For KML and CZML files, declarative styles can be established within the file. However, for this application, let’s practice manually styling our entities. To do this, we’ll take an approach similar to this styling example, waiting for our data source to load, then iterating through all entities in the data source collection, modifying and adding properties. By default, our geocache point markers are created as Billboards and Labels, so to modify the appearance of these entities, we do this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);

 // Get the array of entities
 var geocacheEntities = dataSource.entities.values;

 for (var i = 0; i < geocacheEntities.length; i++) {
 var entity = geocacheEntities[i];
 if (Cesium.defined(entity.billboard)) {
 // Entity styling code here
 }
 }
});

We can improve the appearance of the markers by adjusting their anchor points, removing labels to reduce clutter, and setting a distanceDisplayCondition so that only points within a certain distance from the camera are visible.

1
2
3
4
5
6
7
8
9


// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
 // Adjust the vertical origin so pins sit on terrain
 entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
 // Disable the labels to reduce clutter
 entity.label = undefined;
 // Add distance display condition
 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
}

For more help on distanceDisplayCondition, see the sandcastle example.

Next, let’s improve the Infobox for each geocache entity. The Infobox title is the entity name, and the content is the entity description, displayed as HTML.

You’ll notice the default description isn’t very helpful. Since we’re displaying geocache locations, let’s update them to show the longitude and latitude of each point.

First, we convert the entity’s position to cartographic, then read the longitude and latitude from the Cartographic and add them to the description in an HTML table.

When clicked, our geocache entities will now display a well-formatted Infobox with just the data we need.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
 // Adjust the vertical origin so pins sit on terrain
 entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
 // Disable the labels to reduce clutter
 entity.label = undefined;
 // Add distance display condition
 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
 // Compute longitude and latitude in degrees
 var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
 var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
 var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
 // Modify description
 // Modify description
 var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
 '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
 '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
 '</tbody></table>';
 entity.description = description;
}

Our geocache markers should now look like this:

For our geo application, it would also be helpful to visualize the neighborhoods of specific points. Let’s try loading a GeoJSON file containing polygons for each New York neighborhood. Loading GeoJSON files is very similar to the loading process we just used for KML. But in this case, we use GeoJsonDataSource. Like the previous data source, we need to add it to viewer.dataSources to actually add the data to the scene.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var geojsonOptions = {
 clampToGround : true
};
// Load neighborhood boundaries from KML file
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/neighborhoods.geojson', geojsonOptions);

// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
});

Let’s adjust the loaded neighborhood polygons. Just like the billboard styling we just did, we first iterate through the neighborhood data source entities after the data source loads, this time checking if each entity’s polygon is defined:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
 neighborhoods = dataSource.entities;

 // Get the array of entities
 var neighborhoodEntities = dataSource.entities.values;
 for (var i = 0; i < neighborhoodEntities.length; i++) {
 var entity = neighborhoodEntities[i];

 if (Cesium.defined(entity.polygon)) {
 // entity styling code here
 }
 }
});

Since we’re displaying neighborhoods, let’s rename each entity to use the neighborhood as its name. The neighborhood from the original GeoJSON file is stored as a property. Cesium stores GeoJSON properties in entity.properties, so we can set the neighborhood name like this:

1
2
3
4


// entity styling code here

// Use geojson neighborhood value as entity name
entity.name = entity.properties.neighborhood;

Instead of making all neighborhoods the same color, we can assign each polygon a new color material with a random color using ColorMaterialProperty and Color.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// entity styling code here

// Set the polygon material to a random, translucent color.
entity.polygon.material = Cesium.Color.fromRandom({
 red : 0.1,
 maximumGreen : 0.5,
 minimumBlue : 0.5,
 alpha : 0.6
});

// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

Finally, let’s generate a Label with some basic styling options for each entity. To keep things clean, we can use disableDepthTestDistance to make Cesium always render the labels above any 3D objects that might occlude them.

However, note that labels are always positioned at entity.position. A Polygon is created with an undefined position because it has a list of positions defining the polygon boundary. We can generate a position by taking the center of the polygon positions:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// entity styling code here

// Generate Polygon position
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// Generate labels
entity.label = {
 text : entity.name,
 showBackground : true,
 scale : 0.6,
 horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
 disableDepthTestDistance : 100.0
};

This gives us labeled polygons that look like this:

Finally, let’s add a high-tech perspective to our NYC geocaches by adding a drone flight over the city.

Since the flight path is just a series of positions over time, we can add this data from a CZML file. CZML is a format for describing time-dynamic graphical scenes, primarily for display in web browsers running Cesium. It describes lines, points, billboards, models, and other graphical primitives, and specifies how they change over time. CZML is to Cesium what KML is to Google Earth – a standard format that allows most Cesium features to be used through a declarative styling language (in this case, a JSON schema).

Our CZML file defines an entity (visualized as a point by default) whose position is defined as a series of positions at different time points. There are several property types available in the Entity API for handling time-dynamic data. See the demo example below:

Property Types Demo

1
2
3
4
5
6


// Load a drone flight path from a CZML file
var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');

dronePromise.then(function(dataSource) {
 viewer.dataSources.add(dataSource);
});

The CZML file uses Cesium to display a drone flight. The path is a property that shows the entity’s position over time. A path visualizes discrete points connected into a continuous line using interpolation. Finally, let’s improve the appearance of the drone flight. First, instead of simply displaying a point, we can load a 3D model to represent our drone and attach it to the entity.

Cesium supports loading 3D models based on glTF (GL Transmission Format), an open specification developed by the Cesium team together with the Khronos Group, designed to efficiently load 3D models for applications by minimizing file size and runtime processing. Don’t have a glTF model? We provide an online converter to convert COLLADA and OBJ files to glTF format.

Let’s load a drone Model with nice physically-based shading and some animations:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var drone;
dronePromise.then(function(dataSource) {
 viewer.dataSources.add(dataSource);
 // Get the entity using the id defined in the CZML data
 drone = dataSource.entities.getById('Aircraft/Aircraft1');
 // Attach a 3D model
 drone.model = {
 uri : './Source/SampleData/Models/CesiumDrone.gltf',
 minimumPixelSize : 128,
 maximumScale : 1000,
 silhouetteColor : Cesium.Color.WHITE,
 silhouetteSize : 2
 };
});

Now our model looks good, but unlike the original point, the drone model has a direction, and it looks strange when the drone moves forward without orientation. Fortunately, Cesium provides a VelocityOrientationProperty, which automatically calculates orientation based on positions sampled before and after the entity:

1
2


// Add computed orientation based on sampled positions
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);

Now our drone model will behave as expected.

One more thing we can do to improve the appearance of our drone flight: from a distance, it may not be obvious, but the drone’s path is made up of line segments that look unnatural. This is because Cesium uses linear interpolation by default to construct the path from sampled points. However, interpolation options can be configured.

Interpolation Demo

For a smoother flight path, we can change the interpolation options like this:

1
2
3
4
5


// Smooth path interpolation
drone.position.setInterpolationOptions({
 interpolationDegree : 3,
 interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/161.html | China fast access: http://cesium.coinidea.com/topic/161.html

[CesiumJS]Cesium Getting Started 8 - Configuring the Scene

Wed, 15 Aug 2018 07:30:05 +0000

Next, we’ll add some more correct time and space settings to the Viewer. This involves interacting with viewer.scene, which controls all graphical elements in the viewer.

First, let’s configure our scene by enabling lighting based on the sun’s position with the following code:

1
2


// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

With this configuration, the lighting in our scene will change with the time of day. If you zoom out, you’ll see that part of the digital globe is in darkness, because like the real Earth, the sun can only illuminate part of it.

Before we initialize and start the view, let’s briefly go over some basic Cesium types:

Cartesian3 : A 3D Cartesian coordinate – when used as a position relative to the center of the Earth, it uses the Earth-Fixed reference frame (ECEF).
Cartographic : A position defined by longitude, latitude (in radians), and height above the WGS84 ellipsoid surface.
HeadingPitchRoll : A rotation (in radians) about the local axes in an east-north-up frame. Heading is a rotation about the negative Z axis. Pitch is a rotation about the negative Y axis. Roll is a rotation about the positive X axis.
Quaternion : A 3D rotation represented as a 4D coordinate.

These are the basic types needed to position and orient Cesium objects in the scene, and they have many useful conversion methods. See the documentation for each type to learn more.

Now let’s position the camera on the NYC (New York) scene where our data is located.

Camera Control

The camera is a property of viewer.scene that controls the currently visible domain. We can control the camera by directly setting its position and orientation, or by using the API provided by Cesium, which is designed to specify how the camera’s position and orientation change over time.

Some of the most commonly used methods are:

Camera.setView(options): Immediately sets the camera at a specific position and orientation.
Camera.zoomIn(amount): Moves the camera forward along the view vector.
Camera.zoomOut(amount): Moves the camera backward along the view vector.
Camera.flyTo(options): Creates an animated camera flight from the current position to a new position.
Camera.lookAt(target, offset) : Positions and orients the camera to aim at a target point with a given offset.
Camera.move(direction, amount) : Moves the camera in any direction.
Camera.rotate(axis, angle) : Rotates the camera around any axis.

For more API features, check out these camera demos:

Camera API Demo
Custom Camera Controls Demo

Let’s try one method to fly the camera to New York. Use camera.setView() to initialize the view, specifying the camera position and orientation with Cartesian3 and HeadingPitchRoll:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
 destination : initialPosition,
 orientation : {
 heading : initialOrientation.heading,
 pitch : initialOrientation.pitch,
 roll : initialOrientation.roll
 }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

The camera is now positioned and oriented to overlook Manhattan, and our view parameters are saved in an object that can be passed to other camera methods.

In fact, we can use this same view to update the behavior when the home button is pressed. Instead of having it return to the default view of the Earth from a distance, we can override the button to show our initial Manhattan view. We can add a few options to adjust the animation, then add an event listener to cancel the default flight and call flyTo() with our home view:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
 e.cancel = true;
 viewer.scene.camera.flyTo(homeCameraView);
});

For more about basic camera control, please visit our Camera Tutorial.

Clock Control

Next, let’s configure the Viewer’s Clock and Timeline to control the scene’s time progression.

Here is the Clock-related API.

When working with specific times, Cesium uses the JulianDate type, which stores the number of days since noon on January 1, -4712 (4713 BC). For increased precision, this class stores the whole number of days and seconds in separate components. For computational safety and to represent leap seconds, dates are always stored in the International Atomic Time standard.

Here is an example of how to set up scene time options:

1
2
3
4
5
6
7
8
9


// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

This sets the scene animation’s rate, start and stop times, and tells the clock to loop back to the start when it reaches the stop time. It also sets the timeline control to the appropriate time range. Check out this clock sample code to test clock settings.

This is our initial scene configuration! Now, when you run your application, you should see the following:

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/160.html | China fast access: http://cesium.coinidea.com/topic/160.html

[CesiumJS]Cesium Getting Started 7 - Adding Terrain

Tue, 14 Aug 2018 08:34:50 +0000

Cesium supports streaming, visualizable global elevation terrain data, including oceans, lakes, rivers, mountains, canyons, and other terrain data that can be rendered in 3D with better results than 2D. Like imagery data, the Cesium engine requests streaming terrain data from a server, only requesting data for the layers that need to be rendered based on the current camera view.

Cesium provides some terrain dataset examples and how to configure these parameters:

ArcticDEM : High-resolution arctic terrain
PAMAP Terrain : High-resolution Pennsylvania terrain
Terrain display options : Various terrain data configurations and formats
Terrain exaggeration : Makes height differences between terrain more visually prominent

Supported terrain data formats

Quantized-mesh, an open-source format developed by the Cesium team
Heightmap
Google Earth Enterprise

To add terrain data, we need to create a CesiumTerrainProvider, provide a URL and some configuration options, and then assign this provider to viewer.terrainProvider.

Here, we use Cesium World Terrain, which is provided by Cesium ion and is available by default in “My Assets”. We can create a Cesium World Terrain served by Cesium ion using the createWorldTerrain helper function.

1
2
3
4
5


// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
 requestWaterMask : true, // required for water effects
 requestVertexNormals : true // required for terrain lighting
});

requestWaterMask and requestVertexNormals are optional configuration items that tell Cesium whether to request additional water and lighting data. Both options are set to false by default.

Finally, since we now have terrain data, we need more lines to ensure that objects behind the terrain are displayed correctly – only the frontmost, topmost objects should be visible.

1
2


// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

We now have terrain data and moving water. New York is very flat, so you can freely explore the terrain data above. For a more obvious example, you can navigate to more rugged areas like the Grand Canyon or San Francisco.

For more information about terrain data, please visit the Terrain Tutorial

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/157.html | China fast access: http://cesium.coinidea.com/topic/157.html

[CesiumJS]Cesium Getting Started 6 - Adding Imagery

Tue, 14 Aug 2018 08:29:46 +0000

Another key element of a Cesium application is Imagery. Tile map collections are mapped onto the virtual 3D digital globe surface based on different projection methods. Depending on the camera’s direction and distance to the surface, Cesium requests and renders different levels of imagery detail.

Multiple imagery layers can be added, removed, sorted, and adapted in Cesium.

Cesium provides a series of methods for handling imagery, such as color adaptation and layer blending. Here are some sample code examples:

Cesium provides various interfaces to support different imagery data sources.

Supported imagery formats

WMS
TMS
WMTS (with time dynamic imagery)
ArcGIS
Bing Maps
Google Earth
Mapbox
OpenStreetMap

Note: Different data sources require different authentication - make sure you have permission to access these data sources. Naturally, you’ll need to register for specific credentials.

By default, Cesium uses Bing Maps as the default imagery. This imagery is packaged into the Viewer for demonstration purposes. Cesium requires you to create your own ion account and generate an access key to access imagery data.

In the following example, we’ll use Sentinel-2 imagery from Cesium ion.

Go to the Cesium ion page and add Sentinel-2 imagery to your assets. Click “Asset Depot” in the navigation bar.
Click “Add to my assets”. Sentinel-2 will appear in your personal Asset list (My Assets), making the imagery data source available in your personal app.
At the code level: we create an IonImageryProvider and pass the assetId for the corresponding Sentinel-2 imagery. Then we add the ImageryProvider to viewer.imageryLayers.

1
2
3
4
5


// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

Based on the above code, our Cesium application will show the following imagery when zooming in:

For more information about imagery, please visit the Imagery Layers Tutorial

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/156.html | China fast access: http://cesium.coinidea.com/topic/156.html

[CesiumJS]Cesium Getting Started 5 - Cesium ion

Mon, 13 Aug 2018 07:43:34 +0000

Cesium ion is a platform that provides tiled maps and 3D geospatial data. Cesium ion supports adding data to your own CesiumJS applications. Below we will use Sentinel-2 2D imagery and Cesium World Terrain, both of which require ion support.

Note When using Cesium, if you haven’t applied for an ion account and are using Cesium’s default data sources instead of your own, the bottom of the viewer will often display a line of small English text. The message basically says you need to apply for an access token.

First, you need to register for a free Cesium ion account.
Go to https://cesium.com/ion/ and register a new account.
Click “Access Token” to navigate to the Access Tokens page.
Select the Default access token and copy the contents.

When creating a Cesium Viewer, simply set the access token to your own:

1

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';

With this, you can freely access various data sources provided by Cesium ion.

More questions can be found at Getting Started with Cesium ion

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/153.html | China fast access: http://cesium.coinidea.com/topic/153.html

[CesiumJS]Cesium Getting Started 4 - Creating a Cesium Viewer

Mon, 13 Aug 2018 06:55:35 +0000

The foundation of any Cesium application is the Viewer. The Viewer is an interactive 3D digital globe container (box) with various features. To create a Viewer, simply bindg it to a div element with the id “cesiumContainer” in HTML.

1

var viewer = new Cesium.Viewer('cesiumContainer');

After using the code above, you can see the basic digital globe shown in the image below:

By default, the scene supports mouse (desktop) and touch (mobile device) interaction. You can control the camera to navigate the digital globe in the following ways:

Left click and drag - Pans the camera over the surface of the globe.
Right click and drag - Zooms the camera in and out.
Middle wheel scrolling - Also zooms the camera in and out.
Middle click and drag - Rotates the camera around the point on the surface of the globe.

The default Viewer comes with several useful widgets:

Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.
HomeButton : Flies the viewer back to a default view.
SceneModePicker : Switches between 3D, 2D and Columbus View (CV) modes.
BaseLayerPicker : Chooses the imagery and terrain to display on the globe.
NavigationHelpButton : Displays the default camera controls.
Animation : Controls the play speed for view animation.
CreditsDisplay : Displays data attributions. Almost always required!
Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.
FullscreenButton : Makes the Viewer fullscreen.

We can configure the Viewer widgets through code by adding/removing related components via configuration parameters when initializing the Viewer. The following code creates a Viewer configured without the selection indicator, base layer picker, or scene mode picker components:

1
2
3
4
5


var viewer = new Cesium.Viewer('cesiumContainer', {
 scene3DOnly: true,
 selectionIndicator: false,
 baseLayerPicker: false
});

For the complete Viewer configuration, please visit: https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html.

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/152.html | China fast access: http://cesium.coinidea.com/topic/152.html