mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-04 09:14:17 +00:00
129 lines
4.7 KiB
HTML
129 lines
4.7 KiB
HTML
<!--********************************************************************
|
|
* by jiawanlong
|
|
*********************************************************************-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
|
<style>
|
|
#menu {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
padding: 10px;
|
|
background: #72a8eafa;
|
|
border-radius: 3px;
|
|
border: 1px solid rgba(128, 128, 128, 0.5);
|
|
color: #ffffff;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
box-shadow: 0 3px 14px rgba(128, 128, 128, 0.5);
|
|
z-index: 9999;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
|
|
<div id="menu">
|
|
<input id="meeting" type="date" value="2020-10-20" />
|
|
开始时间
|
|
<select id="ks">
|
|
<option value="6">6</option>
|
|
<option selected value="8">8</option>
|
|
<option value="10">10</option>
|
|
<option value="12">12</option>
|
|
</select>
|
|
结束时间
|
|
<select id="js">
|
|
<option value="14">14</option>
|
|
<option value="16">16</option>
|
|
<option selected value="18">18</option>
|
|
<option value="20">20</option>
|
|
</select>
|
|
<button onclick="setvisible('play')">播放</button>
|
|
<button onclick="setvisible('stop')">暂停</button>
|
|
</div>
|
|
<script type="text/javascript">
|
|
class sunlight {
|
|
constructor(viewer, config) {
|
|
this.viewer = viewer;
|
|
this.config = config;
|
|
this.analysis();
|
|
}
|
|
|
|
analysis() {
|
|
var stopTime = null;
|
|
var viewer = this.viewer;
|
|
var config = this.config;
|
|
|
|
var e = config.day;
|
|
var t = new Date(e)
|
|
var i = config.startTime;
|
|
var a = config.stopTime;
|
|
var r = new Date(new Date(t).setHours(Number(i)))
|
|
var o = new Date(new Date(t).setHours(Number(a)));
|
|
if (!config.play) {
|
|
stopTime = viewer.clock.currentTime
|
|
viewer.clock.shouldAnimate = false
|
|
} else {
|
|
viewer.scene.globe.enableLighting = true
|
|
viewer.shadows = true
|
|
viewer.clock.startTime = Cesium.JulianDate.fromDate(r)
|
|
viewer.clock.stopTime = Cesium.JulianDate.fromDate(o)
|
|
viewer.clock.clockRange = config.clockRange
|
|
viewer.clock.clockStep = config.clockStep
|
|
viewer.clock.multiplier = config.multiplier
|
|
if (viewer.clock.shouldAnimate = true, stopTime) {
|
|
viewer.clock.currentTime = stopTime;
|
|
} else {
|
|
viewer.clock.currentTime = Cesium.JulianDate.fromDate(r)
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNDMxOTA2NS1lY2Q3LTQ0YmUtOTE1Mi1iNWE2OGYwZjc0MjkiLCJpZCI6MjM1NjMwLCJpYXQiOjE3MzA3MjQzMTJ9.Xhu-9FyVEyqBKWEr0V9Sybt-elTCWHt9peL9-mNh-4E'
|
|
const viewer = new Cesium.Viewer('map', {
|
|
});
|
|
// 开启帧率
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|
// 深度监测
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
|
const tileset = new Cesium.Cesium3DTileset({
|
|
url: "./data/tileset.json",
|
|
});
|
|
tileset.readyPromise
|
|
.then(function (tileset) {
|
|
viewer.scene.primitives.add(tileset);
|
|
viewer.zoomTo(tileset)
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
function setvisible(p) {
|
|
if (p == "play") {
|
|
new sunlight(viewer, {
|
|
play: true,
|
|
multiplier: 500,
|
|
day: document.getElementById("meeting").value,
|
|
startTime: document.getElementById("ks").value,
|
|
stopTime: document.getElementById("js").value,
|
|
clockRange: Cesium.ClockRange.LOOP_STOP,
|
|
clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
|
|
})
|
|
} else {
|
|
new sunlight(viewer, {
|
|
play: false,
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |