Category Archives: cesiumjs

Cesiumjs – How to draw a polyline on point entity ?

phpmind-cesiumjs-polylineand-entity-point

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

var greenCircle = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0),
    name : 'Green circle at height',
    ellipse : {
        semiMinorAxis : 300000.0,
        semiMajorAxis : 300000.0,
        //height: 200000.0,
        material : Cesium.Color.GREEN
    }
});


var pointNew = viewer.entities.add({
     position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 50000),
    name : 'point on surface with outline',
     point : {
         pixelSize : 50,
         outlineWidth : 1,
         color :  Cesium.Color.YELLOW.withAlpha(1),
         outlineColor :  Cesium.Color.RED.withAlpha(1)
	},
     polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-111.0, 40.0,
                                                        -95.0, 40.0]),
        width : 5,
        material : Cesium.Color.BLACK
    }
    });
viewer.zoomTo(viewer.entities);

Share

Cesiumjs – How to draw 3D polyline ?

phpmind-cesiumjs-3d-polyline


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

var purpleArrow = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000,
                                                               -80, 43, 0,
                                                               -85, 43, 500000]),
        width : 10,
        followSurface : false,
        material : Cesium.Color.PURPLE
    }
});

viewer.zoomTo(viewer.entities);
Share

Cesiumjs – How can i control visibility of datasource show/hide ?

phpmind-cesiumjs-show-hide-kml



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

// Create a typical CzmlDataSource.
var dataSource1 = new Cesium.CzmlDataSource();
dataSource1.load('../../SampleData/simple.czml');

// Add a checkbox at the top.
document.getElementById('toolbar').innerHTML =
    '';

var checkbox = document.getElementById('showCheckbox');
checkbox.addEventListener('change', function() {
    // Checkbox state changed.
    if (checkbox.checked) {
        // Show if not shown.
        if (!viewer.dataSources.contains(dataSource1)) {
            viewer.dataSources.add(dataSource1);
        }
    } else {
        // Hide if currently shown.
        if (viewer.dataSources.contains(dataSource1)) {
            viewer.dataSources.remove(dataSource1);
        }
    }
}, false);


Share

Cesiumjs – How to get the content of a KML tag.

Cesiumjs-phpmind-get-des

The final computed description for a KML object is available in the entity.description property. In a pickedObject, the id property is the entity (if an entity was picked) So you can retrieve it as follows:

var description = pickedObject.id.description.getValue(time);

Time is the current scene time. You can omit the time parameter if you are 100% sure the description property is a static value.

Share

Cesiumjs – How to remove individual KML DataSources?

Cesiumjs-phpmind-remove-datasource

Cesiumjs-phpmind-remove-datasource_add

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

var dataSource1 = new Cesium.KmlDataSource();
dataSource1.load('../../SampleData/kml/facilities/facilities.kml');

var dataSource2 = new Cesium.KmlDataSource();
dataSource2.load('../../SampleData/kml/gdpPerCapita2008.kmz');

Sandcastle.addToolbarButton('Add DataSource 1', function() {
    viewer.dataSources.add(dataSource1);
});

Sandcastle.addToolbarButton('Remove DataSource 1', function() {
    viewer.dataSources.remove(dataSource1);
});

Sandcastle.addToolbarButton('Add DataSource 2', function() {
    viewer.dataSources.add(dataSource2);
});

Sandcastle.addToolbarButton('Remove DataSource 2', function() {
    viewer.dataSources.remove(dataSource2);
});

If you are not familiat with Promises, I recommend reading this article: http://www.html5rocks.com/en/tutorials/es6/promises/ Cesium specifically uses the `when` promise library that is mentioned in the article.

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

var promise1 = Cesium.KmlDataSource.load('../../SampleData/kml/facilities/facilities.kml');
var promise2 = Cesium.KmlDataSource.load('../../SampleData/kml/gdpPerCapita2008.kmz');

Cesium.when(promise1, function(dataSource1){
    Sandcastle.addToolbarButton('Add DataSource 1', function() {
        viewer.dataSources.add(dataSource1);
    });

    Sandcastle.addToolbarButton('Remove DataSource 1', function() {
        viewer.dataSources.remove(dataSource1);
    });
});

Cesium.when(promise2, function(dataSource2){
    Sandcastle.addToolbarButton('Add DataSource 2', function() {
        viewer.dataSources.add(dataSource2);
    });

    Sandcastle.addToolbarButton('Remove DataSource 2', function() {
        viewer.dataSources.remove(dataSource2);
    });
});

Share

Cesiumjs How to add name/description in the center of polygon

phpmind-cesiumjs-show-name

var viewer = new Cesium.Viewer('cesiumContainer');
var polygon = viewer.entities.add({
    name : 'Polygon',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 38.0,
                                                        -115.0, 32.0,
                                                        -105.0, 32.0,
                                                        -105.0, 37.0]),
        material : Cesium.Color.RED
    }
});


var label = viewer.entities.add({
    label: {
        text: polygon.name,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        eyeOffset: new Cesium.Cartesian3(0,0,-200)
    },
    position: Cesium.Cartesian3.fromDegrees(-110, 35)
});

Share

Cesiumjs – How to Load KML without Viewer Widget ?

phpmind-cesiumjs-Load-KML-without-Viewer-Widget

var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');

var dataSources = new Cesium.DataSourceCollection();

var dataSourceDisplay = new Cesium.DataSourceDisplay({
    scene: cesiumWidget.scene,
    dataSourceCollection: dataSources
});

//dataSourceDisplay.update needs to be called once a frame after all other updates have been made, in this case we call it in the preRender event.
cesiumWidget.scene.preRender.addEventListener(function(scene, time){
    dataSourceDisplay.update(time);
});

//Now that everything is configured, we can load KML and add to list of data sources.
dataSources.add(Cesium.KmlDataSource.load('../../SampleData/kml/facilities/facilities.kml'));
Share

Cesiumjs – How to Animating polyline color

phpmind-cesiumjs-animate-polyline-color1

phpmind-cesiumjs-animate-polyline-color

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000,
                                                               -125, 39, 250000]),
        width : 5,
        material : new Cesium.PolylineOutlineMaterialProperty({
            color : new Cesium.CallbackProperty(

                function (time, result){
                    return Cesium.Color.fromAlpha(
                            Cesium.Color.RED,
                            (new Date(time).getTime() % 1000) / 1000,
                            result);

             }, false),
            outlineWidth : 2,
            outlineColor : Cesium.Color.BLACK
        })
    }
});

viewer.zoomTo(viewer.entities);
Share

Cesiumjs – How to Animating Multipolygons

phpmind-cesiumjs-animate-poygone2

phpmind-cesiumjs-animate-poygone

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

var greenCylinder = viewer.entities.add({
    name : 'Green cylinder with black outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
    cylinder : {
        length : 400000.0,
        topRadius : 200000.0,
        bottomRadius : 200000.0,
        material : Cesium.Color.GREEN.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.DARK_GREEN
    }
});

var redCone = viewer.entities.add({
    name : 'Red cone',
    position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
    cylinder : {
        length : 400000.0,
        topRadius : 0.0,
        bottomRadius : 200000.0,
        material : new Cesium.ColorMaterialProperty(
            new Cesium.CallbackProperty(
                function (time, result){
                    return Cesium.Color.fromAlpha(
                        Cesium.Color.RED,
                        (new Date(time).getTime() % 1000) / 1000,
                        result);
                }, false))
    }
});

viewer.zoomTo(viewer.entities);
Share