Category Archives: cesiumjs

Cesiumjs – How to make Wall ?

Cesiumjs-how-to-make-wall

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

var blueCorridor = viewer.entities.add({
    corridor : {

        positions : Cesium.Cartesian3.fromDegreesArray([
            -120.0, 60.0,
            -90.0, 60.0
        ]),

        extrudedHeight : 500000.0,
        width : 50.0,
        cornerType: Cesium.CornerType.BEVELED,
        material : Cesium.Color.BLUE.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLUE
    }
});


viewer.zoomTo(viewer.entities);

Share

Cesiumjs – How to get longitude and latitude on click ?

Cesiumjs-find-lang-lati-on-click

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.canvas.addEventListener('click', function(e){
    var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);

    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
    if (cartesian) {
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);

        alert(longitudeString + ', ' + latitudeString);
    } else {
        alert('Globe was not picked');
    }
	
}, false);
Share

Cesiumjs – How to create HTML element on top of the Cesium ?

Cesiumjs-html-form


var viewer = new Cesium.Viewer('cesiumContainer');
function addUpperLeftDiv() {
    var divUL = document.getElementById('divUpperLeft');
    if (!divUL) {
        divUL = document.createElement('div');
        divUL.id = 'divUpperLeft';
        divUL.style.position = "absolute";
        divUL.style.background = "rgba(0,0,0,0)";
        divUL.style.left = "10px";
        divUL.style.top = "10px";
        divUL.innerHTML = "";
        divUL.style.zIndex = 2000;
        document.getElementById("cesiumContainer").appendChild(divUL);
    }
}
function includeSearchWidget() {
    var divContainer = document.createElement("div");
    divContainer.id = "divSearchContainer";
    divContainer.style.top = "20px";
     
    var txtField = document.createElement("input");
    txtField.id = "txtSearchField";
    txtField.type = "text";
    txtField.style.border = "0px solid";
    txtField.style.width = "150px";
    txtField.onkeydown = function(e) {
        // Enter Key
        var keycode = e.which ? e.which : e.keyCode;
        if (keycode === 13) {
            window.alert("You hit the enter key while focus was on the search text field!");
        }
    };
    divContainer.appendChild(txtField);
    
    var btnSearch = document.createElement("input");
    btnSearch.id = "btnSearch";
    btnSearch.type = "button";
    btnSearch.value = "Go";
    btnSearch.style.width = "50px";
    btnSearch.style.marginLeft = "10px";
    btnSearch.onclick = function() {
        window.alert("You clicked the search button!");
    };
    
    divContainer.appendChild(btnSearch);
    
    document.getElementById("divUpperLeft").appendChild(divContainer);
}
addUpperLeftDiv();
includeSearchWidget();
Share

Cesiumjs – How to remove primitives from scene ?

cesiumjs-remove-primitives-from-scene


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

    var input = {
        id: 'ID1',
        length: 500000,
        topRadius: 300000,
        bottomRadius: 1000
    };


    var myPrimitives = [];

    var instance = new Cesium.GeometryInstance({
        geometry: new Cesium.CylinderOutlineGeometry({
            length: input.length,
            topRadius: input.topRadius,
            bottomRadius: input.bottomRadius,
            slices: 10
        }),
        modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
                Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 1000000.0), new Cesium.Matrix4()),
        id: input.id,
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOW)
        }
    });


    function arCylinder(ar){

        if (ar === 'a') {

            var myPrimitive = new Cesium.Primitive({

                geometryInstances: instance,
                appearance: new Cesium.PerInstanceColorAppearance({
                    flat: true
                })
            });


            myPrimitives.push(myPrimitive);
            scene.primitives.add(myPrimitive);

        }

        else if(ar === 'r'){

            scene.primitives.remove(myPrimitives.pop());
        }
    }

    Sandcastle.addToolbarButton('Add', function() {
        arCylinder('a');

    });

    Sandcastle.addToolbarButton('Remove', function() {

        arCylinder('r');
    });
Share

Cesiumjs – How can I remove polyline?

Cesiumjs-remove-polyline

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

var redLine = viewer.entities.add({
    name : 'Red line on the surface',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        -125, 35]),
        width : 5,
        material : Cesium.Color.RED
    }
});

Sandcastle.addToolbarButton('Remove', function() {
    viewer.entities.remove(redLine);
});

Sandcastle.addToolbarButton('Remove all', function() {
    viewer.entities.removeAll();
});

Share

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