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

Cesiumjs – How to draw a polyline from one height to the next.

phpmind-cesiumjs-draw-poly-lines

Cesium.Math.setRandomNumberSeed(1234);

    var viewer = new Cesium.Viewer('cesiumContainer');
    var entities = viewer.entities;
    var boxes = entities.add(new Cesium.Entity());
    var polylines = entities.add(new Cesium.Entity());

    //Create the entities and assign each entity's parent to the group to which it belongs.
    var prevHeight = 0.0;
    for (var i = 0; i < 5; ++i) {
        var height = 100000.0 + (200000.0 * i);
        entities.add({
            parent : boxes,
            position : Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
            box : {
                dimensions : new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
                material : Cesium.Color.fromRandom({alpha : 1.0})
            }
        });
        entities.add({
            parent : polylines,
            position : Cesium.Cartesian3.fromDegrees(-86.0, 55.0, height),
            polyline : {
                positions: [
                    Cesium.Cartesian3.fromDegrees(-86.0, 55.0, prevHeight),
                    Cesium.Cartesian3.fromDegrees(-86.0, 55.0, height)
                ],
                width : new Cesium.ConstantProperty(2),
                material : Cesium.Color.fromRandom({alpha : 1.0}),
                followSurface : new Cesium.ConstantProperty(false)
            }
        });
        
        prevHeight = height;
    }
    viewer.zoomTo(viewer.entities);
Share

Cesiumjs – How to draw line slowly and stop on left click.

phpmind-cesiumjs-create-lines-slowely-1

phpmind-cesiumjs-create-lines-slowely

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

var lon = -120;
var lat = 35;
function getPositions(){
    lon += 0.05;
    return Cesium.Cartesian3.fromDegreesArray([lon, 35, -125, 35]);
}

var redLine =  viewer.entities.add({
    polyline : {
        positions : new Cesium.CallbackProperty(getPositions, false),

        width : 5,
        material : Cesium.Color.RED
    }
});

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function() {
    redLine.polyline.positions = Cesium.Cartesian3.fromDegreesArray([-120, 35, -125, 35]);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Share