Cesium入门（五）

配置场景

// Enable lighting based on sun/moon positions
//使用太阳光也就是我们平时的光白天亮晚上黑
viewer.scene.globe.enableLighting = true;

类型解析

Cartesian3 一个3D笛卡尔坐标 - 当它用作一个位置时，以米为单位.地球中心是圆点
Cartographic 绘图坐标系，它用的经纬度和WGS84的高度一起来定位
HeadingPitchRoll 旋转坐标系，h对应z轴，p对应Y，R对应X轴。
Quaternion 4D坐标系统的3D展示没有用过。
上面的类型可以帮我们定位位置和方向帮助我们在场景中展示。

相机

相机是场景中一个重要的因素，我们可以通过以下方法来设置相机的方向
setView(options) 把相机设定的特定的位置和方向

// 1. Set position with a top-down view
viewer.camera.setView({
    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

// 2 Set view with heading, pitch and roll
viewer.camera.setView({
    destination : cartesianPosition,
    orientation: {
        heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
        pitch : Cesium.Math.toRadians(-90),    // default value (looking down)
        roll : 0.0                             // default value
    }
});

// 3. Change heading, pitch and roll with the camera position remaining the same.
viewer.camera.setView({
    orientation: {
        heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
        pitch : Cesium.Math.toRadians(-90),    // default value (looking down)
        roll : 0.0                             // default value
    }
});


// 4. View rectangle with a top-down view
viewer.camera.setView({
    destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});

// 5. Set position with an orientation using unit vectors.
viewer.camera.setView({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
        up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
    }
});

zoomIN(amount) 沿相机的方向向前移动参数为移动的量
zoomOut(amount)沿相机方向向后移动，参数为移动的量
flyTo(options),启用动画并更改相机的位置到一个新的位置

// 1. Fly to a position with a top-down view
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

// 2. Fly to a Rectangle with a top-down view
viewer.camera.flyTo({
    destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});

// 3. Fly to a position with an orientation using unit vectors.
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
        up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
    }
});

// 4. Fly to a position with an orientation using heading, pitch and roll.
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        heading : Cesium.Math.toRadians(175.0),
        pitch : Cesium.Math.toRadians(-35.0),
        roll : 0.0
    }
});

lookAt(target,offset),从指的目标和偏移量来更新相机的位置

// 1. Using a cartesian offset
var center = Cesium.Cartesian3.fromDegrees(-98.0, 40.0);
viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));

// 2. Using a HeadingPitchRange offset
var center = Cesium.Cartesian3.fromDegrees(-72.0, 40.0);
var heading = Cesium.Math.toRadians(50.0);
var pitch = Cesium.Math.toRadians(-20.0);
var range = 5000.0;
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

move(direction.amount)在任何方向上移动任何长度，它有几个方向定好的函数，只要传入移动的量就可以了如moveBackward(amount)etc
rotate(axis,angle)旋转任何轴任何角度，同上，也有几个定好轴的方法

一个Demo

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

function flyToSanDiego() {
    Sandcastle.declare(flyToSanDiego);
    viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
    });
}

function flyToHeadingPitchRoll() {
    Sandcastle.declare(flyToHeadingPitchRoll);
    viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
        orientation : {
            heading : Cesium.Math.toRadians(20.0),
            pitch : Cesium.Math.toRadians(-35.0),
            roll : 0.0
        }
    });
}

function flyToLocation() {
    Sandcastle.declare(flyToLocation);

    // Create callback for browser's geolocation
    function fly(position) {
        viewer.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(position.coords.longitude, position.coords.latitude, 1000.0)
        });
    }

    // Ask browser for location, and fly there.
    navigator.geolocation.getCurrentPosition(fly);
}

function viewRectangle() {
    Sandcastle.declare(viewRectangle);

    var west = -77.0;
    var south = 38.0;
    var east = -72.0;
    var north = 42.0;

    var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);
    viewer.camera.setView({
        destination: rectangle
    });

    // Show the rectangle.  Not required; just for show.
    viewer.entities.add({
        rectangle : {
            coordinates : rectangle,
            fill : false,
            outline : true,
            outlineColor : Cesium.Color.WHITE
        }
    });
}

function flyToRectangle() {
    Sandcastle.declare(flyToRectangle);

    var west = -90.0;
    var south = 38.0;
    var east = -87.0;
    var north = 40.0;
    var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

    viewer.camera.flyTo({
        destination : rectangle
    });

    // Show the rectangle.  Not required; just for show.
    viewer.entities.add({
        rectangle : {
            coordinates : rectangle,
            fill : false,
            outline : true,
            outlineColor : Cesium.Color.WHITE
        }
    });
}

