<!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>等高线分析</title>
|
<link href="../SmartEarthSDK/Workers/layui/css/layui.css" rel="stylesheet" />
|
<style>
|
|
.layui-form-label {
|
/* font-weight: bold !important; */
|
font-size: 0.1rem !important;
|
}
|
|
.layui-input {
|
width: 0.5rem !important;
|
background-color: #fff !important;
|
border: none;
|
font-size: 0.1rem;
|
height: 0.25rem;
|
line-height: 1.3;
|
}
|
.layui-form-checkbox{
|
position: absolute;
|
right: 0;
|
}
|
|
.iptline {
|
position: absolute;
|
top: 0.05rem;
|
left: 0.6rem;
|
font-size: 0.1rem;
|
}
|
|
#hb_value {
|
display: none;
|
width: 90%;
|
margin: 0.05rem auto !important;
|
}
|
|
#contour_value {
|
display: none;
|
/* border-top: 1px #999 solid !important; */
|
width: 90%;
|
margin: auto;
|
}
|
|
#contour_value .layui-form-item {
|
width: 90% !important;
|
}
|
|
html::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 0.05rem;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 0.08rem;
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动条 */
|
html::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-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);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动槽 */
|
html::-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);
|
}
|
</style>
|
</head>
|
|
<body onload="test()">
|
<form class="layui-form" action="">
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="color: white;font-size: 0.1rem;margin: 0;">高度渲染</label>
|
<div class="layui-input-inline" style="margin-right: 6%;">
|
<input type="checkbox" name="hb" lay-filter="hb" id="hb" title="海拔">
|
</div>
|
</div>
|
<div id="hb_value">
|
<div>
|
<div class="layui-form-item"
|
style="display: inline-block;font-size: 0.1rem; color:white">
|
<label class="layui-form-label" style="margin-left: -0.13rem">高程</label>
|
<div class="layui-input-inline" style="right: -0.5rem;">
|
<input style="display: inline-block;" type="text" lay-verify="pass" placeholder="最小值" class="layui-input" id="min" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
<span style="margin: 0 0.09rem 0 0;color: white;">——</span>
|
<input style="display: inline-block;" type="text" lay-verify="pass" placeholder="最大值" class="layui-input"
|
id="max" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
<span style="left: 1.4rem;" class="iptline">(米)</span>
|
</div>
|
</div>
|
|
<!-- <div class="layui-form-item"
|
style="display: inline-block;color:white;">
|
<div class="layui-input-inline" style="margin-left: 0;">
|
|
</div>
|
</div> -->
|
</div>
|
<div class="layui-form-item" style="color:white; border-bottom: 1px #999 solid!important;padding-bottom: 0.2rem;">
|
<label class="layui-form-label" style="margin-left: -0.13rem;">颜色</label>
|
<div class="layui-input-inline" style="right: 0.6rem;">
|
<div id="min_color" style="display: inline-block;margin-bottom:0!important;"></div>
|
<span style="margin: 0.09rem;">——</span>
|
<div id="max_color" style="display: inline-block;margin-bottom:0!important;"></div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="color: white;">等高线</label>
|
<div class="layui-input-inline" style="margin-right: 6%;">
|
<input type="checkbox" name="show" id='fxk' lay-filter="fxk" title="显示">
|
</div>
|
</div>
|
<div id="contour_value">
|
<div class="layui-form-item" style="margin-top: 0.12rem;font-size: 0.16rem;color: white;">
|
<label class="layui-form-label" style="margin-left: -0.13rem;">颜色</label>
|
<div class="layui-input-inline">
|
<div id="colorchk" style="display: inline-block;margin-right:0.8rem;margin-bottom:0!important;"></div>
|
</div>
|
</div>
|
<div class="layui-form-item" style="margin-top: 0.12rem;font-size: 0.16rem;color: white;">
|
<label class="layui-form-label" style="margin-left: -0.13rem">间隔</label>
|
<div class="layui-input-inline" style="margin-right: 0.68rem;font-size: 0.18rem;">
|
<input type="text" lay-verify="pass" placeholder="0" autocomplete="off" class="layui-input"
|
id="interval" onkeyup="value=value.replace(/[^\d\.]/g,'')">
|
<span class="iptline">(米)</span>
|
</div>
|
</div>
|
<div class="layui-form-item" style="margin-top: 0.12rem;font-size: 0.16rem;color: white;">
|
<label class="layui-form-label" style="margin-left: -0.13rem">线宽</label>
|
<div class="layui-input-inline" style="margin-right: 0.68rem;font-size: 0.18rem;">
|
<input type="text" lay-verify="pass" placeholder="0" autocomplete="off" class="layui-input"
|
id="lineWidth" onkeyup="value=value.replace(/[^\d\.]/g,'')">
|
<span class="iptline">px</span>
|
</div>
|
</div>
|
</div>
|
</form>
|
|
<script src="../jquery-2.0.3.js"></script>
|
<script src="../SmartEarthSDK/Workers/layui/layui.js"></script>
|
<!--方法js-->
|
<!--<script> layui.use('form', function () { var form = layui.form; form.render(); }); </script>-->
|
<!--<script src="../../js/Analysis/Analysis.js"></script>-->
|
<script>
|
function test() {
|
// console.log(window.screen.availHeight)
|
// console.log(window.screen.availWidth)
|
let htmlDom = document.getElementsByTagName('html')[0]
|
htmlDom.style.fontSize = window.screen.availWidth / 3.75 + 'px';
|
console.log(htmlDom.style.fontSize)
|
}
|
layui.use(['element', 'form', 'slider', 'colorpicker', 'layer'], function () {
|
var $ = layui.jquery
|
, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
var form = layui.form;
|
var colorpicker = layui.colorpicker;
|
var layer = layui.layer;
|
var elevationTool = parent.getElevationTool();
|
|
var _min_color = elevationTool.startColor ? elevationTool.startColor : '#ff0000';
|
colorpicker.render({
|
elem: '#min_color'
|
, color: _min_color //设置默认色
|
, done: function (color) {
|
if (color == "") {
|
color = "#0b0b88"
|
}
|
elevationTool.setStartColor(color);
|
}
|
});
|
|
var _max_color = elevationTool.endColor ? elevationTool.endColor : '#0000ff';
|
colorpicker.render({
|
elem: '#max_color'
|
, color: _max_color //设置默认色
|
, done: function (color) {
|
if (color == "") {
|
color = "#bbff00"
|
}
|
elevationTool.setEndColor(color);
|
}
|
});
|
|
var _colorchk = elevationTool.contourColor ? elevationTool.contourColor : '#ff0000';
|
colorpicker.render({
|
elem: '#colorchk'
|
, color: _colorchk //设置默认色
|
, done: function (color) {
|
if (color == "") {
|
color = "#ff0000"
|
}
|
elevationTool.setContourColor(color);
|
}
|
});
|
|
$('#min').val(elevationTool.min['elevation']);
|
$('#min').on('input propertychange', function (event) {
|
var min = parseFloat($(this).val());
|
if ($("#min").val() === '') {
|
min = 0;
|
}
|
elevationTool.setMin(min);
|
});
|
|
$('#max').val(elevationTool.max['elevation']);
|
$('#max').on('input propertychange', function (event) {
|
var max = parseFloat($(this).val());
|
if ($("#max").val() === '') {
|
max = 10000;
|
}
|
elevationTool.setMax(max);
|
});
|
|
$('#interval').val(elevationTool.spacing);
|
$("#interval").bind("input propertychange", function (event) {
|
if ($(this).val() === '') return;
|
elevationTool.setSpacing(parseFloat($(this).val()));
|
});
|
|
$('#lineWidth').val(elevationTool.width);
|
//设置等高线的线宽
|
$("#lineWidth").bind("input propertychange", function (event) {
|
if ($(this).val() === '') return;
|
elevationTool.setWidth(parseFloat($(this).val()));
|
});
|
form.on('checkbox(hb)', function (data) {
|
var isChecked = this.checked;
|
|
if (!isChecked) {
|
elevationTool.type = 'none';
|
$("#hb_value").slideUp();
|
if ($("#contour_value").css('display') == 'none') {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 160)
|
} else {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 325)
|
}
|
} else {
|
elevationTool.type = 'elevation';
|
$("#hb_value").slideDown();
|
if ($("#contour_value").css('display') != 'none') {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 490)
|
} else {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 325)
|
}
|
}
|
elevationTool.render();
|
});
|
form.on('checkbox(fxk)', function (data) {
|
var isChecked = this.checked;
|
elevationTool.tf = isChecked;
|
if (!isChecked) {
|
$("#contour_value").slideUp();
|
// if ($("#hb_value").css('display') == 'none') {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 160)
|
// } else {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 325)
|
// }
|
|
} else {
|
$("#contour_value").slideDown();
|
// if ($("#hb_value").css('display') != 'none') {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 490)
|
// } else {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 325)
|
// }
|
}
|
elevationTool.render();
|
});
|
|
if (elevationTool.tf && elevationTool.type !== 'elevation') {
|
$('#fxk').next().click();
|
$('#fxk').attr('value', 'on');
|
} else if (!elevationTool.tf && elevationTool.type === 'elevation') {
|
$('#hb').next().click();
|
$('#hb').attr('value', 'on');
|
} else if (elevationTool.tf && elevationTool.type === 'elevation') {
|
$('#hb').next().click();
|
$('#hb').attr('value', 'on');
|
$('#fxk').next().click();
|
$('#fxk').attr('value', 'on');
|
}
|
});
|
|
|
</script>
|
</body>
|
|
</html>
|
