Cesium Overview (i)

Cesium is a JavaScript based open source framework that can be used to draw 3D of Earth in a browser and draw maps on it (supporting tile services in a variety of formats) that do not require any plug-in support, but browsers must support WEBGL.

Cesium supports a variety of data visualization methods, which can draw various geometries, import pictures, and even 3D models. At the same time, cesium also supports Dynamic Data display based on the timeline, for example, we can use it to draw a satellite trajectory.

Cesium HelloWorld

 
Index.js 

var viewer = new Cesium.viewer (' Cesiumcontainer ', {animation:false,//) create animation widget, lower left corner meter baselayerpicker:false,/ /whether to show the layer selector fullscreenbutton:false,//whether to display the full screen button geocoder:false,//whether to display the Geocoder gadget, the upper right corner query button homebutton:false,/ /whether to show the home button infobox:false,//whether to display the message box scenemodepicker:false,//whether the 3d/2d selector selectionindicator:false,//display Select Indicator component timeline:false,//whether the timeline navigationhelpbutton:false,//displays the Help button in the upper-right corner scene3donly:true,//if set to True, All geometries are plotted in the mode of the graph to conserve the GPU resource clock:new cesium.clock (),//Clock object to control the current time selectedimageryproviderviewmodel:undefined,// Previous image layer display model, only Baselayerpicker set to true meaningful ImageryProviderViewModels:Cesium.createDefaultImageryProviderViewModels (), An array of image layers available for Baselayerpicker selection selectedterrainproviderviewmodel:undefined,//the display model of the current topographic map layer, Providerviewmodel Only Baselayerpicker set to true meaningful TerrainProviderViewModels:Cesium.createDefaultTerrainProviderViewModels (),// Providerviewmodel array of topographic map layers available for baselayerpicker selection ImagerypRovider:new Cesium.openstreetmapimageryprovider ({credit: ", url: '//192.168.0.89:5539/planet-satelli te/'}),//Image layer provider, only Baselayerpicker set to false meaningful Terrainprovider:new cesium.ellipsoidterrainprovider (),//topographic map layer provider, only B Aselayerpicker is set to false meaningful skybox:new Cesium.skybox ({sources: {positivex: ' cesium-1.7.1/skybox/p
          X.jpg ', Negativex: ' Cesium-1.7.1/skybox/mx.jpg ', Positivey: ' Cesium-1.7.1/skybox/py.jpg ', Negativey: ' Cesium-1.7.1/skybox/my.jpg ', Positivez: ' Cesium-1.7.1/skybox/pz.jpg ', Negativez: ' Cesiu M-1.7.1/skybox/mz.jpg '}}),//The Skybox object used to render the starry Sky fullscreenelement:document.body,//the HTML element rendered when Full-screen, usedef aultrenderloop:true,//If you need to control the rendering loop, set to True targetframerate:undefined,//the frame rate when using the default render loop showrenderlooperrors : false,//If set to True, an error message will be displayed in an HTML panel automaticallytrackdatasourceclocks:true,//automatically track the clock settings of the recently added data source contextoptions : undefined,//passed to scene objectThe context parameter (scene.options) scenemode:cesium.scenemode.scene3d,//the initial scene pattern Mapprojection:new cesium.webmercatorprojecti
On (),//Map projection system datasources:new cesium.datasourcecollection ()///The collection of data sources that need to be visualized});
var scene = Viewer.scene;
var canvas = Viewer.canvas;
var clock = Viewer.clock;
var camera = Viewer.scene.camera; var entities = Viewer.entities;
 
can speed up the operation of time and simulate the effect of sunlight:


Speed up the operation of the clock
clock.multiplier = 0.1 *;
Sunshine Area Highlight
scene.globe.enableLighting = true;
The following code allows you to set the lens position and point, and the Cesium camera object provides a variety of ways to manipulate the lens:
Index.js


Set the lens position and direction camera.setview ({//lens latitude and longitude, height. Lens by default, in the designated latitude height overlooking (pitch=-90) Earth position:Cesium.Cartesian3.fromDegrees (116.3, 39.9, 100000000),//Beijing 100000 km above/ /The following several directions just reflect the default value Heading:Cesium.Math.toRadians (0), Pitch:Cesium.Math.toRadians ( -90), Roll:Cesium.Math
. Toradians (0)});  Let the lens fly (animate) to a location and direction settimeout (function () {Camera.flyto ({destination:Cesium.Cartesian3.fromDegrees) (116, 6000000), orientation: {Heading:Cesium.Math.toRadians ( -15), Pitch:Cesium.Mat H.toradians ( -65), Roll:Cesium.Math.toRadians (0)}, duration:3,//animation duration complet
        E:function ()//After the flight completed after the action {addentities ();
}
    } );
 
}, 1000);
Listens for keyboard events to translate or rotate the lens var ellipsoid = scene.globe.ellipsoid;
Canvas.onclick = function () {Canvas.focus ();}; var flags = {Looking:false, rotateleft:false, Rotateright:false, Moveup:false, MovedowN:false, Moveleft:false, moveright:false};
var handler = new Cesium.screenspaceeventhandler (canvas);
            function Getflagforkeycode (keycode) {switch (keycode) {case ' W '. charCodeAt (0)://Downward translation lens
        Return ' MoveDown ';
        Case ' S '. charCodeAt (0)://Upward translation lens return ' moveUp ';
        Case ' A '. charCodeAt (0)://Right translation lens return ' moveright ';
        Case ' D '. charCodeAt (0)://Left translation lens return ' moveLeft ';
        Case ' Q '. charCodeAt (0)://rotate the lens to the right to return ' rotateright ';
        Case ' E '. charCodeAt (0)://Left rotation lens return ' rotateleft ';
    Default:return undefined;
    } document.addeventlistener (' KeyDown ', function (e) {var flagname = Getflagforkeycode (E.keycode);
    if (typeof flagname!== ' undefined ') {flags[flagname] = true;
}}, False); Document.addeventlistener (' KeyUp ', function (e) {var flagname = Getflagforkeycode (e.keycode );
    if (typeof flagname!== ' undefined ') {flags[flagname] = false;
}}, False); Viewer.clock.onTick.addEventListener (function (clock) {var cameraheight = ellipsoid.cartesiantocartographic (camera
    . position). Height;
 
    var moverate = cameraheight/100.0;
    if (flags.rotateleft) {camera.rotateleft (0.01);
    } if (flags.rotateright) {camera.rotateright (0.01);
    } if (Flags.moveup) {camera.moveup (moverate);
    } if (Flags.movedown) {camera.movedown (moverate);
    } if (Flags.moveleft) {camera.moveleft (moverate);
    } if (flags.moveright) {camera.moveright (moverate); }
} );
You can add several entities that can be used to organize multiple visual objects, and the following example simulates the coverage of satellite beams:
Index.js


/** * Calculate target point latitude and longitude according to offset * @param {} Start point latitude and Longitude degree Group, Unit degree * @param {} offset in the northeast direction, Unit M * @param {} target point latitude and Longitude degree Group, Unit degree * * FUNCT
    Ion Offsettolonglat (start, offset) {var er = 6378137;
    var lat = parsefloat (start[1]);
    var lon = parsefloat (start[0]);
    var DN = parsefloat (offset[1]);
 
    var de = parsefloat (offset[0]);
    Dlat = Dn/er;
    var pi = Math.PI;
    var Dlon = de/(ER * math.cos (pi * lat/180)) return [lon + Dlon * 180/pi, lat + dlat * 180/pi
]; /** * Simulate satellite beam effect by drawing triangles * @param {} entities entity set * @param {} Stltpos satellite three-dimensional coordinate array * @param {} points ground point * @param {} colo R CSS color codes, such as #ff0000 */function Lightshinepolygon (entities, Stltpos, points, color) {for (var i = 0; i < point S.length; i + 2) {var array = [Stltpos[0], stltpos[1], stltpos[2], points[i], points[i + 1], 0]
        ;
            if (i + 2 = points.length) {Array.push (points[0]); Array.push (PointS[1]);
            else {Array.push (points[i + 2]);
        Array.push (Points[i + 3]);
        } array.push (0);
                Entities.add ({polygon: {hierarchy:Cesium.Cartesian3.fromDegreesArrayHeights (array), Perpositionheight:true, Outline:false, Material:Cesium.Color.fromAlpha
        (Cesium.Color.fromCssColorString (Color),. 1)}
    } );
        }/** * Add entity */function Addentities () {//satellite one {var stltpos = [110.0, 40.0, 2500000
        ];
                Entities.add {position:Cesium.Cartesian3.fromDegrees.apply (this, Stltpos), Billboard: {
                Image: ' Images/satellite-1.png ', HorizontalOrigin:Cesium.HorizontalOrigin.CENTER, VerticalOrigin:Cesium.VerticalOrigin.BOTTOM,//Vertical position calculation datum set to bottom, default center width:92, h Eight: 36}});
            A polygon cover range {var color = ' #FF0000 ';
            Simulated lighting effects of several polygons var points = [100, 48, 110, 40, 115, 40, 120, 43, 120, 55];
            Lightshinepolygon (entities, Stltpos, points, color); Surface polygon Entities.add ({polygon: {Hierarchy:Cesium.Cartesian3.fromDegr Eesarray (points), Outline:true, OutlineColor:Cesium.Color.fromAlpha (cesium. Color.fromcsscolorstring (color),. 4), Material:Cesium.Color.fromAlpha (Cesium.Color.fromCssColorS
        Tring (color),. 3}});
            ///A circular coverage {var R = 600000;//radius var color = ' #0000FF ';
            Center var eclong = 110.0;
            var ecLat = 30.0;
            var ec = Cesium.Cartesian3.fromDegrees (Eclong, ecLat, 0); ModeSome polygon var points of the illumination effect = []; for (var i = 0; i < 360 i + +) {var coord = Offsettolonglat (ec
                Long, EcLat], [Math.Cos (Math.PI * i/180) * R, Math.sin (Math.PI * i/180) * r
                ] );
                Points.push (Coord[0]);
            Points.push (coord[1]);
            } Lightshinepolygon (Entities, Stltpos, points, color); Round Viewer.entities.add ({position:ec, ellipse: {semi Minoraxis:r, Semimajoraxis:r, height:0.0, outline:true
                    , OutlineColor:Cesium.Color.fromAlpha (Cesium.Color.fromCssColorString (Color),. 4), Material:Cesium.Color.fromAlpha (Cesium.Color.fromCssColorString (Color),. 3)}})
        ; }
    }
}