function setReferenceFrame() {
    Sandcastle.declare(setReferenceFrame);

    var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
    var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

    // View in east-north-up frame
    var camera = viewer.camera;
    camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
    camera.lookAtTransform(transform, new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0));

    // Show reference frame.  Not required.
    referenceFramePrimitive = scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
        modelMatrix : transform,
        length : 100000.0
    }));
}

function setHeadingPitchRoll() {
    Sandcastle.declare(setHeadingPitchRoll);

    var camera = viewer.camera;
    camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
        orientation: {
            heading : -Cesium.Math.PI_OVER_TWO,
            pitch : -Cesium.Math.PI_OVER_FOUR,
            roll : 0.0
        }
    });
}

function icrf(scene, time) {
    if (scene.mode !== Cesium.SceneMode.SCENE3D) {
        return;
    }

    var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
    if (Cesium.defined(icrfToFixed)) {
        var camera = viewer.camera;
        var offset = Cesium.Cartesian3.clone(camera.position);
        var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
        camera.lookAtTransform(transform, offset);
    }
}

function viewInICRF() {
    Sandcastle.declare(viewInICRF);

    viewer.camera.flyHome(0);

    clock.multiplier = 3 * 60 * 60;
    scene.postUpdate.addEventListener(icrf);
    scene.globe.enableLighting = true;
}

var viewChanged = document.getElementById('viewChanged');

var removeStart;
var removeEnd;

function cameraEvents() {
    Sandcastle.declare(cameraEvents);

    var camera = viewer.camera;
    removeStart = camera.moveStart.addEventListener(function() {
        viewChanged.style.display = 'block';
    });
    removeEnd = camera.moveEnd.addEventListener(function() {
        viewChanged.style.display = 'none';
    });
}

var cameraChanged = document.getElementById('cameraChanged');

var removeChanged;

function cameraChanges() {
    Sandcastle.declare(cameraChanges);

    var i = 0;
    removeChanged = viewer.camera.changed.addEventListener(function(percentage) {
        ++i;
        cameraChanged.innerText = 'Camera Changed: ' + i + ', ' + percentage.toFixed(6);
        cameraChanged.style.display = 'block';
    });
}

function flyInACity() {
    Sandcastle.declare(flyInACity);

    var camera = scene.camera;
    camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(-73.98580932617188, 40.74843406689482, 363.34038727246224),
        complete : function() {
            setTimeout(function() {
                camera.flyTo({
                    destination : Cesium.Cartesian3.fromDegrees(-73.98585975679403, 40.75759944127251, 186.50838555841779),
                    orientation : {
                        heading : Cesium.Math.toRadians(200.0),
                        pitch : Cesium.Math.toRadians(-50.0)
                    },
                    easingFunction : Cesium.EasingFunction.LINEAR_NONE
                });
            }, 1000);
        }
    });
}

function losAngelesToTokyo(adjustPitch) {
    var camera = scene.camera;

    var tokyoOptions = {
        destination : Cesium.Cartesian3.fromDegrees(139.8148, 35.7142, 20000.0),
        orientation: {
            heading : Cesium.Math.toRadians(15.0),
            pitch : Cesium.Math.toRadians(-60),
            roll : 0.0
        },
        duration: 20,
        flyOverLongitude: Cesium.Math.toRadians(60.0)
    };

    var laOptions = {
        destination : Cesium.Cartesian3.fromDegrees(-117.729, 34.457, 10000.0),
        duration: 5,
        orientation: {
            heading : Cesium.Math.toRadians(-15.0),
            pitch : -Cesium.Math.PI_OVER_FOUR,
            roll : 0.0
        }
    };

    laOptions.complete = function() {
        setTimeout(function() {
            camera.flyTo(tokyoOptions);
        }, 1000);
    };

    if (adjustPitch) {
        tokyoOptions.pitchAdjustHeight = 1000;
        laOptions.pitchAdjustHeight = 1000;
    }

    camera.flyTo(laOptions);
}

function flyOverLongitude(adjustPitch) {
    Sandcastle.declare(flyOverLongitude);
    losAngelesToTokyo();
}

function flyOverLongitudeWithPitch() {
    Sandcastle.declare(flyOverLongitudeWithPitch);
    losAngelesToTokyo(true);
}

