Cesium开发学习笔记（二）---初始化、时间轴

初始化

// geoserver 引入  获取dom id
var cesiumContainer = document.getElementById("cesiumContainer");

viewer = new Cesium.Viewer("cesiumContainer", {
    //加载在线谷歌地图
    //imageryProvider: new Cesium.UrlTemplateImageryProvider({
    //  url: "http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
    //}),
    imageryProvider: new Cesium.WebMapServiceImageryProvider({
    	//加载本地资源地球
        url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')  
    }),
    homeButton: false, //主页按钮
    baseLayerPicker: false, //是否显示图层选择控件
    navigationHelpButton: false, //帮助信息按钮
    geocoder: false, //是否显示地名查找控件
    infoBox: false,//是否显示点击要素之后显示的信息
    fullscreenButton: false, //是否显示全屏按钮
    timeline: true, //是否显示时间线控件
    animation: true, //是否显示动画控件
    sceneModePicker: true,//是否显示投影方式控件
    selectionIndicator: false, // 取消点击有绿框
    shouldAnimate: true,  //允许动画
    navigationInstructionsInitiallyVisible: false
    // navigation: false,
    sceneMode: 1,  //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
});

//光照: scene.globe.enableLighting
//雾效：scene.fog.enabled
//大气：scene.skyAtmosphere

var options = {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
    clampToGround: true //开启贴地,
};
//注释防止图片显示不全
///为true时,球体会有高程遮挡效果(在没有地形时候也会有高程遮挡效果)
// tilingScheme: new Cesium.GeographicTilingScheme();
// viewer.scene.globe.depthTestAgainstTerrain = true;  

//去除掉 版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";

相机定位聚焦

//  相机聚焦（一）
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(112.3394, 16.8314, 1500000.0),
    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
    }
});

//模型聚焦
//  viewer.zoomTo(entity);

// 相机聚焦（二）
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(118.20, 15.55, 2500000);
    //经纬高
});

时间轴和时间

//时间轴动态显示隐藏
viewer.animation.container.style.visibility = "hidden";
viewer.timeline.container.style.visibility = "hidden";
// viewer.timeline.container.style.visibility = 'visible';
// viewer.animation.container.style.visibility = 'visible';


//获取地图上的当前时间
// var currenttime = viewer.clock.currentTime; 
 
// 获取当前时间
var start = Cesium.JulianDate.fromDate(new Date());
// 添加8小时，使地图时间和北京时间相同
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
//start = Cesium.JulianDate.fromIso8601('2020-04-18');

// 结束时间
var stop = Cesium.JulianDate.fromDate(new Date(2020, 10, 1));
//360是秒，可以在这个时间上加360秒，但是这还是地图上的时间
stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
// 将时间刻到时间轴上
 // 设置始时钟始时间
viewer.clock.startTime = start.clone();
// 设置时钟当前时间
viewer.clock.currentTime = start.clone();
// 设置始终停止时间
viewer.clock.stopTime = stop.clone();
// 时间速率，数字越大时间过的越快
viewer.clock.multiplier = 10;
// 时间轴
viewer.timeline.zoomTo(start, stop);
/*
CLAMPED
达到终止时间后停止
LOOP_STOP
达到终止时间后重新循环
UNBOUNDED
达到终止时间后继续读秒
*/
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

//时间变化就执行(即使停止时间轴仍然会执行)
viewer.clock.onTick.addEventListener(function (clock) {
	//可以在这里做一些时间的监听
});

此笔记仅仅为了记录自己在项目中所学到的知识，如果有问题，可以提出，我们可以共同探讨。