<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>视域分析</title>
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_2599272_671fgrsk7ev.css">
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
<style>
|
.viewdiv {
|
color: white;
|
overflow-x: hidden;
|
overflow-y: hidden;
|
padding: 0;
|
}
|
|
.mt-label {
|
height: 30px;
|
color: white;
|
width: 80px;
|
float: left;
|
margin-left: 10px;
|
line-height: 30px;
|
font-size: 12px;
|
}
|
|
.mt-content {
|
height: 30px;
|
color: white;
|
width: 230px;
|
float: left;
|
/* margin-left: 10px; */
|
}
|
|
.mt-row {
|
height: 30px;
|
margin-top: 10px;
|
}
|
|
.form-control-small {
|
/* display: block; */
|
float: left;
|
margin-left: 5px;
|
width: 80px;
|
height: 20px;
|
padding: 4px 12px;
|
font-size: 14px;
|
line-height: 1.6;
|
background-color: #2c3238;
|
opacity: 0.8;
|
color: #fff;
|
background-image: none;
|
border: 0px solid #e4eaec;
|
border-radius: 3px;
|
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
}
|
|
.mybtn-blue {
|
color: #fff;
|
background-color: #1E9FFF;
|
border-color: #1E9FFF;
|
}
|
.mybtn-yellow {
|
color: #fff;
|
background-color: #FFB800;
|
border-color: #FFB800;
|
}
|
|
.mybtn-green {
|
color: #fff;
|
background-color: #009688;
|
border-color: #009688;
|
}
|
.mybtn-red {
|
color: #fff;
|
background-color: #FF5722;
|
border-color: #FF5722;
|
}
|
|
.layui-slider {
|
height: 4px;
|
background: #f3ebeb;
|
border-radius: 3px;
|
position: relative;
|
cursor: pointer;
|
margin-top: 12px;
|
}
|
|
.layui-slider-bar {
|
background: #1e9fff !important;
|
}
|
|
.layui-slider-wrap-btn {
|
border: 2px solid #888 !important;
|
}
|
|
.layui-slider-input {
|
|
width: 70px;
|
height: 25px;
|
border: 1px solid #e6e6e6;
|
border-radius: 3px;
|
font-size: 16px;
|
line-height: 25px;
|
position: absolute;
|
right: 0;
|
top: -14px;
|
margin-top: 15px;
|
}
|
</style>
|
</head>
|
|
<body>
|
|
<div class="viewdiv">
|
|
<div class="mt-row">
|
<div class="mt-label">水平张角：</div>
|
<div class="mt-content">
|
<div id="sp" style="width: 200px;float: left;">
|
</div>
|
<!-- <div class="float: left;width:100px">
|
<input type="number" id="spinput" autocomplete="off" class="form-control-small" value="100">
|
</div> -->
|
</div>
|
</div>
|
|
<div class="mt-row">
|
<div class="mt-label">垂直张角：</div>
|
<div class="mt-content">
|
<div id="cz" style="width: 200px;float: left;"></div>
|
<!-- <div class="float: left;width:100px">
|
<input type="number" id="czinput" autocomplete="off" class="form-control-small" value="100">
|
</div> -->
|
</div>
|
</div>
|
|
<div class="mt-row">
|
<div class="mt-label">视角距离：</div>
|
<div class="mt-content">
|
<div id="distance" style="width: 200px;float: left;"></div>
|
<!-- <div class="float: left;width:100px">
|
<input type="number" id="distanceinput" autocomplete="off" class="form-control-small" value="100">
|
</div> -->
|
</div>
|
</div>
|
|
<!-- <div class="mt-row">
|
<div class="mt-label">视椎框线：</div>
|
<div class="mt-content">
|
<input style="margin-top: 10px;" type="checkbox" name="显示网格" lay-skin="primary" title=" 显示网格"
|
checked="true"> 显示网格
|
</div>
|
</div> -->
|
|
<div class="mt-row">
|
|
<div class="mt-content">
|
<button type="button" style="margin-left: 20%;" class="layui-btn mybtn-blue layui-btn-sm"
|
onclick="viewshed1()"><i class="layui-icon layui-icon-add-1"
|
style="font-size: 15px; color: white;"></i>添加视域</button>
|
<button type="button" class="layui-btn mybtn-yellow layui-btn-sm" onclick="clearViewshed()"><i
|
class="layui-icon layui-icon-delete" style="font-size: 15px; color: white;"></i>清除</button>
|
</div>
|
</div>
|
</div>
|
|
|
<script>
|
var horizontalAngle = 120, verticalAngle = 90, distance = 10;
|
layui.use('slider', function () {
|
var $ = layui.$
|
, slider = layui.slider;
|
|
slider.render({
|
elem: '#sp'
|
, min: 1 //最小值
|
, max: 180 //最大值
|
, input: true //输入框
|
, tips: false
|
, value: 120
|
, change: function (value) {
|
horizontalAngle = value;
|
}
|
});
|
|
slider.render({
|
elem: '#cz'
|
, min: 1 //最小值
|
, max: 180 //最大值
|
, input: true //输入框
|
, tips: false
|
, value: 90
|
, change: function (value) {
|
verticalAngle = value;
|
}
|
|
});
|
slider.render({
|
elem: '#distance'
|
, min: 1 //最小值
|
, max: 999 //最大值
|
, input: true //输入框
|
, tips: false
|
, value: 10
|
, change: function (value) {
|
distance = value;
|
}
|
});
|
|
|
});
|
function viewshed1() {
|
var options = {
|
'horizontalAngle': horizontalAngle,
|
'verticalAngle': verticalAngle,
|
'distance': distance
|
}
|
parent.onViewshed(options);
|
};
|
function clearViewshed() {
|
parent.clearViewshed();
|
};
|
</script>
|
</body>
|
|
</html>
|
