Monthly Archives: January 2016

Cesiumjs – Draw line with SHIFT and left click ?

1 Reply

cesium_shift_left_key_line

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

var scene = viewer.scene; 
var ellipsoid = scene.globe.ellipsoid; 
var handler; 

// variables that support distance line 
var distPosCarte = []; 
var distPosCarto = []; 
var surfaceDist = 0; 
var distLine = viewer.entities.add({ 
    id : 'distLine', 
    name : 'Distance Line', 
    polyline : { 
        width : 3, 
        positions : [], 
        material : new Cesium.PolylineOutlineMaterialProperty({ 
            color : Cesium.Color.ORANGE, 
            outlineWidth : 2, 
            outlineColor : Cesium.Color.BLACK 
        }) 
    } 
}); 

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


handler.setInputAction(function(movement) { 
    // clear distPos arrays on single click without SHIFT 
    distPosCarto.length = 0; 
    distPosCarte.length = 0; 
    surfaceDist = 0; 
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); 

handler.setInputAction(function(movement) { 
    var cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid); 
    if (cartesian) { 
        distPosCarte.push(cartesian); 
        var cartographic = ellipsoid.cartesianToCartographic(cartesian); 
        distPosCarto.push(cartographic); 
        if(distPosCarte.length >= 2) { 
            var posArray = []; 
            // Build array with all points 
            for (var i = 0; i < distPosCarte.length; i++){ 
                posArray.push(distPosCarte[i]); 
            } 
            // Calculate surface distance between each point 
            for (var j = 1; j < distPosCarto.length; j++){ 
                var geodesic = new Cesium.EllipsoidGeodesic(distPosCarto[j-1], distPosCarto[j]); 
                surfaceDist += geodesic.surfaceDistance; 
            } 

            distLine.polyline.positions = posArray; 
            distLine.description = ((surfaceDist)/1000).toFixed(2) + ' km'; 

            viewer.selectedEntity = distLine; 
        } 
    } 
}, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);
Share

Cesiumjs – Draw line around the globe ?

Leave a reply

Draw-line-around-the-globe


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

var cesiumTerrainProviderHeightmaps = new Cesium.CesiumTerrainProvider({
    url : '//assets.agi.com/stk-terrain/world',
    requestWaterMask: true,
    requestVertexNormals: true
});

viewer.terrainProvider = cesiumTerrainProviderHeightmaps;

for(var iLp=0; iLp<3000; iLp++ ) {
    scene.primitives.add(new Cesium.Primitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : Cesium.BoxGeometry.fromDimensions({
                vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
                dimensions : new Cesium.Cartesian3(40000.0, 30000.0, 50000.0)
            }),
            modelMatrix : Cesium.Matrix4.multiplyByTranslation(
                Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-111.0+iLp, (iLp/100))),
                new Cesium.Cartesian3(0.0, 0.0, 250000), new Cesium.Matrix4()),
            attributes : {
                color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))
            }
        }),
        appearance : new Cesium.PerInstanceColorAppearance({
            closed: true
        })
    }));
}
Share

Cesium – How to changes the polygon positions on left click ?

Leave a reply

changes-the-polygon-positions-on-left-click

var viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator : false,
    infoBox : false
});

var scene = viewer.scene;

var entity = viewer.entities.add({
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
                                                        -115.0, 32.0,
                                                        -107.0, 33.0,
                                                        -102.0, 31.0,
                                                        -102.0, 35.0]),
        material : Cesium.Color.RED
    }
}); 

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
    var pickedObject = scene.pick(click.position);
    if (Cesium.defined(pickedObject) && (pickedObject.id === entity)) {
        var positions = entity.polygon.hierarchy.getValue(viewer.clock.currentTime);
        positions[0] = Cesium.Cartesian3.fromDegrees(-110.0, 37.0);
        entity.polygon.hierarchy = positions;
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Share