<!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>Sunshine Analysis</title>
|
<link rel="stylesheet" href="../../Workers/layui/css/layui.css" rel="stylesheet" />
|
<style>
|
html {
|
overflow: hidden;
|
height: 100%;
|
}
|
|
.laydate-btns-clear {
|
display: none;
|
}
|
|
.dateBox {
|
height: 420px;
|
overflow: auto;
|
margin-right: 6px;
|
}
|
|
.dateBox::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 4px;
|
scrollbar-arrow-color: red;
|
}
|
|
.dateBox::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
|
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
.dateBox::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
|
.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;
|
width: 110px;
|
padding: 9px 8px;
|
}
|
|
.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="timeInterval"></label>
|
<div class="layui-input-inline">
|
<input id='interval' type="number" lay-verify="pass" value="60" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item" style="margin-top: 15px">
|
<label class="layui-form-label" style="font-weight: bold" id="spaceInterval"></label>
|
<div class="layui-input-inline">
|
<input id='spacing' type="number" lay-verify="pass" value="10" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item" style="margin-top: 15px">
|
<label class="layui-form-label" style="font-weight: bold" id="extrudeHeight"></label>
|
<div class="layui-input-inline">
|
<input id='addHeight' type="number" lay-verify="pass" value="30" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="buttonContainer" style="text-align: center;">
|
<button type="button" class="layui-btn layui-btn-normal analyse" style="padding: 0 38px;" id="startAnalysis">
|
</button>
|
</div>
|
|
</div>
|
<script src="../../Workers/layui/layui.js"></script>
|
<script>
|
window.onload = function() {
|
layui.use(['element', 'form', 'laydate'], function() {
|
var $ = layui.jquery
|
, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
var form = layui.form;
|
var laydate = layui.laydate;
|
var sgworld = parent.earthCtrl;
|
var Viewer = parent.Viewer;
|
var Cesium = parent.Cesium;
|
var layer = parent.layuiLayer;
|
document.getElementById("pickDate").innerText = `${Viewer.language.SG_PICK_DATE}`
|
document.getElementById("startLabel").innerText = `${Viewer.language.SG_START_TIME}`
|
document.getElementById("endLabel").innerText = `${Viewer.language.SG_END_TIME}`
|
document.getElementById("timeInterval").innerText = `${Viewer.language.SG_TIME_INTERVAL}`
|
document.getElementById("spaceInterval").innerText = `${Viewer.language.SG_SPACE_INTERVAL}`
|
document.getElementById("extrudeHeight").innerText = `${Viewer.language.SG_EXTRUDE_HEIGHT}`
|
document.getElementById("startAnalysis").innerText = `${Viewer.language.SG_START_ANALYSIS}`
|
|
var layLang = Viewer.language.lang;
|
if (layLang === 'en-US') {
|
layLang = 'en'
|
} else {
|
layLang = 'cn'
|
}
|
let date = new Date();
|
date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
|
let startTime = '13:00:00', stopTime = '15:00:00';
|
|
let interval = 60, spacing = 10, addHeight = 30;
|
|
laydate.render({
|
elem: '#date'
|
, format: 'yyyy-MM-dd'
|
, value: new Date()
|
, lang: layLang
|
, done: function(value, _date, endDate) {
|
date = value;
|
}
|
});
|
laydate.render({
|
elem: '#startTime'
|
, format: 'HH:mm:ss'
|
, type: 'time'
|
, value: '13: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;
|
}
|
});
|
laydate.render({
|
elem: '#endTime'
|
, format: 'HH:mm:ss'
|
, value: '15: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;
|
}
|
});
|
|
document.querySelector('.analyse').addEventListener('click', function() {
|
parent.window._AnalysisSunshine = sgworld.analysis.SunshineAnalysisPolygon({
|
start: date + ' ' + startTime,
|
end: date + ' ' + stopTime,
|
interval: interval,
|
spacing: spacing,
|
addHeight: addHeight
|
});
|
});
|
|
document.getElementById('interval').addEventListener('input', function(event) {
|
let value = parseFloat(this.value);
|
if (!isNaN(value)) {
|
interval = value;
|
}
|
});
|
|
document.getElementById('interval').addEventListener('propertychange', function(event) {
|
let value = parseFloat(this.value);
|
if (!isNaN(value)) {
|
interval = value;
|
}
|
});
|
|
document.getElementById('spacing').addEventListener('input', function(event) {
|
let value = parseFloat(this.value);
|
if (!isNaN(value)) {
|
spacing = value;
|
}
|
});
|
|
document.getElementById('spacing').addEventListener('propertychange', function(event) {
|
let value = parseFloat(this.value);
|
if (!isNaN(value)) {
|
spacing = value;
|
}
|
});
|
|
document.getElementById('addHeight').addEventListener('input', function(event) {
|
let value = parseFloat(this.value);
|
if (!isNaN(value)) {
|
addHeight = value;
|
}
|
});
|
|
document.getElementById('addHeight').addEventListener('propertychange', function(event) {
|
let value = parseFloat(this.value);
|
if (!isNaN(value)) {
|
addHeight = value;
|
}
|
});
|
|
});
|
}
|
</script>
|
</body>
|
|
</html>
|
