plunkerでcesium その15

概要

plunkerでcesiumやってみた。
hud表示して、飛んでみた。

写真

サンプルコード

var widget = new Cesium.CesiumWidget('cesiumContainer', {
});
var scene = widget.scene;
widget.clock.shouldAnimate = true;
var clock = widget.clock;
var camera = widget.camera;
var QE = 30;
camera.setView({
	destination: Cesium.Cartesian3.fromDegrees(180.0, 0, 8000000.0),
	orientation: {
		heading: Cesium.Math.toRadians(0.0),
		pitch: Cesium.Math.toRadians(-90),
		roll: 0.0
	}
});
let pCartographic = new Cesium.Cartographic();
let ptimeSeconds = 0;
var eventHelper = new Cesium.EventHelper();
eventHelper.add(clock.onTick, onTick);
function onTick() {
	hud.data.throtle = 0.05;
	hud.data.heading = camera.heading;
	hud.data.pitch = camera.pitch;
	hud.data.roll = camera.roll;
	camera.rotateDown(Cesium.Math.toRadians(Math.PI * 5 / 180000));
	const startCartographic = Cesium.Cartographic.fromCartesian(camera.position);
	hud.data.altitude = startCartographic.height;
	const geodesic = new Cesium.EllipsoidGeodesic(pCartographic, startCartographic);	
	const distance = geodesic.surfaceDistance;
	const julianDate = widget.clock.currentTime; 
	const date = Cesium.JulianDate.toDate(julianDate);
	const timeSeconds = date.getTime();
	const v = timeSeconds - ptimeSeconds;
	if (v > 0)
	{
		const speed = distance / v * 60 * 60;
		hud.data.speed = speed;
	}
  ptimeSeconds = timeSeconds;
	pCartographic = startCartographic;
}
setTimeout(function() {
	widget.camera.flyTo({
		destination: Cesium.Cartesian3.fromDegrees(140.0, 35.0, 5000.0),
		orientation: {
			heading: Cesium.Math.toRadians(30.0),
			pitch: Cesium.Math.toRadians(-15.0),
			roll: 0.0
		}
	});
}, 5000);
var stage = document.getElementById('overlay');
var ctx = stage.getContext('2d');
stage.width = 500;
stage.height = 500;
var canvas = document.getElementById('overlay');
var hud = new HUD(canvas);
hud.start();
document.addEventListener("keydown", (e) => {
	switch (e.code) 
	{
		case "KeyQ": {
			QE -= 10;
			camera.setView({
				orientation: {
					heading: Cesium.Math.toRadians(QE),
					pitch: Cesium.Math.toRadians(-15),
					roll: 0.0
				}
			});
			break;
		}
		case "KeyE": {
			QE += 10;
			camera.setView({
				orientation: {
					heading: Cesium.Math.toRadians(QE),
					pitch: Cesium.Math.toRadians(-15),
					roll: 0.0
				}
			});	
			break;
		}
	}
});

成果物

以上。