4

How does one plot Great circle lines in Cesium (3D, not 2D) using the WGS84 ellipsoid? I found something like this in another thread but I'm having trouble applying it to my application (simply plotting great circle PolyLines of a given width and colour.

Also, I noticed that Google Maps have a light blue line within a dark blue line. Is it possible to draw this on Cesium in one go, or should I use two separate lines? And how would I place markers at the beginning and end?

As you can see, I'm just getting started with Cesium, but I would like some insight.

I am trying to plot great circle lines between airports. The data for each airport is in a JSON object, and the sub-objects look like this:

var airportData = {
    ...
    "EDDM": {
        "icao": "EDDM",
        "iata": "MUC",
        "name": "Munich International Airport",
        "city": "Munich",
        "state": "Bavaria",
        "country": "DE",
        "elevation": 1487,
        "lat": 48.3538017273,
        "lon": 11.7861003876,
        "tz": "Europe\/Berlin"
    },
    ...
    "KSFO": {
        "icao": "KSFO",
        "iata": "SFO",
        "name": "San Francisco International Airport",
        "city": "San Francisco",
        "state": "California",
        "country": "US",
        "elevation": 13,
        "lat": 37.6189994812,
        "lon": -122.375,
        "tz": "America\/Los_Angeles"
    }
    ...
}

And the function to actually plot the lines:

function plotLine(start, end)
{
    var viewer = new Cesium.Viewer("map");

    var origin_lat = start.lat;
    var origin_lon = start.lon;
    var dest_lat = end.lat;
    var dest_lon = end.lon;

    // What goes here?
}

And if someone could put an example that works in the Cesium Sandcastle that would be great.

2

Use a Polyline for something like this. Here's a live demo.

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

var airportData = {
    "EDDM": {
        "icao": "EDDM",
        "iata": "MUC",
        "name": "Munich International Airport",
        "city": "Munich",
        "state": "Bavaria",
        "country": "DE",
        "elevation": 1487,
        "lat": 48.3538017273,
        "lon": 11.7861003876,
        "tz": "Europe\/Berlin"
    },
    "KSFO": {
        "icao": "KSFO",
        "iata": "SFO",
        "name": "San Francisco International Airport",
        "city": "San Francisco",
        "state": "California",
        "country": "US",
        "elevation": 13,
        "lat": 37.6189994812,
        "lon": -122.375,
        "tz": "America\/Los_Angeles"
    }
};

function plotLine(start, end, name)
{
    var origin_lat = start.lat;
    var origin_lon = start.lon;
    var dest_lat = end.lat;
    var dest_lon = end.lon;

    var line = viewer.entities.add({
        name : name,
        polyline : {
            positions : Cesium.Cartesian3.fromDegreesArray([origin_lon, origin_lat,
                                                            dest_lon, dest_lat]),
            width : 7,
            material : new Cesium.PolylineOutlineMaterialProperty({
                color : Cesium.Color.DEEPSKYBLUE,
                outlineWidth : 4,
                outlineColor : Cesium.Color.DARKBLUE
            })
        }
    });

    return line;
}

plotLine(airportData.EDDM, airportData.KSFO, 'Path from EDDM to KSFO');

viewer.zoomTo(viewer.entities);
  • That was far easier than I expected. Thanks! – El Ectric Sep 13 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.