Sandcastle.addToolbarMenu([{
    text : 'Camera Options'
}, {
    text : 'Fly in a city',
    onselect : function() {
        flyInACity();
        Sandcastle.highlight(flyInACity);
    }
}, {
    text : 'Fly to San Diego',
    onselect : function() {
        flyToSanDiego();
        Sandcastle.highlight(flyToSanDiego);
    }
}, {
    text : 'Fly to Location with heading, pitch and roll',
    onselect : function() {
        flyToHeadingPitchRoll();
        Sandcastle.highlight(flyToHeadingPitchRoll);
    }
}, {
    text : 'Fly to My Location',
    onselect : function() {
        flyToLocation();
        Sandcastle.highlight(flyToLocation);
    }
}, {
    text : 'Fly to Rectangle',
    onselect : function() {
        flyToRectangle();
        Sandcastle.highlight(flyToRectangle);
    }
}, {
    text : 'View a Rectangle',
    onselect : function() {
        viewRectangle();
        Sandcastle.highlight(viewRectangle);
    }
}, {
    text : 'Set camera reference frame',
    onselect : function() {
        setReferenceFrame();
        Sandcastle.highlight(setReferenceFrame);
    }
}, {
    text : 'Set camera with heading, pitch, and roll',
    onselect : function() {
        setHeadingPitchRoll();
        Sandcastle.highlight(setHeadingPitchRoll);
    }
}, {
    text : 'View in ICRF',
    onselect : function() {
        viewInICRF();
        Sandcastle.highlight(viewInICRF);
    }
}, {
    text : 'Move events',
    onselect : function() {
        cameraEvents();
        Sandcastle.highlight(cameraEvents);
    }
}, {
    text : 'Camera changed event',
    onselect : function() {
        cameraChanges();
        Sandcastle.highlight(cameraChanges);
    }
}, {
    text : 'Fly from Los Angeles to Tokyo via Europe',
    onselect : function() {
        flyOverLongitude();
        Sandcastle.highlight(flyOverLongitude);
    }
}, {
    text : 'Look down during exaggerated flight',
    onselect : function() {
        flyOverLongitudeWithPitch();
        Sandcastle.highlight(flyOverLongitudeWithPitch);
    }
}
]);

Sandcastle.reset = function() {
    scene.completeMorph();
    viewer.entities.removeAll();
    scene.primitives.remove(referenceFramePrimitive);
    scene.tweens.removeAll();

    if (Cesium.defined(removeStart)) {
        removeStart();
        removeEnd();

        viewChanged.style.display = 'none';

        removeStart = undefined;
        removeEnd = undefined;
    }

    if (Cesium.defined(removeChanged)) {
        removeChanged();
        removeChanged = undefined;

        cameraChanged.style.display = 'none';
    }

    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

    clock.multiplier = 1.0;
    scene.postUpdate.removeEventListener(icrf);
    scene.globe.enableLighting = false;
};

scene.morphComplete.addEventListener(function() {
    Sandcastle.reset();
});

时间控件

-code注意时间的计时规则以及转换的方法。其它的都是应用了。

// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

下面是官司的例子

// Create a clock that loops on Christmas day 2013 and runs in 4000x real time.
var clock = new Cesium.Clock({
   startTime : Cesium.JulianDate.fromIso8601("2013-12-25"),
   currentTime : Cesium.JulianDate.fromIso8601("2013-12-25"),
   stopTime : Cesium.JulianDate.fromIso8601("2013-12-26"),
   clockRange : Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time
   clockStep : Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
   multiplier : 4000, // how much time to advance each tick
   shouldAnimate : true // Animation on by default
});

var viewer = new Cesium.Viewer('cesiumContainer', {
    clockViewModel : new Cesium.ClockViewModel(clock)
});

viewer.scene.globe.enableLighting = true;

Sandcastle.addToolbarButton('Reset Current Time', function() {
    var resetTime = viewer.clockViewModel.startTime;
    viewer.clockViewModel.currentTime = resetTime;
    viewer.timeline.updateFromClock();
});

Sandcastle.addToolbarButton('Slow Down Clock', function() {
    viewer.clockViewModel.multiplier /= 2;
});

Sandcastle.addToolbarButton('Speed Up Clock', function() {
    viewer.clockViewModel.multiplier *= 2;//速度
});

Cesium入门（五）

Cesium入门（五）

配置场景

类型解析

相机

一个Demo

时间控件

猜你喜欢