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

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