<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
<title>Shadow Analysis</title>
|
<link href="../layui/css/layui.css" rel="stylesheet" />
|
<style>
|
html {
|
overflow: hidden;
|
height: 100%;
|
}
|
.dateBox label{
|
color: white;
|
}
|
.bnt-box {
|
width: 90%;
|
margin: auto;
|
height: 58px;
|
border-bottom: 1px #999 solid;
|
}
|
|
.layui-input {
|
background-color: #fff !important;
|
width: 203px
|
}
|
|
.layui-form-label {
|
font-weight: bold !important;
|
font-size: 15px;
|
}
|
.layui-btn{
|
background-color: rgba(0, 168, 255, 0.16) !important;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="dateBox">
|
<div class="layui-inline" style="margin-top: 15px">
|
<label class="layui-form-label" id="pickDate"></label>
|
<div class="layui-input-inline">
|
<input type="text" class="layui-input" id="date" placeholder="yyyy-MM-dd">
|
</div>
|
</div>
|
<div class="layui-inline" style="margin-top: 15px">
|
<label class="layui-form-label" id="startLabel"></label>
|
<div class="layui-input-inline">
|
<input type="text" class="layui-input" id="startTime" placeholder="HH:mm:ss">
|
</div>
|
</div>
|
<div class="layui-inline" style="margin-top: 15px">
|
<label class="layui-form-label" id="endLabel"></label>
|
<div class="layui-input-inline">
|
<input type="text" class="layui-input" id="endTime" placeholder="HH:mm:ss">
|
</div>
|
</div>
|
<div class="layui-form-item" style="margin-top: 15px">
|
<label class="layui-form-label" style="font-weight: bold" id="playLabel"></label>
|
<div class="layui-input-inline">
|
<input id='speed' type="number" lay-verify="pass" value="20" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-inline">
|
<button type="button" id="play" class="layui-btn layui-btn-normal play" style="margin-left: 35px;padding: 0 50px;">
|
</button>
|
<button type="button" id="pause" class="layui-btn layui-btn-normal stop" style="margin-left: 17px;padding: 0 50px;">
|
</button>
|
</div>
|
|
</div>
|
|
<script src="../jquery-3.5.0.min.js"></script>
|
<script src="../layui/layui.js"></script>
|
<!-- <script src="./js/AnalysisShadow.js"></script> -->
|
<script>
|
$(function () {
|
layui.use(['element', 'form', 'laydate'], function () {
|
var $ = layui.jquery
|
, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
var form = layui.form;
|
var laydate = layui.laydate;
|
var Viewer = parent.Viewer;
|
var Cesium = parent.Cesium;
|
var layer = parent.layer;
|
document.getElementById("pickDate").innerHTML = `${Viewer.language.SG_PICK_DATE}`
|
document.getElementById("startLabel").innerHTML = `${Viewer.language.SG_START_TIME}`
|
document.getElementById("endLabel").innerHTML = `${Viewer.language.SG_END_TIME}`
|
document.getElementById("playLabel").innerHTML = `${Viewer.language.SG_PLAY_TIME}`
|
document.getElementById("play").innerHTML = `${Viewer.language.SG_PLAY}`
|
document.getElementById("pause").innerHTML = `${Viewer.language.SG_PAUSE}`
|
var layLang = Viewer.language.lang;
|
if(layLang === 'en-US'){
|
layLang = 'en'
|
} else {
|
layLang = 'cn'
|
}
|
|
Viewer.shadows = true;
|
Viewer.clock.clockRange = 2;
|
Viewer.animation.viewModel.playForwardViewModel.command();
|
|
let date = new Date();
|
date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
|
let startTime = '10:00:00', stopTime = '18:00:00';
|
let num = 20, speed = 1440;
|
|
let isPlay = false;
|
let isStop = false;
|
|
startAnalyse();
|
|
laydate.render({
|
elem: '#date'
|
, format: 'yyyy-MM-dd'
|
, value: new Date()
|
, lang: layLang
|
, done: function (value, _date, endDate) {
|
date = value;
|
isPlay = false;
|
}
|
});
|
laydate.render({
|
elem: '#startTime'
|
, format: 'HH:mm:ss'
|
, type: 'time'
|
, value: '10:00:00'
|
, lang: layLang
|
, done: function (value, _date, endDate) {
|
let sNum = new Date(date + ' ' + value).getTime() / 1000;
|
let eNum = new Date(date + ' ' + stopTime).getTime() / 1000;
|
if (sNum > eNum) {
|
layer.msg(`${Viewer.language.SG_START_TIME_LATER_THAN_END}`);
|
return;
|
}
|
startTime = value;
|
speed = (eNum - sNum) / num;
|
isPlay = false;
|
}
|
});
|
laydate.render({
|
elem: '#endTime'
|
, format: 'HH:mm:ss'
|
, value: '18:00:00'
|
, type: 'time'
|
, lang: layLang
|
, done: function (value, _date, endDate) {
|
let sNum = new Date(date + ' ' + startTime).getTime() / 1000;
|
let eNum = new Date(date + ' ' + value).getTime() / 1000;
|
if (sNum > eNum) {
|
layer.msg(`${Viewer.language.SG_START_TIME_LATER_THAN_END}`);
|
return;
|
}
|
stopTime = value;
|
speed = (eNum - sNum) / num;
|
isPlay = false;
|
}
|
});
|
|
$('.play').click(function () {
|
if (isPlay) {
|
isStop = false;
|
} else {
|
startAnalyse();
|
}
|
Viewer.animation.viewModel.playForwardViewModel.command();
|
})
|
$('.stop').click(function () {
|
if (!isStop && isPlay) {
|
Viewer.animation.viewModel.pauseViewModel.command();
|
isStop = true;
|
}
|
});
|
$('#speed').on('input propertychange', function (event) {
|
let value = parseFloat(this.value);
|
if (!isNaN(value)) {
|
num = value;
|
|
let sNum = new Date(date + ' ' + startTime).getTime() / 1000;
|
let eNum = new Date(date + ' ' + stopTime).getTime() / 1000;
|
|
speed = (eNum - sNum) / num;
|
isPlay = false;
|
}
|
})
|
|
function startAnalyse() {
|
let start = new Date(date + ' ' + startTime);
|
Viewer.clock.startTime = Cesium.JulianDate.fromDate(start);
|
Viewer.clock.currentTime = Cesium.JulianDate.fromDate(start);
|
let end = new Date(date + ' ' + stopTime);
|
Viewer.clock.stopTime = Cesium.JulianDate.fromDate(end);
|
Viewer.clock.multiplier = speed;
|
isPlay = true;
|
}
|
});
|
})
|
</script>
|
</body>
|
|
</html>
|
