Category Archives: JavaScript

Cesiumjs – How to get the the coordinate of a KML point ?

phpmind-cesiumjs-coordinate-of-a-KML-point

Here is an event handler that will get the Cartesian3 position of a point on left click and writes it to the console.

            var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function(click) {
            var pickedObject = viewer.scene.pick(click.position);
            if (Cesium.defined(pickedObject)) {
                console.log(pickedObject.id.position.getValue(viewer.clock.currentTime));
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
// Output for example
// (-1506927.5843447673, -5174505.091726597, 3399472.531280526)
// (-1704963.9958314616, -4665566.981540714, 3987362.8409044705)

Share

Cesiumjs – How to add global event for specific entities?

phpmind-cesiumjs-event-for-specific-entities

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

    viewer.dataSources.add(Cesium.CzmlDataSource.load('../../SampleData/simple.czml'));

    Cesium.knockout.getObservable(viewer, '_selectedEntity').subscribe(function(entity) {
        if (!Cesium.defined(entity)) {
            console.log('De-selected entity.');
        } else {
            console.log('Selected entity ' + (entity.name || entity.id));
        }
    });
Share

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